Google डिस्क API जावास्क्रिप्ट के माध्यम से URL से Google ड्राइव पर छवि अपलोड करें
मैं जावास्क्रिप्ट में नया हूं और क्षमा करें यदि मेरा प्रश्न आपको लंगड़ा लगता है। मैं अपनी वेबसाइट से अपनी Google ड्राइव पर एक छवि अपलोड करना चाहता हूं। मैंने प्रमाणीकरण और फ़ोल्डर निर्माण भाग को सफलतापूर्वक लागू किया है, लेकिन मैं अपलोडिंग प्रक्रिया के बारे में उलझन में हूं।
कहो कि Google डिस्क के अंदर एक फ़ोल्डर बनाने के लिए यह मेरा कोड है:
function createFolder(folderName) {
var parentId = 'xxxxxxx';//some parentId of a folder under which to create the new folder
var fileMetadata = {
'name' : folderName,
'mimeType' : 'application/vnd.google-apps.folder',
'parents': [parentId]
};
gapi.client.drive.files.create({
resource: fileMetadata,
}).then(function(response) {
switch(response.status){
case 200:
var file = response.result;
console.log('Created Folder Id: ', file.id);
uploadImage(file.id);
break;
default:
console.log('Error creating the folder, '+response);
break;
}
});
}
अब मैं इस url से अपनी छवि अपलोड करना चाहता हूं: https://xxxxxx.com
ऊपरी प्रतिक्रिया से नव निर्मित फ़ोल्डर में ( file.id
)
यह मुझे Google API दस्तावेज़ में मिला है, लेकिन मुझे इसमें अपना url कहां / संलग्न करना चाहिए?
function uploadImage(folderId) {
var fileMetadata = {
'name': 'photo.jpg',
parents: [folderId]
};
var media = {
mimeType: 'image/jpeg',
body: fs.createReadStream('files/photo.jpg')
};
drive.files.create({
resource: fileMetadata,
media: media,
fields: 'id'
}, function (err, file) {
if (err) {
// Handle error
console.error(err);
} else {
console.log('File Id: ', file.id);
}
});
}
आपका अग्रिम रूप से बोहोत धन्यवाद।
जवाब
मेरा लक्ष्य इस प्रकार है।
- आप URL से फ़ाइल डाउनलोड करना चाहते हैं और जावास्क्रिप्ट के उपयोग से Google ड्राइव में डाउनलोड की गई फ़ाइल अपलोड करना चाहते हैं।
- आपके मामले में, आपका
gapi.client
उपयोग Google डिस्क पर फ़ाइल अपलोड करने के लिए किया जा सकता है।
संशोधन अंक:
- वर्तमान चरण में, दुर्भाग्य से, ऐसा लगता है कि
gapi.client.drive.files.create
अभी भी सामग्री सहित अनुरोध नहीं भेज सकते हैं। Ref तो इस मामले में, मैंfetch
एक समाधान के रूप में उपयोग करने का प्रस्ताव करना चाहूंगा । जबfetch
उपयोग किया जाता है, तो फ़ाइल सामग्री और मेटाडेटा के साथ अनुरोध किया जा सकता हैmultipart/form-data
। - इस वर्कअराउंड में, एक्सेस टोकन का उपयोग किया जाता है
gapi.client
। इसलिए यह स्क्रिप्ट मानती है कि आपकाgapi.client
उपयोग फ़ाइल को अपलोड करने के लिए किया जा सकता है। कृपया इससे सावधान रहें।
संशोधित स्क्रिप्ट:
const url = "###"; // Please set the URL.
const fileName = "sample filename";
const folderId = "###"; // Please set the folder ID.
fetch(url).then(res => res.blob()).then(blob => {
const form = new FormData();
form.append('metadata', new Blob([JSON.stringify({name: fileName, parents: [folderId]})], {type: 'application/json'}));
form.append('file', blob);
fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
method: 'POST',
headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
body: form
}).then(res => res.json()).then(val => console.log(val));
});
जब आप इस स्क्रिप्ट को चलाते हैं, तो कंसोल पर निम्न परिणाम देखा जा सकता है। (जब यूआरएल जेपीईजी इमेज फाइल का सीधा लिंक हो।)
{ "kind": "drive#file", "id": "###", "name": "sample filename", "mimeType": "image/jpeg" }
ध्यान दें:
- इस मामले में,
uploadType=multipart
उपयोग किया जाता है। तो अधिकतम फ़ाइल आकार 5 एमबी है। कृपया इससे सावधान रहें। जब आप 5 एमबी से अधिक का उपयोग करना चाहते हैं, तो कृपया पुन: प्रयोज्य अपलोड की जांच करें। संदर्भ
संदर्भ:
- फ़ेच का उपयोग करना
- फ़ाइल डेटा अपलोड करें
जोड़ा गया:
एक अन्य विधि के रूप में, CORS से संबंधित त्रुटि से बचने के लिए, मैं वेब ऐप्स को एक आवरण के रूप में उपयोग करने का प्रस्ताव देना चाहूंगा। इस मामले में, ग्राहक पक्ष जावास्क्रिप्ट है। इस जावास्क्रिप्ट का उपयोग Google के बाहर किया जा सकता है।
उपयोग:
कृपया निम्न प्रवाह करें।
1. Google Apps स्क्रिप्ट की नई परियोजना बनाएँ।
वेब ऐप्स का नमूना स्क्रिप्ट एक Google Apps स्क्रिप्ट है। तो कृपया Google Apps Script का एक प्रोजेक्ट बनाएं।
यदि आप इसे सीधे बनाना चाहते हैं, तो कृपया इस पर पहुँचें https://script.new/। इस स्थिति में, यदि आप Google में लॉग इन नहीं हैं, तो स्क्रीन में लॉग खोला जाता है। तो कृपया Google में लॉग इन करें। इसके द्वारा Google Apps Script का स्क्रिप्ट एडिटर खोला जाता है।
2. स्क्रिप्ट तैयार करें।
कृपया निम्न स्क्रिप्ट (Google Apps Script) को स्क्रिप्ट संपादक में कॉपी और पेस्ट करें। यह स्क्रिप्ट वेब एप्स के लिए है।
सर्वर साइड: Google Apps स्क्रिप्टइस स्क्रिप्ट का उपयोग वेब ऐप्स के लिए किया जाता है। इस स्थिति में, वेब एप्लिकेशन को आवरण के रूप में उपयोग किया जाता है।
function doGet(e) {
const imageUrl = e.parameter.imageUrl;
const res = UrlFetchApp.fetch(imageUrl);
if (res.getResponseCode() != 200) throw new Error("Image couldn't be retrieved.");
const blob = res.getBlob();
const file = DriveApp.getFolderById(e.parameter.folderId).createFile(blob.setName(e.parameter.filename));
const obj = {id: file.getId(), name: file.getName(), mimeType: file.getMimeType()};
return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
}
3. वेब ऐप्स तैनात करें।
- स्क्रिप्ट एडिटर पर, "प्रकाशित करें" -> "वेब ऐप के रूप में तैनात करें" द्वारा एक संवाद बॉक्स खोलें।
- "मुझे एप्लिकेशन को इस रूप में निष्पादित करें" के लिए "मुझे" चुनें ।
- इसके द्वारा, स्क्रिप्ट को स्वामी के रूप में चलाया जाता है।
- का चयन करें "कोई भी, यहां तक कि गुमनाम" के लिए "कौन एप्लिकेशन की पहुंच है:" ।
- नए "प्रोजेक्ट संस्करण" के रूप में "तैनात" बटन पर क्लिक करें।
- स्वचालित रूप से "प्राधिकरण आवश्यक" का एक संवाद बॉक्स खोलें।
- "समीक्षा अनुमतियाँ" पर क्लिक करें।
- स्वयं का खाता चुनें।
- "यह एप्लिकेशन सत्यापित नहीं है" पर "उन्नत" पर क्लिक करें।
- "### प्रोजेक्ट नाम ### (असुरक्षित) पर जाएं" पर क्लिक करें
- "अनुमति दें" बटन पर क्लिक करें।
- ओके पर क्लिक करें"।
- Web Apps का URL कॉपी करें। यह पसंद है
https://script.google.com/macros/s/###/exec
।- जब आपने Google Apps स्क्रिप्ट को संशोधित किया, तो कृपया नए संस्करण के रूप में फिर से तैयार करें। इसके द्वारा, संशोधित स्क्रिप्ट वेब ऐप्स पर दिखाई देती है। कृपया इससे सावधान रहें।
4. क्लाइंट साइड से सर्वर साइड में एक फाइल अपलोड करें।
ग्राहक पक्ष: HTML और जावास्क्रिप्टकृपया अपने वेब एप्लिकेशन का URL निम्न स्क्रिप्ट पर सेट करें। और, कृपया फ़ाइल नाम और फ़ोल्डर आईडी सेट करें।
const imageUrl = "###"; // Please set the URL of image.
const url = "https://script.google.com/macros/s/###/exec"; // Please set the URL of Web Apps.
const qs = new URLSearchParams({
imageUrl: imageUrl,
filename: "sample filename",
folderId: "###", // Please set folder ID.
});
fetch(`${url}?${qs}`).then((res) => res.json()).then(console.log).catch(console.log);
परिणाम:
जब स्क्रिप्ट से ऊपर चला जाता है, तो निम्न मान वापस आ जाता है। आप कंसोल पर दिए गए मान को देख सकते हैं।
{
"id": "###",
"name": "###",
"mimeType": "###"
}
ध्यान दें:
- जब आपने वेब ऐप्स की स्क्रिप्ट को संशोधित किया, तो कृपया वेब ऐप को नए संस्करण के रूप में फिर से तैयार करें। इसके द्वारा, नवीनतम स्क्रिप्ट वेब ऐप्स पर दिखाई देती है। कृपया इससे सावधान रहें।
संदर्भ:
- वेब ऐप्स
- Google Apps स्क्रिप्ट के साथ वेब ऐप्स का लाभ लेना
इस स्निपेट का उपयोग करके अपनी फ़ोटो फ़ाइल अपलोड करने का प्रयास करें:
// download file from website
const http = require('https')
const fs = require('fs')
let file = fs.createWriteStream('Photo001.jpg')
let request = http.get(
'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x.png',
(response) => {
response.pipe(file)
})
// upload file to Google Drive
let fileMetadata = {
'name' : 'Photo001',
'mimeType': 'image/jpeg'
}
let media = {
mimeType : 'image/jpeg',
body : fs.createReadStream('Photo001.jpeg')
}
function uploadFile(auth){
const drive = google.drive({version: 'v3', auth})
drive.files.create({
resource: fileMetadata,
media : media,
fields : 'id'
}, (err, res) => {
if (err) return console.log('The API returned an error: ' + err)
})
}
प्रलेखन
- फ़ाइलें: बनाएँ