Steps for uploading a file to Google Drive API with a custom name instead of "untitled":

Question

Steps for uploading a file to Google Drive API with a custom name instead of "untitled":

I have attempted to send the name in the object "formData.append" within the code structure, but unfortunately, I have not achieved success.

The documentation states that the name should be sent in the body.

Useful Documentation Links: https://developers.google.com/drive/api/v3/reference/files/create - https://developers.google.com/drive/api/v3/manage-uploads#http_1

Received Response:

{ "kind": "drive#file", "id": "1uz_NN-IyoiPzaheAiKIJu6qlB7ZfxIX2", "name": "Untitled", "mimeType": "application/x-www-form-urlencoded" }

Name: "Untitled"

- Any assistance would be greatly appreciated

Upload.prototype.doUpload = function () {
        var that = this;
        var formData = new FormData();
    
        formData.append("file", this.file);
        formData.append("upload_file", true);
        formData.append("name", "test_file");
    
        $.ajax({
            type: "POST",
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken"));
                
            },
            url: "https://www.googleapis.com/upload/drive/v3/files",
            data:{
                uploadType:"multipart"
            },
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.log(error);
            },
            async: true,
            data: formData,
            cache: false,
            processData: false,
            timeout: 60000
        });
    };

javascript ajax google-drive-api

Answer 1

Answer №1

Would you consider this revised approach?

Key Modifications:

It appears that ajax requests cannot directly handle multipart/form-data using FormData(). Thus, it is necessary to structure the multipart/form-data and send it as the data payload.
- Currently, your script only uploads the file content without including the file metadata, resulting in the uploaded file lacking a filename. To address this, both the file content and metadata need to be uploaded using multipart/form-data.
Your script contains 2 properties under data.

By incorporating the above points into your script, the following modifications can be made.

Revised Script:

Upload.prototype.doUpload = function () {
    const file = this.file;  // Assuming that "this.file" represents the blob.

    const fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = function() {
      const boundary = "xxxxxxxxxx";
      let data = "--" + boundary + "\n";
      data += "Content-Type: application/json; charset=UTF-8\n\n";
      data += JSON.stringify({name: "test_file"}) + "\n";
      data += "--" + boundary + "\n";
      data += "Content-Transfer-Encoding: base64\n\n";
      data += fr.result.split(",")[1] + "\n";
      data += "--" + boundary + "--";
      $.ajax({
        type: "POST",
        beforeSend: function(request) {
          request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken"));
          request.setRequestHeader("Content-Type", "multipart/related; boundary=" + boundary);
        },
        url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart",
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },
        async: true,
        data: data,
        cache: false,
        processData: false,
        timeout: 60000
      });
    }
}

Important Note:

In this revised script,
- It is assumed that this.file in your original script represents the blob.
- Your access token is required for successful file uploading to Google Drive.
When utilizing uploadType=multipart, be mindful that the maximum file size allowed is 5 MB.

Further Resources:

Answer 2

Would you consider this revised approach?

Key Modifications:

It appears that ajax requests cannot directly handle multipart/form-data using FormData(). Thus, it is necessary to structure the multipart/form-data and send it as the data payload.
- Currently, your script only uploads the file content without including the file metadata, resulting in the uploaded file lacking a filename. To address this, both the file content and metadata need to be uploaded using multipart/form-data.
Your script contains 2 properties under data.

By incorporating the above points into your script, the following modifications can be made.

Revised Script:

Upload.prototype.doUpload = function () {
    const file = this.file;  // Assuming that "this.file" represents the blob.

    const fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = function() {
      const boundary = "xxxxxxxxxx";
      let data = "--" + boundary + "\n";
      data += "Content-Type: application/json; charset=UTF-8\n\n";
      data += JSON.stringify({name: "test_file"}) + "\n";
      data += "--" + boundary + "\n";
      data += "Content-Transfer-Encoding: base64\n\n";
      data += fr.result.split(",")[1] + "\n";
      data += "--" + boundary + "--";
      $.ajax({
        type: "POST",
        beforeSend: function(request) {
          request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken"));
          request.setRequestHeader("Content-Type", "multipart/related; boundary=" + boundary);
        },
        url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart",
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },
        async: true,
        data: data,
        cache: false,
        processData: false,
        timeout: 60000
      });
    }
}

Important Note:

In this revised script,
- It is assumed that this.file in your original script represents the blob.
- Your access token is required for successful file uploading to Google Drive.
When utilizing uploadType=multipart, be mindful that the maximum file size allowed is 5 MB.

Steps for uploading a file to Google Drive API with a custom name instead of "untitled":

Answer №1

Key Modifications:

Revised Script:

Important Note:

Further Resources:

Similar questions

The function ajax does not recognize response.forEach as a valid function

Changing the context results in the entire component being re-rendered

Integrate an external script with React and initialize a new instance

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

“Unlocking the secret to extracting color from an image in React Native”

Troubleshooting PHP echo response issue with AJAX POST and FormData submission

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

What are the different ways to utilize the Angular Loading Bar for specific waiting scenarios?

Tips for incorporating a Spinner-GIF ahead of complete loading of ng-include

Guide to implementing if statements within a map function in JavaScript/Vue.js

Tips for using jQuery to slowly change a CSS property to "auto"

After refreshing the page in Next JS, there is a delay in loading the Swiper Js styles. The Swiper slides appear stretched while waiting for Next JS to load the styles. Any suggestions

Function in React not being successfully passed down between functional components

a dynamic framework that fills out several forms

Hiding validation messages upon clicking in a textbox in ASP.NET MVC: a tutorial

Incorporating an image as a clickable element instead of a traditional button using HTML and

Is it possible to achieve a smooth transition to the right using CSS

Dynamic Namespaces in Socket.io is a feature that allows for

Is there a way to retrieve random data based on either product id or slug within a single component using useQuery? Currently, all components are displaying the same data

Issue with TypeORM @BeforeInsert causing a field in Entity not to be populated with value