1

I try to upload a photo that I have in a URL on another server, but it does not work for me or I do not know how to upload them in this case I am going to upload a photo but I also want to upload files that will upload to that URL.

const img = await fetch("http://example.com/api/photo")

await gapi.client.drive.files.create({
  resource: {
    name: "New Folder",
    body: img,
  }
})
Linda Lawton - DaImTo
  • 106,405
  • 32
  • 180
  • 449
Marcos Barrera
  • 35
  • 1
  • 6

2 Answers2

1

The simple anwser is you cant do it like that. The file being Uploaded must be sent in the form of a stream

Download the file to your own machine and then upload it from there. Or try to figure out how to turn your url into a stream.

var fileMetadata = {
  'name': 'photo.jpg'
};
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);
  }
});
Linda Lawton - DaImTo
  • 106,405
  • 32
  • 180
  • 449
1

I believe your goal as follows.

  • You want to download an image data from an URL, and want to upload the downloaded image data to Google Drive.
    • From your script, the image data is downloaded by const img = await fetch("http://example.com/api/photo").
  • You want to achieve this using googleapis for Javascript.

Modification points:

  • In this case, it retrieves Blob of image data from fetch, and the blob is uploaded to Google Drive.
  • Unfortunately, in the current stage, it seems that although googleapis for Javascript can create new file with the metadata, the file content cannot be included. By this, in this answer, I use the method of this thread. The downloaded image data is uploaded using fetch with multipart/form-data.

When above poiints are reflected to your script, it becomes as follows.

Modified script:

const img = await fetch("http://example.com/api/photo").then((e) => e.blob());

const fileMetadata = {name: "sampleName"}; // Please set filename.
const form = new FormData();
form.append('metadata', new Blob([JSON.stringify(fileMetadata)], {type: 'application/json'}));
form.append('file', img);
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(res => console.log(res));
  • By this modification, the downloaded image data is uploaded to Google Drive with multipart/form-data.

Note:

  • In this modification, it supposes as follows.
    • Your URL of http://example.com/api/photo is the direct link of the image data.
    • Your authorization script can be used for uploading a file to Google Drive.
  • In this answer, as a sample script, the file is uploaded with uploadType=multipart. In this case, the maximum file size is 5 MB. Please be careful this. When you want to upload the file with the large size, please check the resumable upload. Ref

References:

Tanaike
  • 181,128
  • 11
  • 97
  • 165