Generate body for multipart file upload using fetch in Javascript

Question

I am trying to upload a file(uploadType=multipart) to Drive API V3 using fetch but the body is wrong as it is creating a file with the title unnamed.

var  tmpFile=document.getElementById('inputFile').files;
 tmpFile=tmpFile[0];

await  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
    method: 'POST', // or 'PUT'
    headers: {
        'Authorization': 'Bearer '+accessToken,

      },
    body: {
            metadata:{
                       'name':tmpFile.name,
                       'Content-Type':'application/json; charset=UTF-8' 
            },
            media:{
                'Content-Type': '*/*',
                'name':tmpFile
            }
    }

    })
    .then(response => response.json())
    .then(data => {
    console.log('Success:', data);
    })
    .catch((error) => {
    console.error('Error:', error);
});

How is `tmpFile` created? Can you edit this snippet to be a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)? — esqew, May 04 '21 at 13:13

score 1 · Accepted Answer · answered May 04 '21 at 13:18

Your metadata is not being properly uploaded if its uploading with a name of unnamed

const fs = require("fs");
const FormData = require("form-data");
const fetch = require("node-fetch");

const filePath = "./sample.txt";
const accessToken = "###";

token = req.body.token;
var formData = new FormData();
var fileMetadata = {
  name: "sample.txt",
};
formData.append("metadata", JSON.stringify(fileMetadata), {
  contentType: "application/json",
});
formData.append("data", fs.createReadStream(filePath), {
  filename: "sample.txt",
  contentType: "text/plain",
});
fetch("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart", {
  method: "POST",
  body: formData,
  headers: { Authorization: "Bearer " + accessToken },
})
  .then((res) => res.json())
  .then(console.log);

Uploading Files of multipart/form-data to Google Drive using Drive API with Node.js

Generate body for multipart file upload using fetch in Javascript

1 Answers1