CODEWITHSUNDEEP
javascripthttpfile-uploadencodinggoogle-drive-api
KHoon
KHoon

Reputation: 15

Cannot recognize image upload at Google Drive in js

i'm trying to upload image file at google drive, using oauth token & fetch url. https://developers.google.com/drive/api/v3/manage-uploads Perform a multipart upload, HTTP. when i try to upload, fetch url response returns status 200, and in google drive, file is in there. But can't see(recognized no support img).

it's my header

method: post 
Authorization: `Bearer ${token}`
Content-Type: `multipart/related; boundary=${boundaryString}`
Content-Length: ${body.Length}

and it's my body

--`${boundaryString}`
Content-Type: application/json; charset=UTF-8

{"name":"myimage.png","description":"Upload image","mimeType":"image/png"}

--`${boundaryString}`
Content-Type: image/png; Content-Transfer-Encoding: base64

data:image/png;base64,iVBO......TkSuQmCC
--`${boundaryString}`--

response :

status: 200 url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"
body: {
  id: "~~~~"
  kind: "drive#file"
  mimeType: "image/png"
  name: "myimage.png"

when i go to drive, it exist. it's details correct(name, description, mimeType), but can't recognize like another images.(file format is not supported.) when i check <img src ="data:image/png;base64,iVBO......TkSuQmC" /> it works. could tell me what's the problem?

Upvotes: 1

Views: 216

Answers (1)

Tanaike
Tanaike

Reputation: 201553

How about this modification?

Modification points:

  • Please remove Content-Type: image/png; from the data part.
  • Please remove the header of base64 data.

When above points are reflected to your request body, it becomes as follows.

Modified request body:

--`${boundaryString}`
Content-Type: application/json; charset=UTF-8

{"name":"myimage.png","description":"Upload image","mimeType":"image/png"}

--`${boundaryString}`
Content-Transfer-Encoding: base64

iVBO......TkSuQmCC
--`${boundaryString}`--

Note:

  • In this case, the line breaks are important. Please be careful this.

  • In this modification, it supposes that your access token can be used for uploading the file to Google Drive.

  • Although I'm not sure about your actual script, if you use Javascript, how about the following modified script?

        var data = `--${boundaryString}
  Content-Type: application/json; charset=UTF-8

  {"name":"myimage.png","description":"Upload image","mimeType":"image/png"}

  --${boundaryString}
  Content-Transfer-Encoding: base64

  iVBO......TkSuQmCC
  --${boundaryString}--`;

Upvotes: 2

Related Questions