"Drive में सेव करें" बटन जोड़ें

"Drive में सेव करें" बटन की मदद से, लोग आपकी वेबसाइट से Drive में फ़ाइलें सेव कर सकते हैं. उदाहरण के लिए, मान लें कि आपकी वेबसाइट पर कई निर्देश पुस्तिकाएं (PDF) मौजूद हैं, जिन्हें लोग डाउनलोड कर सकते हैं. "Drive में सेव करें" बटन को हर मैन्युअल के साथ रखा जा सकता है. इससे उपयोगकर्ता, मैन्युअल को अपनी 'मेरी ड्राइव' में सेव कर पाएंगे.

जब उपयोगकर्ता इस बटन पर क्लिक करता है, तो फ़ाइल को डेटा सोर्स से डाउनलोड किया जाता है. इसके बाद, डेटा मिलने पर उसे Google Drive पर अपलोड किया जाता है. क्योंकि डाउनलोड, उपयोगकर्ता के ब्राउज़र के कॉन्टेक्स्ट में किया जाता है. इसलिए, इस प्रोसेस की मदद से उपयोगकर्ता, फ़ाइलों को सेव करने की कार्रवाई की पुष्टि कर सकता है. इसके लिए, उसे अपने ब्राउज़र सेशन का इस्तेमाल करना होगा.

इस्तेमाल किए जा सकने वाले ब्राउज़र

"Drive में सेव करें" बटन, इन ब्राउज़र के साथ काम करता है.

किसी पेज पर "Drive में सेव करें" बटन जोड़ना

"Save to Drive" बटन का इंस्टेंस बनाने के लिए, अपने वेब पेज में यह स्क्रिप्ट जोड़ें:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

कहां:

• class एक ज़रूरी पैरामीटर है. अगर स्टैंडर्ड एचटीएमएल टैग का इस्तेमाल किया जा रहा है, तो इसे g-savetodrive पर सेट करना होगा.

