‘ড্রাইভে সংরক্ষণ করুন’ বোতামটি ব্যবহারকারীদের আপনার ওয়েবসাইট থেকে ড্রাইভে ফাইল সংরক্ষণ করার সুযোগ দেয়। উদাহরণস্বরূপ, ধরুন আপনার ওয়েবসাইটে বেশ কয়েকটি নির্দেশিকা ম্যানুয়াল (পিডিএফ) তালিকাভুক্ত আছে যা ব্যবহারকারীরা ডাউনলোড করতে পারেন। প্রতিটি ম্যানুয়ালের পাশে ‘ড্রাইভে সংরক্ষণ করুন’ বোতামটি রাখা যেতে পারে, যা ব্যবহারকারীদের ম্যানুয়ালগুলো তাদের ‘মাই ড্রাইভ’-এ সংরক্ষণ করার সুযোগ দেবে।
যখন ব্যবহারকারী বোতামটিতে ক্লিক করেন, তখন ডেটা উৎস থেকে ফাইলটি ডাউনলোড হয়ে যায় এবং ডেটা প্রাপ্তি সাপেক্ষে গুগল ড্রাইভে আপলোড হয়ে যায়। যেহেতু ডাউনলোডটি ব্যবহারকারীর ব্রাউজারের প্রেক্ষাপটে সম্পন্ন হয়, তাই এই প্রক্রিয়াটি ব্যবহারকারীকে তার প্রতিষ্ঠিত ব্রাউজার সেশন ব্যবহার করে ফাইল সংরক্ষণের কাজটি প্রমাণীকরণের সুযোগ দেয়।
সমর্থিত ব্রাউজার
‘ড্রাইভে সংরক্ষণ করুন’ বোতামটি এই ব্রাউজারগুলো সমর্থন করে।
একটি পৃষ্ঠায় "ড্রাইভে সংরক্ষণ করুন" বোতামটি যোগ করুন
‘Save to 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>
কোথায়:
আপনি যদি একটি স্ট্যান্ডার্ড HTML ট্যাগ ব্যবহার করেন, তাহলে
classএকটি আবশ্যক প্যারামিটার যা অবশ্যইg-savetodriveএ সেট করতে হবে।data-srcএকটি আবশ্যিক প্যারামিটার, যাতে সংরক্ষণ করার ফাইলের URL থাকে।- ইউআরএল অ্যাবসোলিউট বা রিলেটিভ হতে পারে।
- বাটনটি যে ডোমেইনে হোস্ট করা আছে,
data-srcইউআরএলটি সেই একই ডোমেইন, সাবডোমেইন এবং প্রোটোকল থেকে পরিবেশন করা যেতে পারে। পেজ এবং ডেটা সোর্সের মধ্যে আপনাকে অবশ্যই সামঞ্জস্যপূর্ণ প্রোটোকল ব্যবহার করতে হবে। - ডেটা ইউআরআই এবং
file://ইউআরএল সমর্থিত নয়। - ব্রাউজারের সেম অরিজিন পলিসির কারণে, এই ইউআরএলটি অবশ্যই সেই পৃষ্ঠার ডোমেইন থেকে পরিবেশন করতে হবে যেখানে এটি রাখা হয়েছে, অথবা ক্রস অরিজিন রিসোর্স শেয়ারিং (CORS) ব্যবহার করে অ্যাক্সেসযোগ্য হতে হবে। যদি বাটন এবং রিসোর্স ভিন্ন ডোমেইনে থাকে, তাহলে ভিন্ন ডোমেইনে বাটন এবং রিসোর্স পরিচালনা (#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 প্যারামিটার একই হয়, তবে একটি বাটন থেকে সেভ করলে একই ধরনের সব বাটনে একই অগ্রগতির তথ্য প্রদর্শিত হয়। যদি একাধিক ভিন্ন বাটনে ক্লিক করা হয়, তবে সেগুলো ক্রমানুসারে সেভ হয়।
বিভিন্ন ডোমেইনে বাটন এবং রিসোর্স পরিচালনা করুন
যদি আপনার "ড্রাইভে সংরক্ষণ করুন" বোতামটি ডেটা উৎস থেকে একটি আলাদা পৃষ্ঠায় থাকে, তাহলে ফাইলটি সংরক্ষণ করার অনুরোধে রিসোর্সটি অ্যাক্সেস করার জন্য অবশ্যই ক্রস অরিজিন রিসোর্স শেয়ারিং (CORS) ব্যবহার করতে হবে। CORS হলো এমন একটি ব্যবস্থা যা একটি ডোমেইনের ওয়েব অ্যাপ্লিকেশনকে ভিন্ন ডোমেইনের সার্ভার থেকে রিসোর্স অ্যাক্সেস করার সুযোগ দেয়।
উদাহরণস্বরূপ, যদি http://example.com/page.html ঠিকানার কোনো পৃষ্ঠায় একটি "ড্রাইভে সংরক্ষণ করুন" (Save to Drive) বাটন রাখা হয় এবং ডেটা সোর্স হিসেবে 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
যেকোনো ডোমেইন থেকে CORS অনুমোদনের জন্য Access-Control-Allow-Origin মান * হতে পারে, অথবা বিকল্পভাবে CORS-এর মাধ্যমে রিসোর্সটিতে অ্যাক্সেস করতে পারে এমন ডোমেইনগুলো নির্দিষ্ট করে দেওয়া যেতে পারে, যেমন http://example.com/page.html । আপনার কন্টেন্ট হোস্ট করার জন্য যদি কোনো সার্ভার না থাকে, তবে Google App Engine ব্যবহার করার কথা বিবেচনা করতে পারেন।
আরও তথ্যের জন্য, আপনার "Save to Drive" বাটনটি পরিবেশনকারী অরিজিন থেকে কীভাবে CORS সক্রিয় করবেন সে বিষয়ে আপনার সার্ভার ডকুমেন্টেশন দেখুন। আপনার সার্ভারকে CORS-এর জন্য সক্রিয় করার বিষয়ে আরও তথ্যের জন্য, "I want to add CORS support to my server" দেখুন।
জাভাস্ক্রিপ্ট এপিআই
"Save to Drive" বাটনের জাভাস্ক্রিপ্ট gapi.savetodrive নেমস্পেসের অধীনে দুটি বাটন-রেন্ডারিং ফাংশন সংজ্ঞায়িত করে। আপনি যদি স্বয়ংক্রিয় রেন্ডারিং নিষ্ক্রিয় করেন, তবে আপনাকে অবশ্যই parsetags explicit এ সেট করে এই ফাংশনগুলির মধ্যে একটিকে কল করতে হবে।
| পদ্ধতি | বর্ণনা |
|---|---|
gapi.savetodrive. render ( | নির্দিষ্ট কন্টেইনারটিকে একটি 'ড্রাইভে সংরক্ষণ করুন' বাটন উইজেট হিসেবে রেন্ডার করে।
|
gapi.savetodrive. go ( | নির্দিষ্ট কন্টেইনারের সমস্ত "Save to Drive" ট্যাগ এবং ক্লাস রেন্ডার করে। এই ফাংশনটি শুধুমাত্র তখনই ব্যবহার করা উচিত যখন parsetags explicit এ সেট করা থাকে, যা আপনি পারফরম্যান্সের কারণে করতে পারেন।
|
সুস্পষ্ট লোড সহ "ড্রাইভে সংরক্ষণ করুন" জাভাস্ক্রিপ্টের উদাহরণ।
<!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 ভেরিয়েবলটিকে সেই ভাষায় সেট করুন। সেট করা না থাকলে, ব্যবহারকারীর গুগল ড্রাইভের ভাষা ব্যবহৃত হবে।
উপলব্ধ ভাষা কোড মানগুলির জন্য, সমর্থিত ভাষা কোডগুলির তালিকা দেখুন।
<!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 সমস্যা নেই।
যদি বড় ফাইলগুলো ২ মেগাবাইটে সংকুচিত হয়ে যায়, তাহলে সম্ভবত আপনার সার্ভার Content-Range প্রকাশ করছে না, যা সম্ভবত একটি CORS সমস্যা।