Unggah gambar dari URL ke Google Drive melalui Javascript API Google Drive

Aug 18 2020

Saya baru dalam Javascript dan minta maaf jika pertanyaan saya tampak membosankan bagi Anda. Saya ingin mengunggah gambar dari situs web saya ke Google Drive saya. Saya telah berhasil menerapkan bagian pembuatan Autentikasi dan Folder, tetapi saya bingung tentang proses pengunggahannya.
Katakan ini adalah kode saya untuk membuat folder di dalam Google Drive:

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;
    }
  });
}

Sekarang saya ingin mengunggah gambar saya dari url ini: https://xxxxxx.comke folder yang baru dibuat dari respons atas ( file.id)

Inilah yang saya dapatkan di dokumentasi Google API, tetapi di mana saya harus meletakkan / melampirkan url saya di dalamnya?

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);
    }
  });
}

Terima kasih banyak sebelumnya.

Jawaban

1 Tanaike Aug 19 2020 at 08:26

Saya yakin tujuan Anda sebagai berikut.

Anda ingin mendownload file dari URL dan mengupload file yang didownload ke Google Drive menggunakan Javascript.
Dalam kasus Anda, Anda gapi.clientdapat digunakan untuk mengunggah file ke Google Drive.

Poin modifikasi:

Sayangnya pada tahap saat ini sepertinya gapi.client.drive.files.createmasih belum bisa mengirimkan request termasuk isinya. Ref Jadi dalam kasus ini, saya ingin mengusulkan untuk digunakan fetchsebagai solusi. Saat fetchdigunakan, konten file dan metadata dapat diminta dengan multipart/form-data.
Dalam solusi ini, token akses digunakan dari gapi.client. Jadi skrip ini menganggap Anda gapi.clientdapat digunakan untuk mengunggah file. Harap berhati-hati ini.

Skrip yang dimodifikasi:

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));
});

Saat Anda menjalankan skrip ini, hasil berikut dapat dilihat di konsol. (Jika URL adalah tautan langsung dari file gambar Jpeg.)
```
  {
    "kind": "drive#file",
    "id": "###",
    "name": "sample filename",
    "mimeType": "image/jpeg"
  }
```

catatan:

Dalam hal ini, uploadType=multipartdigunakan. Jadi ukuran file maksimal adalah 5 MB. Harap berhati-hati ini. Jika Anda ingin menggunakan lebih dari 5 MB, harap centang Unggahan yang dapat dilanjutkan. Ref

Referensi:

Menggunakan Fetch
Unggah data file

Ditambahkan:

Untuk menghindari kesalahan terkait CORS, sebagai metode lain, saya ingin mengusulkan untuk menggunakan Aplikasi Web sebagai pembungkus. Dalam hal ini, sisi klien adalah Javascript. Javascript ini dapat digunakan di luar Google.

Pemakaian:

Silakan lakukan alur berikut.

1. Buat proyek baru Google Apps Script.

Contoh skrip Aplikasi Web adalah Skrip Google Apps. Jadi silakan buat proyek Google Apps Script.

Jika Anda ingin langsung membuatnya, silakan akses ke https://script.new/. Dalam kasus ini, jika Anda tidak masuk Google, layar masuk akan terbuka. Jadi silakan masuk ke Google. Dengan ini, editor skrip Google Apps Script dibuka.

Unggah gambar dari URL ke Google Drive melalui Javascript API Google Drive

Jawaban

Poin modifikasi:

Skrip yang dimodifikasi:

catatan:

Referensi:

Ditambahkan:

Pemakaian:

1. Buat proyek baru Google Apps Script.

2. Siapkan naskah.

3. Terapkan Aplikasi Web.

4. Unggah file dari sisi klien ke sisi server.

catatan:

Referensi:

Dokumentasi