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

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

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

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

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

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

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

দ্রষ্টব্য: বোতামটি ইনলাইনে রেন্ডার করা হয়েছে। "ড্রাইভে সংরক্ষণ করুন" বোতামটি অন্য উপাদানে মোড়ানো যেতে পারে যাতে প্রাথমিক লেআউটটি চূড়ান্ত লেআউটের মতো দেখায়।

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

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

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

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

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

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

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

data-src URL অন্য ডোমেন থেকে পরিবেশন করা যেতে পারে তবে HTTP সার্ভারের প্রতিক্রিয়াগুলিকে HTTP বিকল্প অনুরোধগুলি সমর্থন করতে হবে এবং নিম্নলিখিত বিশেষ 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 ব্যবহার করার কথা বিবেচনা করুন৷

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

জাভাস্ক্রিপ্ট API

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

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

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

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

যদি বড় ফাইলগুলিকে 2MB-এ ছোট করা হয়, তাহলে সম্ভবত আপনার সার্ভার বিষয়বস্তু-পরিসীমা প্রকাশ করছে না, সম্ভবত একটি CORS সমস্যা৷