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

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

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

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

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

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

"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 एलिमेंट का इस्तेमाल किया जाता है. पेज लोड होने के दौरान, इनमें से हर एलिमेंट थोड़ा अलग तरीके से दिखता है. ऐसा इसलिए होता है, क्योंकि "Drive में सेव करें" JavaScript, एलिमेंट को फिर से रेंडर करने से पहले, ब्राउज़र एलिमेंट को रेंडर कर देता है.

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

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

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

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

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

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

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

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

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

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

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 का इस्तेमाल करें.

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

JavaScript API

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

तरीका	ब्यौरा
gapi.savetodrive.render( container, parameters )	दिए गए कंटेनर को "Drive में सेव करें" बटन विज़ेट के तौर पर रेंडर करता है. कंटेनर "Drive में सेव करें" बटन के तौर पर रेंडर करने के लिए कंटेनर. कंटेनर का आईडी (स्ट्रिंग) या खुद DOM एलिमेंट बताएं. पैरामीटर data- प्रीफ़िक्स के बिना, "Drive में सेव करें" टैग एट्रिब्यूट को कीवर्ड=वैल्यू पेयर के तौर पर शामिल करने वाला ऑब्जेक्ट. उदाहरण के लिए, {"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 रेंडर करने के लिए, "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 की समस्या की वजह से हो सकता है.