upload video to blob storage not working in Internet Explorer

Question

i want to upload video to azure blob storage using Angular-4 and it working in all browser except IE i get error

SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

i am using put blob method for uploading video here is a code for it. I have searched for this error found many solutions but didn't work here some link that i have tried but didn't work

Prevent IE11 caching GET call in Angular 2

Angular IE Caching issue for $http

  upload(config: UploadConfig) {
    debugger;
    var options = new RequestOptions();
    if (options == null) {
        options = new RequestOptions();
    }

    const state = this.initializeState(config);
    const reader = new FileReader();
    reader.onloadend = (evt: any) => {
        if (evt.target.readyState === 2 && !state.cancelled) {
            debugger;
            const uri = state.fileUrl + '&comp=block&blockid=' + state.blockIds[state.blockIds.length - 1];
            const requestData = evt.target.result;
            options.headers = new Headers();
            const requestData2 = new Uint8Array(evt.target.result);
            options.headers.append('x-ms-blob-type', 'BlockBlob');
            options.headers.append('Content-Type', 'application/octet-stream');

            this.http.put(uri, requestData, options).retryWhen(error => {
                return error
                    .flatMap((error: any) => {
                        if (error.status === 503) {
                            return Observable.of(error.status).delay(1000)
                        }
                        return Observable.throw({ error: 'No retry' });
                    })
                    .take(5)
                    .concat(Observable.throw({ error: 'Sorry, there was an error (after 5 retries)' }));
            })
                .subscribe(elem => {
                    state.bytesUploaded += requestData2.length;
                    const percentComplete = ((state.bytesUploaded / state.file.size) * 100).toFixed(2);
                    if (state.progress) {
                        state.progress();
                    }

                    this.uploadFileInBlocks(reader, state);
                }, err => {
                    this.messageService.showClientSideErrors('Oops something went wrong while uploading, please try again.')

                    this.loaderService.displayBar(false);
                });
        }
    };

    this.uploadFileInBlocks(reader, state);

    return {
        cancel: () => {
            state.cancelled = true;
        }
    };
}

i have debugged this code and found that below line of code

 this.http.put(uri, requestData, options).retryWhen(error => {
                return error
                    .flatMap((error: any) => {
                        if (error.status === 503) {
                            return Observable.of(error.status).delay(1000)
                        }
                        return Observable.throw({ error: 'No retry' });
                    })
                    .take(5)
                    .concat(Observable.throw({ error: 'Sorry, there was an error (after 5 retries)' }));
            })

i get status=0 and in another browser it's working fine. what's the problem? Version IE-11 Win-10

Answer 1

Seems you are trying to build HTTP requests by yourself. Why not consider Azure Storage JavaScript SDK?

https://www.npmjs.com/package/@azure/storage-blob

const browserFile = document.getElementById("fileinput").files[0];
await uploadBrowserDataToBlockBlob(Aborter.none, browserFile, blockBlobURL, {
    blockSize: 4 * 1024 * 1024, // 4MB block size
    parallelism: 20, // 20 concurrency
    progress: ev => console.log(ev)
});