CODEWITHSUNDEEP
javascriptazurecorsmediaazure-media-services
Anri
Anri

Reputation: 1693

azure file upload from client side

reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) { // DONE == 2

            submitUri = "https://mediasvclb3ql3sjdqfh8.blob.core.windows.net/asset-4205a03a-0d00-80c4-6d1d-f1e5bd379a7f/sample.mp4?sv=2012-02-12&sr=c&si=180e3bdd-0856-4001-85b5-9aa455505ca3&sig=y0PFiMampL7sscrdcxcm4itTHNNeXhVc0JJGxFNiVuc%3D&st=2016-01-17T18%3A05%3A20Z&se=2115-12-24T18%3A05%3A20Z";
            // var uri = submitUri;
            var uri = submitUri; //+ '&comp=block&blockid=' + blockIds[blockIds.length - 1];
            var requestData = new Uint8Array(evt.target.result);

            $.ajax({
                url: uri,
                type: "PUT",
                data: requestData,
                processData: false,
                beforeSend: function(xhr) {

                    xhr.setRequestHeader('content-type',    'application/octet-stream');
                    xhr.setRequestHeader('x-ms-version',    '2014-02-14');
                    xhr.setRequestHeader('x-ms-blob-type',  'BlockBlob');


                    // xhr.setRequestHeader('Content-Length', requestData.length);
                },
                success: function (data, status) {
                    console.log(data);
                    console.log(status);
                    bytesUploaded += requestData.length;
                    var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
                    $("#fileUploadProgress").text(percentComplete + " %");
                    uploadFileInBlocks();
                },
                error: function(xhr, desc, err) {
                    console.log(desc);
                    console.log(err);
                }
            });
        }
    };

enter image description here

enter image description here

I made this from the sample here

I also enable CORS for this account enter image description here

You can run the code http://megamedia.cloudapp.net/uploader.html

what I am doing wrong ? Why my file is not uploading ?

Upvotes: 1

Views: 303

Answers (1)

forester123
forester123

Reputation: 1579

I have reproduced the issue from my side. It turns out that you didn't specified sufficient permissions to your SAS token. For upload operation, you need to specify "sp=rw" permission in you SAS token. Please check this article for details:https://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-shared-access-signature-part-1/

Below is my test just for your reference:

Scenario 1: Generate SAS token without write permission.

https://.blob.core.windows.net/test1/sample.mp4?sv=2014-02-14&sr=c&sig=XnmDhSnec43Mm06tXtRoqJu8r3CPFXYbzE5%2FJW9c27Q%3D&st=2016-01-18T16%3A00%3A00Z&se=2016-01-26T16%3A00%3A00Z&sp=r

I get the same 404 result as yours: enter image description here

Scenario 2: Generate SAS token with write permission.

https://.blob.core.windows.net/test1/sample.mp4?sv=2014-02-14&sr=c&sig=vOYJfGN%2F0TJrgoIoiYqLWm%2FF7A4dkhrDyUChQlVbUN0%3D&st=2016-01-18T16%3A00%3A00Z&se=2016-01-26T16%3A00%3A00Z&sp=rw

enter image description here

Please note the param "sp" specified in the SAS token, sp=r means you have only read permission to this token, sp=rw mean read&write permission. Hope this help you.

Edit:
Just share the tool Azure Storage Explorer 6 which can easily generate an SAS token.

Upvotes: 2

Related Questions