upload file through signed url to google cloud storage with ajax

0
votes

I try to upload files to my Google Cloud Storage using signed urls.

  • I have set the CORS parameters on my bucket using gsutil
  • the browser sends an ajax request to the Django backend to get a signed url
  • the Django backend make a request to GCS in order to create a signed url
  • the signed url is sent back to the browser.
  • I try to upload a video file (Content Type="video/mp4") to GCS using this signed url in an ajax
  • The request to GCS return status code 200
  • last but not least, an empty file is created in my bucket...

how to prevent of uploading an empty file ?
I do not see nor in the GCS documentation, nor on stackoverflow what is wrong 

function ajaxSendToStorage(url, file, row){
  $.ajax({
    method: 'PUT',
    dataType: "xml",
    contentType: file.type,
    crossDomain: true,
    data: file,
    url: url,
    beforeSend: function (request){
        request.setRequestHeader("Content-Type", 'multipart/formdata; charset=UTF-8');
    },
    success: function(data) {
        storageLoadComplete(row)
    },
    complete: function() {
        // do something when complete
    },
  });
}

...and here is what I get in console logs:

General

Request URL: https://test-dev-flowker.storage.googleapis.com/media/uploads/FR/flowker_e6938cf0/2020/3/full_9140a387-0595-4ea7-9fdd-f5d525e57515.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=dev-storage%40brilliant-tower-264412.iam.gserviceaccount.com%2F20200317%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200317T105745Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&x-goog-signature=076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272876760c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eee3212
Request Method: PUT
Status Code: 200
Remote Address: [2a00:1450:4007:80c::2010]:443
Referrer Policy: no-referrer-when-downgrade

Response Headers

access-control-allow-origin: *
access-control-expose-headers: *, Content-Length, Content-Type, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace
alt-svc: quic=":443"; ma=2592000; v="46,43",h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000
content-length: 0
content-type: text/html; charset=UTF-8
date: Tue, 17 Mar 2020 10:57:46 GMT
etag: "d41d8cd98f00b204e9800998ecf8427e"
server: UploadServer
status: 200
x-goog-generation: 1584442666113578
x-goog-hash: crc32c=AAAAAA==
x-goog-hash: md5=1B2M2Y8AsgTpgAmY7PhCfg==
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 0
x-guploader-uploadid: AEnB2UpD_E6yxot73qDMfKu6kM34PPiK7kEM4VytfmZfY6q70dJxBzWs_3y8Lkimwg_ztFTK0Vuoz-V0G_wZlKqah1cax9kJrQ

Request Headers

:authority: test-dev-flowker.storage.googleapis.com
:method: PUT
:path: /media/uploads/FR/flowker_e6938cf0/2020/3/full_9140a387-0595-4ea7-9fdd-f5d525e57515.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=dev-storage%40brilliant-tower-264412.iam.gserviceaccount.com%2F20200317%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200317T105745Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&x-goog-signature=076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437
:scheme: https
accept: application/xml, text/xml, /; q=0.01
accept-encoding: gzip, deflate, br
accept-language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
content-length: 0
origin: http://localhost:8000
referer: http://localhost:8000/fr/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36
x-client-data: CKW1yQEIkLbJAQiktskBCKmdygEIt6rKAQjLrsoBCNCvygEIvLDKAQiXtcoBCJu1ygEI7bXKAQiOusoBCOu7ygEIr73KAQ==

Query String Parameters

X-Goog-Algorithm: GOOG4-RSA-SHA256
X-Goog-Credential: [email protected]/20200317/auto/storage/goog4_request
X-Goog-Date: 20200317T105745Z
X-Goog-Expires: 1800
X-Goog-SignedHeaders: host
x-goog-signature: 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437

1
jqueryajaxgoogle-cloud-platformgoogle-cloud-storage

1 Answers

4
votes

ok. I solved it. I didn't bind the file correctly and I was sending a null object. It's now working, but I had to add a line as I get an 'illegal invocation error'.
I had to add processData: false, and it's now working perfectly.

here is the code; if it could helps...

function ajaxSendToStorage(url, uuid, row){
var file = getFileById(uuid);
$.ajax({
    method: "PUT",
    contentType: file.type,
    processData: false,
    dataType: "xml",
    crossDomain: true,
    data: file,
    url: url,
    beforeSend: function (request){
        request.setRequestHeader("Content-Type", 'multipart/formdata; charset=UTF-8');
    },
    success: function(data) {
        storageLoadComplete(row)
    },
    complete: function() {
        var a = 1;
    },

});

}