Search code examples
javascriptgoogle-apigoogle-drive-apifetchgoogle-api-js-client

Generate body for multipart file upload using fetch in Javascript


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

Solution

  • 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