"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-এ সেট করতে হবে যদি আপনি স্ট্যান্ডার্ড HTML ট্যাগ ব্যবহার করেন।

• data-src হল একটি প্রয়োজনীয় প্যারামিটার যাতে সেভ করার জন্য ফাইলের URL থাকে।

  • URL অ্যাবসোলিউট বা রিলেটিভ হতে পারে।
  • যে ডোমেনে বোতামটি হোস্ট করা হয়েছে, সেই একই ডোমেন, সাবডোমেন এবং প্রোটোকল থেকে data-src URL পরিবেশন করা যেতে পারে। আপনাকে অবশ্যই পৃষ্ঠা এবং ডেটা সোর্সের মধ্যে ম্যাচিং প্রোটোকল ব্যবহার করতে হবে।
  • ডেটা URI এবং file:// URL কাজ করে না।
  • ব্রাউজারের একই অরিজিন নীতির কারণে, এই URLটি যে পৃষ্ঠায় রাখা হয়েছে, সেই একই ডোমেন থেকে পরিবেশন করতে হবে অথবা ক্রস অরিজিন রিসোর্স শেয়ারিং (CORS) ব্যবহার করে অ্যাক্সেসযোগ্য হতে হবে। বোতাম ও রিসোর্স আলাদা ডোমেনে থাকলে, আলাদা ডোমেনে বোতাম ও রিসোর্স ম্যানেজ করা(#domain) লিঙ্ক দেখুন।
  • একই পৃষ্ঠা http এবং https, দুটির মাধ্যমেই পরিবেশন করা হলে, ফাইলটি পরিবেশন করতে, প্রোটোকল ছাড়া রিসোর্সটি উল্লেখ করুন, যেমন data-src="//example.com/files/file.pdf", যা হোস্টিং পৃষ্ঠাটি কীভাবে অ্যাক্সেস করা হয়েছিল তার উপর ভিত্তি করে উপযুক্ত প্রোটোকল ব্যবহার করে।

• data-filename হল একটি প্রয়োজনীয় প্যারামিটার যাতে সেভ ফাইলের জন্য ব্যবহৃত নাম থাকে।

• data-sitename হল একটি প্রয়োজনীয় প্যারামিটার যাতে ফাইল প্রদানকারী ওয়েবসাইটের নাম থাকে।

আপনি যেকোনও HTML এলিমেন্টে এইসব অ্যাট্রিবিউট যোগ করতে পারেন। তবে, সবচেয়ে বেশি ব্যবহার করা এলিমেন্ট হল div, span বা button। এইসব এলিমেন্টের প্রতিটি, পৃষ্ঠা লোড হওয়ার সময় সামান্য আলাদাভাবে দেখায় কারণ "Drive-এ সেভ করুন" জাভাস্ক্রিপ্ট এলিমেন্টটি আবার রেন্ডার করার আগে ব্রাউজার এলিমেন্টটি রেন্ডার করে।

এই স্ক্রিপ্টটি অবশ্যই HTTPS প্রোটোকল ব্যবহার করে লোড করতে হবে এবং পৃষ্ঠার যেকোনও পয়েন্ট থেকে কোনও বিধিনিষেধ ছাড়াই অন্তর্ভুক্ত করা যেতে পারে। এছাড়াও, উন্নত পারফর্ম্যান্সের জন্য আপনি অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট লোড করতে পারেন।

মনে রাখবেন: বোতামটি ইনলাইন রেন্ডার করা হয়। "Drive-এ সেভ করুন" বোতামটি অন্য কোনও এলিমেন্টের মধ্যে র‌্যাপ করা যেতে পারে যাতে প্রাথমিক লেআউটটি চূড়ান্ত লেআউটের মতো দেখায়।

মনে রাখবেন: ডাউনলোড সম্পূর্ণ হওয়ার আগেই ব্যবহারকারী পৃষ্ঠা থেকে অন্য কোথাও চলে গেলে, ডেটা বাতিল করা হয় এবং Google Drive-এ কোনও ফাইল তৈরি হয় না।

একটি পৃষ্ঠায় একাধিক বোতাম ব্যবহার করা

আপনি একই পৃষ্ঠায় একাধিক "Drive-এ সেভ করুন" বোতাম যোগ করতে পারবেন। যেমন, একটি দীর্ঘ পৃষ্ঠার উপরে এবং নিচে আপনার একটি বোতাম থাকতে পারে।

একাধিক বোতামের জন্য data-src এবং data-filename প্যারামিটার একই হলে, একটি বোতাম থেকে সেভ করলে একই ধরনের সব বোতাম একই প্রগ্রেস তথ্য দেখায়। একাধিক আলাদা আলাদা বোতামে ক্লিক করা হলে, সেগুলি ক্রমানুসারে সেভ হয়।

বিভিন্ন ডোমেনে বোতাম ও রিসোর্স ম্যানেজ করা

আপনার "Drive-এ সেভ করুন" বোতামটি ডেটা সোর্স থেকে আলাদা পৃষ্ঠায় থাকলে, ফাইল সেভ করার অনুরোধে রিসোর্স অ্যাক্সেস করার জন্য ক্রস অরিজিন রিসোর্স শেয়ারিং (CORS) ব্যবহার করতে হবে। CORS হল এমন একটি মেকানিজম যা একটি ডোমেনের ওয়েব অ্যাপ্লিকেশনকে অন্য ডোমেনের সার্ভার থেকে রিসোর্স অ্যাক্সেস করার অনুমতি দেয়।

যেমন, "Drive-এ সেভ করুন" বোতামটি যদি http://example.com/page.html-এ কোনও পৃষ্ঠায় থাকে এবং ডেটা সোর্স data-src="https://otherserver.com/files/file.pdf" হিসেবে নির্দিষ্ট করা থাকে, তাহলে ব্রাউজার রিসোর্স অ্যাক্সেস করার জন্য CORS ব্যবহার করতে না পারলে বোতামটি PDF অ্যাক্সেস করতে পারবে না।

data-src URL অন্য ডোমেন থেকে পরিবেশন করা যেতে পারে, তবে HTTP সার্ভার থেকে পাওয়া উত্তরে HTTP OPTION অনুরোধের জন্য সহায়তা থাকতে হবে এবং নিম্নলিখিত বিশেষ HTTP হেডার অন্তর্ভুক্ত করতে হবে:

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

Access-Control-Allow-Origin-এর ভ্যালু * হতে পারে যাতে যেকোনও ডোমেন থেকে CORS-এর অনুমতি দেওয়া যায় অথবা বিকল্প হিসেবে CORS-এর মাধ্যমে রিসোর্স অ্যাক্সেস করতে পারে এমন ডোমেন উল্লেখ করতে পারে, যেমন http://example.com/page.html. আপনার কন্টেন্ট হোস্ট করার জন্য কোনও সার্ভার না থাকলে, Google App Engine ব্যবহার করার কথা বিবেচনা করুন।

আরও তথ্যের জন্য, আপনার "Drive-এ সেভ করুন" বোতাম পরিবেশনকারী উৎস থেকে কীভাবে CORS চালু করবেন সে সম্পর্কে আপনার সার্ভার ডকুমেন্টেশন দেখুন। CORS-এর জন্য আপনার সার্ভার চালু করার বিষয়ে আরও তথ্যের জন্য, আমি আমার সার্ভারে CORS সাপোর্ট যোগ করতে চাই লিঙ্কটি দেখুন।

JavaScript API

"Drive-এ সেভ করুন" বোতামের জাভাস্ক্রিপ্ট, gapi.savetodrive নেমস্পেসের অধীনে দুটি বোতাম-রেন্ডারিং ফাংশন সংজ্ঞায়িত করে। আপনি অটোমেটিক রেন্ডারিং বন্ধ করলে, আপনাকে অবশ্যই parsetags-কে explicit-এ সেট করে এই ফাংশনগুলির মধ্যে একটিকে কল করতে হবে।

পদ্ধতি	বিবরণ
gapi.savetodrive.render( container, parameters )	"Drive-এ সেভ করুন" বোতাম উইজেট হিসেবে নির্দিষ্ট কন্টেনার রেন্ডার করে। কন্টেনার "Drive-এ সেভ করুন" বোতাম হিসেবে রেন্ডার করার জন্য কন্টেনার। কন্টেনারের আইডি (স্ট্রিং) অথবা DOM এলিমেন্ট উল্লেখ করুন। parameters "Save to 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-এ সেভ করুন" বোতামের ট্যাগ সহ কন্টেনার রেন্ডার করতে হবে। কন্টেনারের আইডি (স্ট্রিং) অথবা DOM এলিমেন্ট উল্লেখ করুন। opt_container প্যারামিটার বাদ দেওয়া হলে, পৃষ্ঠার সব "Drive-এ সেভ করুন" ট্যাগ রেন্ডার করা হয়।

এক্সপ্লিসিট লোড সহ "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>

স্পষ্ট রেন্ডার সহ "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 URL ডাউনলোড করার সময় XHR সংক্রান্ত কোনও সমস্যা হলে, রিসোর্সটি সত্যিই আছে কিনা এবং CORS সংক্রান্ত কোনও সমস্যা নেই কিনা তা যাচাই করুন।

বড় ফাইল ২ এমবিতে ট্রাঙ্কেট করা হলে, আপনার সার্ভার সম্ভবত কন্টেন্ট-রেঞ্জ প্রকাশ করছে না, সম্ভবত এটি একটি CORS সমস্যা।