upload file to google cloud storage with signed url using ajax
I try to upload a file to my Google Cloud Storage using signed url.
- I have set CORS parameters on my bucket using gsutil
- Browser sends ajax request to Django backend to get signed url
- Django backend makes request to GCS to create 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 ajax
- Requests to GCS return status code 200
- Last but not least, an empty file was created in my bucket...
How to prevent uploading empty files?
I don't see anything in the GCS documentation nor on stackoverflow
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
},
});
}
...this is what I get in the console log:
generally
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-GOOG-Algorithm= SHA256&X-Goog-Credential=dev-storage%40brilliant-tower-264412.iam.gserviceaccount.com%2F20200317%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date = 20200317T100317T100317T100317T100317T100317T100574Z10572017 的 x goog 签名 = 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272876760c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eee3212
Request Method: PUT
Status Code: 200
Remote Address: [2a00:1450:4007:80c::2010]:443
Referrer Policy: no-referrer-when-downgrade
response header
access-control-allow-origin: *
access-control-expose-headers: *, Content-Length, Content-Type, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace
alt-svc: fast=":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 : Tuesday, March 17, 2020 10:57:46 GMT
etag: "d41d8cd98f00b204e9800998ecf8427e"
Server: UploadServer
Status: 200
x-goog-generation:
The x goog Hash: the MD5 = 1B2M2Y8AsgTpgAmY7PhCfg ==
X-GOOG-metageneration-: . 1 :
x goog encoded contents stored in the identity
of the contents stored length x goog: 0
a-guploader for upload identifiers X: AEnB2UpD_E6yxot73qDMfKu6kM34PPiK7kEM4VytfmZfY6q70dJxBzWs_3y8Lkimwg_ztFTK0Vuoz-V0G_wZlKqah1cax9kJrQ
request header
: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-s20brilliant140000000 .iam.gserviceaccount.com%2F20200317%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200317T105745Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&的x goog签名= 076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437
:scheme:https
accepts: application/xml, text/xml, / ; q=0.01
accepts encodings: gzip, deflate, br
accepts languages: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Content-Length: 0
Source: http://localhost:8000
referer: http://localhost:8000/fr/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user- Agent: the Mozilla / 5.0 (the Linux; the Android 6.0; the Nexus. 5 the Build / MRA58N) AppleWebKit / 537.36 (KHTML, like the Gecko) the Chrome / 80.0.3987.132 Mobile Safari / 537.36
X-Client-Data: CKW1yQEIkLbJAQiktskBCKmdygEIt6rKAQjLrsoBCNCvygEIvLDKAQiXtcoBCJu1ygEI7bXKAQiOusoBCOu7ygEI r73KAQ ==
query string parameters
X-goog-algorithm: GOOG4-RSA-SHA256
X-goog-credentials: [email protected]/20200317/auto/storage/goog4_request X-goog
-date: 20200317T105745Z
X-goog -Expires : 1800
X-Goog-SignedHeaders: Host
x-goog-signature:076e32c738ea28ea3c1a3900d3f0b10e096120649a62911a5b165668045793006bef4b87c372306393db7adb5b35f6bb07e092e87a8ccf6fb7edfc98a74f7cc0558c520ba74b5dc3c1563426edc6f63a5db43c0a78298747fd5b6fbe7650e79ddf75b0cb05b3fb2690f34a5d1fc0e2bdaafa9b2ec6d4c452a23676e45acc0a9205a3fc79dceaf7958590353ac503c597574e53b514b4e44deb8e226f07a3272e0d9f60c55edefccb4ef5f0e45555b8f679260bcf1a15421035a1367001b5ace1a28b4d977ce08b29b51a796cc0faca4b4b84296a44876f3a0e7fa1c01667ad40363df2920967a69bc98c388c2713f1fecfcb4cf43d1f9ca36909ac8983eea437
Row. I solved it. I'm not binding the file correctly, I'm sending an empty object. It works now, but when I got the " Illegal call error " I had to add a line .
I had to add processData: false,it works perfectly now.
Here is the code; if it 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;
},
});
}