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

उदाहरण के लिए, अगर 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 में सेव करें" बटन को दिखाने वाले ऑरिजिन से सीओआरएस को चालू करने का तरीका जानें. अपने सर्वर को सीओआरएस से चालू करने के बारे में ज़्यादा जानने के लिए, मुझे अपने सर्वर में सीओआरएस की सुविधा जोड़नी है पर जाएं.

JavaScript एपीआई

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

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

अश्लील लोड वाले JavaScript का उदाहरण "Drive में सेव करें"

<!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>

अश्लील इमेज वाली JavaScript का उदाहरण "Drive में सेव करें"

    <!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 गड़बड़ी मिलती है, तो पुष्टि करें कि वह संसाधन मौजूद है और आपको सीओआरएस से जुड़ी समस्या तो नहीं है.

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