Convert google drive picker file to javascript file type

Question

I am using Google API V3. I have a scenario where I use a google drive picker to pick a file (of any extension) from the drive and send it to the server for an operation (cannot mention lot of details due to confidential info related to the project).

Edit: I am trying to pick an mpp file (MS Project) from google drive using the drive picker and send the file to the server. The server converts the MPP file to JSON and returns it back to the client, This is what I am trying to do. I am able to achieve this with a normal input tag, but the requirement is to use google drive picker.

I am able to get the file via picker, get the file details using Google Files API (files.get), but I do not know to proceed further to convert it into a JavaScript File type (similar to the input tag where we upload a file).

    showDrivePicker({
        title: 'Pick an mpp file',
        selectFolderEnabled: true,
        enableMyDrive: true
    }, function pickerCallback( data ) {
        if ( data[google.picker.Response.ACTION] == google.picker.Action.PICKED ) {
            var doc = data[google.picker.Response.DOCUMENTS][0],
                url = doc[google.picker.Document.URL].split('/view'),
                name = doc.name;

            gapi.client.files.get({
                  fileId: 'xxxxx', 
                  corpora: 'teamDrive',
                  supportsTeamDrives: true,
                  includeTeamDriveItems: true,
                  includeTeamDriveItemsRequired: true,
                  includeItemsFromAllDrives: true,
                  fields: '*',
            }).then((response) => {
               // I have the downloadUrl here, but what should I do with it?
            })
        }
    }, me);

Kindly help with this.

Thanks

I think this will answer your question: https://stackoverflow.com/questions/60839431/downloading-a-file-from-google-drive-in-javascript-client. Basically add `alt: 'media'` to the get options and `response.body` will contain the binary of the file. — Martí, Jan 25 '21 at 10:19
Does this answer your question? [Downloading a file from Google Drive in Javascript client](https://stackoverflow.com/questions/60839431/downloading-a-file-from-google-drive-in-javascript-client) — Martí, Jan 25 '21 at 10:20
Adding alt:media gives me the binary of the file, but when I convert the response into a JavaScript file type and send it to the server, it fails detailing that the data is not in the expected type. — Anusha Swaminathan, Jan 25 '21 at 11:15
Now that I have the binary of the file, how do I convert it to a proper File type ? — Anusha Swaminathan, Jan 25 '21 at 11:16
I am trying to pick an mpp file (MS Project) from google drive using the drive picker and send the file to the server. The server converts the MPP file to JSON and returns it back to the client, This is what I am trying to do. I am able to achieve this with a normal input tag, but the requirement is to use google drive picker. — Anusha Swaminathan, Jan 25 '21 at 16:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227806/discussion-between-marti-and-anusha-swaminathan). — Martí, Jan 25 '21 at 16:55

score 2 · Accepted Answer · answered Jan 27 '21 at 10:47

What you want to do in a situation like this is to:

Download the file from drive
Convert it into a File object

You can download the file by giving the ID and setting alt to media. To create the file you call its constructor with the body of the response, and the filename and MIME type from the original picker document information:

function pickerCallback(data) {
 if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
   const doc = data[google.picker.Response.DOCUMENTS][0]
   gapi.client.drive.files.get({
     fileId: doc.id,
     alt: 'media',
   }).then(function(res) {
     const file = new File([res.body], doc.name, { type: doc.mimeType })
    
     // Do whatever with the file
     console.log(file)
   })
 }
}

Convert google drive picker file to javascript file type

1 Answers1

References

Linked