CODEWITHSUNDEEP
javascriptazureazure-storage
jitendragarg
jitendragarg

Reputation: 957

Blob upload to Azure fails with "Invalid HTML File Object" error

I am using Azure JS library to upload blobs. Below is the code that I wrote. 

        var speedSummary = blobService.createBlockBlobFromBrowserFile(container, fileList[i]["FileID"], selectedFiles[i], options, function (error, result, response) {
        finishedOrError = true;
        if (error) {
            //Handle errors in upload
            console.log(error);
            alert("upload failed for " + selectedFiles[i].name);
        } else {
            //Handle success
            //Trigger postback to save the file list to database.
            uploadedFiles++;
            triggerPostBack(uploadedFiles);
        }
    });

This code was working fine till last week because I tested it. Now, it fails every time with the error "Invalid HTML File Object".

I tried to debug through the azure js library and found the place where the error is occurring. 

if (!azureutil.isBrowser() ||
!browserFile ||
!browserFile.constructor ||
(!azureutil.isIE() && !browserFile.constructor.name) ||
(!azureutil.isIE() && browserFile.constructor.name !== 'File' && browserFile.constructor.name !== 'Blob') ||
!azureutil.objectIsInt(browserFile.size)) {
return fail(new ArgumentError('type', 'Invalid HTML File object.'));
} else {
callback();
return true;
}

For some reason, this condition is failing all the time. I tried disabling this condition, and then in later part of the azure js library, I received another error saying "slice is not a function" during the chunking process.

I have no idea why this code is suddenly failing, given that it was working fine till the weekend. I checked the file lists, and they seem to be proper file objects with all relevant properties.

Upvotes: 1

Views: 488

Answers (2)

Vikas
Vikas

Reputation: 183

For anyone who lands here with the same error. In my angular app, I binded a property(uploadedFile) to the input of type="file". But, the property is holding a list of files instead of one file.

In such case, make sure you only pass one file:

var result = blobService.createPageBlobFromBrowserFile('container', uploadedFile[0].name, uploadedFile[0], options, error => this.callback(error));

Upvotes: 1

jitendragarg
jitendragarg

Reputation: 957

Apparently, it had nothing to do with the azure js library. Actual file object was part of the new json object which contained other properties like full path of the file. Changed the below line to get the actual HTML file object. 

var speedSummary = blobService.createBlockBlobFromBrowserFile(container, fileList[i]["FileID"], selectedFiles[i].fileObject, options, function (error, result, response)

Upvotes: 2

Related Questions