• data-src एक ज़रूरी पैरामीटर है. इसमें सेव की जाने वाली फ़ाइल का यूआरएल होता है.

  • यूआरएल, ऐब्सलूट या रिलेटिव हो सकते हैं.
  • data-src यूआरएल को उसी डोमेन, सबडोमेन, और प्रोटोकॉल से दिखाया जा सकता है जिस डोमेन पर बटन होस्ट किया गया है. आपको पेज और डेटा सोर्स के बीच मेल खाने वाले प्रोटोकॉल का इस्तेमाल करना होगा.
  • डेटा यूआरआई और file:// यूआरएल का इस्तेमाल नहीं किया जा सकता.
  • ब्राउज़र की सेम ऑरिजिन नीति की वजह से, इस यूआरएल को उसी डोमेन से दिखाया जाना चाहिए जिस पेज पर इसे रखा गया है. इसके अलावा, इसे क्रॉस ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) का इस्तेमाल करके ऐक्सेस किया जा सकता है. अगर बटन और संसाधन अलग-अलग डोमेन पर हैं, तो अलग-अलग डोमेन पर मौजूद बटन और संसाधनों को मैनेज करना (#domain) लेख पढ़ें.
  • जब एक ही पेज को एचटीटीपी और एचटीटीपीएस, दोनों से दिखाया जाता है, तब फ़ाइल दिखाने के लिए, प्रोटोकॉल के बिना संसाधन तय करें. जैसे, data-src="//example.com/files/file.pdf". यह होस्टिंग पेज को ऐक्सेस करने के तरीके के आधार पर, सही प्रोटोकॉल का इस्तेमाल करता है.

• data-filename एक ज़रूरी पैरामीटर है. इसमें सेव की गई फ़ाइल का नाम होता है.

• data-sitename एक ज़रूरी पैरामीटर है. इसमें फ़ाइल उपलब्ध कराने वाली वेबसाइट का नाम होता है.

इन एट्रिब्यूट को किसी भी एचटीएमएल एलिमेंट पर रखा जा सकता है. हालांकि, आम तौर पर div, span या button एलिमेंट इस्तेमाल किए जाते हैं. पेज लोड होने के दौरान, इनमें से हर एलिमेंट थोड़ा अलग दिखता है. ऐसा इसलिए होता है, क्योंकि ब्राउज़र, "Save to Drive" JavaScript के एलिमेंट को फिर से रेंडर करने से पहले, एलिमेंट को रेंडर करता है.

इस स्क्रिप्ट को एचटीटीपीएस प्रोटोकॉल का इस्तेमाल करके लोड किया जाना चाहिए. साथ ही, इसे पेज पर किसी भी जगह बिना किसी पाबंदी के शामिल किया जा सकता है. बेहतर परफ़ॉर्मेंस के लिए, स्क्रिप्ट को एसिंक्रोनस तरीके से भी लोड किया जा सकता है.

ध्यान दें: बटन को इनलाइन रेंडर किया जाता है. "Drive में सेव करें" बटन को किसी दूसरे एलिमेंट में रैप किया जा सकता है, ताकि शुरुआती लेआउट, फ़ाइनल लेआउट जैसा दिखे.

ध्यान दें: अगर उपयोगकर्ता डाउनलोड पूरा होने से पहले पेज से हट जाता है, तो डेटा खारिज कर दिया जाता है. साथ ही, Google Drive में कोई फ़ाइल नहीं बनाई जाती.

किसी पेज पर एक से ज़्यादा बटन इस्तेमाल करना

एक ही पेज पर, "Drive में सेव करें" बटन कई बार जोड़ा जा सकता है. उदाहरण के लिए, किसी लंबे पेज पर सबसे ऊपर और सबसे नीचे एक बटन हो सकता है.

अगर कई बटन के लिए data-src और data-filename पैरामीटर एक जैसे हैं, तो किसी एक बटन से सेव करने पर, मिलते-जुलते सभी बटन पर प्रोग्रेस की एक जैसी जानकारी दिखेगी. अगर अलग-अलग बटन पर क्लिक किया जाता है, तो वे क्रम से सेव होते हैं.

अलग-अलग डोमेन पर बटन और संसाधनों को मैनेज करना

अगर "Drive में सेव करें" बटन, डेटा सोर्स से अलग पेज पर है, तो फ़ाइल को सेव करने के अनुरोध में, संसाधन को ऐक्सेस करने के लिए क्रॉस ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) का इस्तेमाल करना होगा. CORS एक ऐसा तरीका है जिसकी मदद से, एक डोमेन पर मौजूद वेब ऐप्लिकेशन, किसी दूसरे डोमेन पर मौजूद सर्वर से रिसॉर्स ऐक्सेस कर सकता है.

उदाहरण के लिए, अगर किसी पेज पर "Drive में सेव करें" बटन को http://example.com/page.html पर रखा गया है और डेटा सोर्स को data-src="https://otherserver.com/files/file.pdf" के तौर पर सेट किया गया है, तो बटन PDF को ऐक्सेस नहीं कर पाएगा. ऐसा तब तक होगा, जब तक ब्राउज़र संसाधन को ऐक्सेस करने के लिए सीओआरएस का इस्तेमाल नहीं कर सकता.

data-src यूआरएल को किसी दूसरे डोमेन से भी दिखाया जा सकता है. हालांकि, एचटीटीपी सर्वर से मिलने वाले जवाबों में, एचटीटीपी OPTION अनुरोधों के लिए सहायता उपलब्ध होनी चाहिए. साथ ही, इनमें ये खास एचटीटीपी हेडर शामिल होने चाहिए:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin की वैल्यू * हो सकती है, ताकि किसी भी डोमेन से सीओआरएस की अनुमति दी जा सके. इसके अलावा, उन डोमेन के बारे में भी बताया जा सकता है जिनके पास सीओआरएस के ज़रिए संसाधन को ऐक्सेस करने की अनुमति है. जैसे, http://example.com/page.html. अगर आपके पास कॉन्टेंट को होस्ट करने के लिए कोई सर्वर नहीं है, तो Google App Engine का इस्तेमाल करें.

