CODEWITHSUNDEEP
reactjsdjangogoogle-cloud-storagepre-signed-url
london_utku
london_utku

Reputation: 1312

Django - React - Google Cloud Storage SigedURL upload is not working

I have used signedURL with jquery/ajax and Django for uploading to Google Cloud Storage previously successfully.

However with the Django - React setup I have not been able to establish a successful. upload yet.

export const UploadVideo = async (form_data, file, signedurl, asset_uuid) => {
    let resultState = { state: '', data: {} };

    let config = {
        method: 'POST',
        url: signedurl,
        headers: {
            'Content-Type': 'video/mp4',
            "Access-Control-Allow-Origin": "*",
            'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
        },
        data: form_data
    };

    await axios(config).then(function (response) {
        console.log(JSON.stringify(response.data));
        resultState.state = 'success';
    }).catch(function (error) {
        resultState.state = 'error';
        resultState.data.message = error.message;
        window.toastr.error(error.message);

        console.log(error)
    })

    return resultState;
}

export const CreateAssets = async (data, key) => {
    let resultState = { state: '', data: {} };

    await axios.get(`https://origin/asset/create/?category=1&title=%22` + data[key].title + `%22&size=1`)
        .then(res => {
            resultState.state = 'success';
            resultState.data = res.data;
        }).catch((err) => {
            resultState.state = 'error';
            resultState.data['message'] = err.message;
        })
    return resultState;
}

The code for react js get singed url and calling signedurl with the file dialog is available.

What shall I do for a succesful signedurl file upload to Google Cloud Storage ?

The CORS settings for the storage bucket is as follows :

# cat google-storage-cors.json                                       
[
    {
      "origin": ["https://www.videoo.io", "https://videoo.io", "http://localhost:8000", "localhost:3000", "http://localhost:3000", "https://storage.googleapis.com", "*"],
      "responseHeader": ["Content-Type","x-goog-resumable", "*"],
      "method": ["GET", "HEAD", "DELETE", "PUT", "POST", "OPTIONS"],
      "maxAgeSeconds": 3600
    }
]%

# gsutil cors set  google-storage-cors.json gs://production-my-storage

enter image description here

When I use the following curl command as suggested by @JohnHanley, the following is the output that I get :

% curl -X PUT --upload-file /Users/utku/Desktop/cat.mp4 "https://storage.googleapis.com/production-videoo-storage/b47a4ffd40be41f08c255b3f308d36e1?Expires=1654980179&GoogleAccessId=videoo-348016%40appspot.gserviceaccount.com&Signature=QDnQh%2FI3%2BHJiPj5htwdPn7JqWZH%2FNaogM0ZlzJCl4BZVks6T5Qa1GMCCvmjJZINM01lpB9S%2FZMqamyNHisFz%2FB2EDxstJMHtAbpdw7E%2BYSXmGYP2lLpsCqXAhXsncbyKJFwkcD%2BkX3yZGHGsbLqnJtQ3lghhJxjrprPdhj1zGg%2FwrnKEa5g2YdxI2LW6KAQFtV8zICitWn%2BhdGxzJK1LnTekcv1%2F7zILlN9RbPwdEGBJWd2F3VIGCtyrZSuNqOW66ptQ2TT7uMbM5guDPPq86eom3eHMEVlY4E%2BLeYf4RMBwJQ50QhH0%2BA4Vevd2%2Bfza92acgJUJRhOQ5Gr5rZ6TnA%3D%3D"


<?xml version='1.0' encoding='UTF-8'?><Error><Code>SignatureDoesNotMatch</Code><Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message><StringToSign>PUT


1654980179
/production-videoo-storage/b47a4ffd40be41f08c255b3f308d36e1</StringToSign></Error>

Upvotes: 1

Views: 644

Answers (1)

london_utku
london_utku

Reputation: 1312

So the signed url should be created with this function :

def get_signed_url_for_upload(path):
    blob = settings.STORAGE.bucket.blob(path)
    expiration_time = timezone.now() + timedelta(minutes=120)
    signed_url = blob.generate_signed_url(
        version="v4",
        # This URL is valid for 15 minutes
        expiration=timedelta(minutes=15),
        # Allow PUT requests using this URL.
        method="PUT",
        content_type="application/octet-stream",)
    return signed_url

Upvotes: 2

Related Questions