"ড্রাইভে সংরক্ষণ করুন" বোতাম

"ড্রাইভে সংরক্ষণ করুন" বোতামটি ব্যবহারকারীদের আপনার ওয়েবসাইট থেকে ড্রাইভে ফাইল সংরক্ষণ করতে দেয়। উদাহরণস্বরূপ, ধরুন আপনার ওয়েবসাইটে বেশ কয়েকটি নির্দেশিকা ম্যানুয়াল (পিডিএফ) তালিকাভুক্ত করা হয়েছে যা ব্যবহারকারীরা ডাউনলোড করতে পারেন। "ড্রাইভে সংরক্ষণ করুন" বোতামটি প্রতিটি ম্যানুয়ালের পাশে স্থাপন করা যেতে পারে যা ব্যবহারকারীদের তাদের মাই ড্রাইভে ম্যানুয়াল সংরক্ষণ করার অনুমতি দেয়।

ব্যবহারকারী যখন বোতামটি ক্লিক করেন, তখন ফাইলটি ডেটা উৎস থেকে ডাউনলোড করা হয় এবং ডেটা প্রাপ্তির সাথে সাথে Google ড্রাইভে আপলোড করা হয়। যেহেতু ডাউনলোডটি ব্যবহারকারীর ব্রাউজারের প্রেক্ষাপটে করা হয়, এই প্রক্রিয়াটি ব্যবহারকারীকে তাদের প্রতিষ্ঠিত ব্রাউজার সেশন ব্যবহার করে ফাইল সংরক্ষণের জন্য ক্রিয়াটি প্রমাণীকরণ করতে দেয়।

সমর্থিত ব্রাউজার

"ড্রাইভে সংরক্ষণ করুন" বোতামটি এই ব্রাউজারগুলিকে সমর্থন করে।

একটি পৃষ্ঠায় "ড্রাইভে সংরক্ষণ করুন" বোতামটি যোগ করুন

"ড্রাইভে সংরক্ষণ করুন" বোতামের একটি উদাহরণ তৈরি করতে, আপনার ওয়েব পৃষ্ঠায় নিম্নলিখিত স্ক্রিপ্টটি যুক্ত করুন:

<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) ব্যবহার করে অ্যাক্সেসযোগ্য হতে হবে। যদি বোতাম এবং রিসোর্স ভিন্ন ডোমেনে থাকে, তাহলে Handle buttons and resources on different domains .(#domain) দেখুন।
    • http এবং https উভয়ের মাধ্যমে একই পৃষ্ঠা পরিবেশন করা হলে ফাইলটি পরিবেশন করার জন্য, data-src="//example.com/files/file.pdf" এর মতো প্রোটোকল ছাড়াই রিসোর্সটি নির্দিষ্ট করুন, যা হোস্টিং পৃষ্ঠাটি কীভাবে অ্যাক্সেস করা হয়েছিল তার উপর ভিত্তি করে উপযুক্ত প্রোটোকল ব্যবহার করে।

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

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

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

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

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

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

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

বিভিন্ন ডোমেনে বোতাম এবং রিসোর্স পরিচালনা করুন

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

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

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 ব্যবহার করার কথা বিবেচনা করুন।

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

জাভাস্ক্রিপ্ট এপিআই

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

পদ্ধতি বিবরণ
gapi.savetodrive. render (
container ,
parameters
)		 নির্দিষ্ট কন্টেইনারটিকে "ড্রাইভে সংরক্ষণ করুন" বোতাম উইজেট হিসেবে রেন্ডার করে।
ধারক
"ড্রাইভে সংরক্ষণ করুন" বোতাম হিসেবে রেন্ডার করার জন্য কন্টেইনারটি। কন্টেইনারের (স্ট্রিং) আইডি অথবা DOM এলিমেন্টটি নির্দিষ্ট করুন।
পরামিতি
"Save to Drive" ট্যাগের বৈশিষ্ট্যাবলী ধারণকারী একটি বস্তু, যা key=value pairs হিসেবে থাকে, data- উপসর্গ ছাড়াই। উদাহরণস্বরূপ, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"} .
gapi.savetodrive. go (
opt_container
)		 নির্দিষ্ট কন্টেইনারে সমস্ত "Save to Drive" ট্যাগ এবং ক্লাস রেন্ডার করে। এই ফাংশনটি শুধুমাত্র তখনই ব্যবহার করা উচিত যদি parsetags explicit তে সেট করা থাকে, যা আপনি পারফরম্যান্সের কারণে করতে পারেন।
অপট_কন্টেইনার
"Save to Drive" বোতাম ট্যাগ ধারণকারী কন্টেইনারটি রেন্ডার করার জন্য। কন্টেইনারের (স্ট্রিং) আইডি অথবা DOM উপাদানটি নিজেই উল্লেখ করুন। যদি opt_container প্যারামিটারটি বাদ দেওয়া হয়, তাহলে পৃষ্ঠার সমস্ত "Save to 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>

"ড্রাইভে সংরক্ষণ করুন" জাভাস্ক্রিপ্টের উদাহরণ স্পষ্ট রেন্ডার সহ 

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

"ড্রাইভে সংরক্ষণ করুন" বোতামটি স্থানীয়করণ করুন

যদি আপনার ওয়েব পৃষ্ঠাটি একটি নির্দিষ্ট ভাষা সমর্থন করে, তাহলে window.___gcfg.lang ভেরিয়েবলটিকে সেই ভাষাতে সেট করুন। যদি সেট না করা থাকে, তাহলে ব্যবহারকারীর Google ড্রাইভ ভাষা ব্যবহার করা হবে।

উপলব্ধ ভাষা কোড মানগুলির জন্য, সমর্থিত ভাষা কোডগুলির তালিকা দেখুন।

    <!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 সমস্যা।