ज़्यादा जानकारी के लिए, अपने सर्वर के दस्तावेज़ में यह देखें कि "Save to Drive" बटन दिखाने वाले ऑरिजिन से CORS को कैसे चालू करें. अपने सर्वर पर सीओआरएस की सुविधा चालू करने के बारे में ज़्यादा जानने के लिए, मुझे अपने सर्वर पर सीओआरएस की सुविधा जोड़नी है लेख पढ़ें.

JavaScript API

"Drive में सेव करें" बटन का JavaScript, gapi.savetodrive नेमस्पेस में बटन रेंडर करने वाले दो फ़ंक्शन तय करता है. अपने-आप रेंडर होने की सुविधा बंद करने पर, आपको parsetags को explicit पर सेट करके, इनमें से किसी एक फ़ंक्शन को कॉल करना होगा.

तरीका	ब्यौरा
gapi.savetodrive.render( container, parameters )	इस फ़ंक्शन की मदद से, तय किए गए कंटेनर को "Drive में सेव करें" बटन वाले विजेट के तौर पर रेंडर किया जाता है. कंटेनर यह कंटेनर, "Drive में सेव करें" बटन के तौर पर रेंडर होगा. कंटेनर (स्ट्रिंग) का आईडी या DOM एलिमेंट खुद तय करें. पैरामीटर यह एक ऑब्जेक्ट है. इसमें "Save to Drive" टैग के एट्रिब्यूट, key=value पेयर के तौर पर शामिल होते हैं. हालांकि, इसमें data- प्रीफ़िक्स शामिल नहीं होते हैं. उदाहरण के लिए, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go( opt_container )	यह टैग, दिए गए कंटेनर में मौजूद "Drive में सेव करें" टैग और क्लास को रेंडर करता है. इस फ़ंक्शन का इस्तेमाल सिर्फ़ तब किया जाना चाहिए, जब parsetags को explicit पर सेट किया गया हो. ऐसा परफ़ॉर्मेंस से जुड़ी वजहों से किया जा सकता है. opt_container यह कंटेनर, "Save to Drive" बटन के टैग को रेंडर करने के लिए होता है. कंटेनर का आईडी (स्ट्रिंग) या DOM एलिमेंट खुद तय करें. अगर opt_container पैरामीटर को शामिल नहीं किया जाता है, तो पेज पर मौजूद "Drive में सेव करें" टैग रेंडर किए जाते हैं.

एक्सप्लिसिट लोड के साथ "Drive में सेव करें" सुविधा का इस्तेमाल करने वाले JavaScript का उदाहरण

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

रेंडर करने के लिए साफ़ तौर पर निर्देश देने वाला "Drive में सेव करें" JavaScript का उदाहरण

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

"Drive में सेव करें" बटन को स्थानीय भाषा में बदलना

अगर आपका वेब पेज किसी खास भाषा में काम करता है, तो window.___gcfg.lang वैरिएबल को उस भाषा पर सेट करें. अगर इस सेटिंग को सेट नहीं किया जाता है, तो उपयोगकर्ता के Google Drive की भाषा का इस्तेमाल किया जाता है.

भाषा कोड की उपलब्ध वैल्यू के लिए, इस्तेमाल किए जा सकने वाले भाषा कोड की सूची देखें.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

समस्या का हल

अगर आपको data-src यूआरएल डाउनलोड करते समय XHR वाली गड़बड़ी का मैसेज मिलता है, तो पुष्टि करें कि संसाधन मौजूद है. साथ ही, यह भी देख लें कि आपको CORS से जुड़ी कोई समस्या न हो.

अगर बड़ी फ़ाइलों को 2 एमबी तक छोटा कर दिया जाता है, तो हो सकता है कि आपका सर्वर Content-Range को ऐक्सेस करने की अनुमति न दे रहा हो. यह CORS से जुड़ी समस्या हो सकती है.