ng2-file-upload single request clearQueue() not working #1131

New Issue

2019-11-28T11:14:37Z

sridharan31 commented

2019-11-28 11:14:37 +00:00

(Migrated from github.com)

The uploader multiple files in one request so customized file uploads after getting a response using clearQueue() not working get single file only removed

core.js:3926 ERROR TypeError: Cannot read property 'abort' of undefined at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.cancelItem (file-uploader.class.js:112) at FileItem.push../node_modules/ng2-file-upload/file-upload/file-item.class.js.FileItem.cancel (file-item.class.js:38) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.removeFromQueue (file-uploader.class.js:85) at FileItem.push../node_modules/ng2-file-upload/file-upload/file-item.class.js.FileItem.remove (file-item.class.js:41) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.clearQueue (file-uploader.class.js:92) at FileUploaderCustom.uploaderOnward.onSuccessItem (mandate-initial.component.ts:267) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader._onSuccessItem (file-uploader.class.js:396) at XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (fileUploader.ts:71) at XMLHttpRequest.wrapFn (zone.js:1255) at ZoneDelegate.invokeTask (zone.js:431)

export class FileUploaderCustom extends FileUploader {

    constructor(
        options: FileUploaderOptions
    ) {
        super(options);
    }

    uploadAllFiles(): void {
        // const _this = this;
        const xhr = new XMLHttpRequest();
        const sendable = new FormData();
        const fakeItem: FileItem = null;
        this.onBuildItemForm(fakeItem, sendable);

        for (const item of this.queue) {
            item.headers = [];
            item.withCredentials = true;
            item.formData = [];
            item.isReady = true;
            item.isUploading = true;
            item.isUploaded = false;
            item.isSuccess = false;
            item.isCancel = false;
            item.isError = false;
            item.progress = 0;
            item.index = void 0;
            if (typeof item._file.size !== 'number') {
                throw new TypeError('The file specified is no longer valid');
            }
            sendable.append('file', item._file, item.file.name);
        }

        if (this.options.additionalParameter !== undefined) {
            Object.keys(this.options.additionalParameter).forEach((key) => {
                sendable.append(key, this.options.additionalParameter[key]);
            })
        }

        xhr.onerror = () => {
            this.onErrorItem(fakeItem, null, xhr.status, null);
        }

        xhr.onabort = () => {
            this.onErrorItem(fakeItem, null, xhr.status, null);
        }

        xhr.open('POST', this.options.url, true);
        xhr.withCredentials = true;
        if (this.options.headers) {
            for (let _i = 0, _a = this.options.headers; _i < _a.length; _i++) {
                const header = _a[_i];
                xhr.setRequestHeader(header.name, header.value);
            }
        }
        if (this.authToken) {
            xhr.setRequestHeader(this.authTokenHeader, this.authToken);
        }

        xhr.onload = () => {
            const headers = this._parseHeaders(xhr.getAllResponseHeaders());
            const response = this._transformResponse(xhr.response, headers);
            const gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
            const method = '_on' + gist + 'Item';
            for (const item of this.queue) {
                this[method](item, response, xhr.status, headers);
            }
            this._onCompleteItem(this.queue[0], response, xhr.status, headers);
        }

        xhr.send(sendable);
    }
}
responses

this.uploaderUpdate.onSuccessItem = (item, response, status, headers) => {
      this.uploadResult = JSON.parse(response);
      console.log(this.uploadResult)
      if (this.uploadResult.rescode == "0000") {
        this.uploaderUpdate.clearQueue();
        this.editMyContainer = !this.editMyContainer;
        this.toastyService.success(this.uploadResult.Description);
      } else if (this.uploadResult.rescode == "0001") {
        this.toastyService.error(this.uploadResult.ErrorDescription);

      } else if (this.uploadResult.rescode == "0002") {
        this.toastyService.error(this.uploadResult.ErrorDescription);
      }
    };

The uploader multiple files in one request so customized file uploads after getting a response using clearQueue() not working get single file only removed > core.js:3926 ERROR TypeError: Cannot read property 'abort' of undefined at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.cancelItem (file-uploader.class.js:112) at FileItem.push../node_modules/ng2-file-upload/file-upload/file-item.class.js.FileItem.cancel (file-item.class.js:38) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.removeFromQueue (file-uploader.class.js:85) at FileItem.push../node_modules/ng2-file-upload/file-upload/file-item.class.js.FileItem.remove (file-item.class.js:41) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.clearQueue (file-uploader.class.js:92) at FileUploaderCustom.uploaderOnward.onSuccessItem (mandate-initial.component.ts:267) at FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader._onSuccessItem (file-uploader.class.js:396) at XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (fileUploader.ts:71) at XMLHttpRequest.wrapFn (zone.js:1255) at ZoneDelegate.invokeTask (zone.js:431) ``` export class FileUploaderCustom extends FileUploader { constructor( options: FileUploaderOptions ) { super(options); } uploadAllFiles(): void { // const _this = this; const xhr = new XMLHttpRequest(); const sendable = new FormData(); const fakeItem: FileItem = null; this.onBuildItemForm(fakeItem, sendable); for (const item of this.queue) { item.headers = []; item.withCredentials = true; item.formData = []; item.isReady = true; item.isUploading = true; item.isUploaded = false; item.isSuccess = false; item.isCancel = false; item.isError = false; item.progress = 0; item.index = void 0; if (typeof item._file.size !== 'number') { throw new TypeError('The file specified is no longer valid'); } sendable.append('file', item._file, item.file.name); } if (this.options.additionalParameter !== undefined) { Object.keys(this.options.additionalParameter).forEach((key) => { sendable.append(key, this.options.additionalParameter[key]); }) } xhr.onerror = () => { this.onErrorItem(fakeItem, null, xhr.status, null); } xhr.onabort = () => { this.onErrorItem(fakeItem, null, xhr.status, null); } xhr.open('POST', this.options.url, true); xhr.withCredentials = true; if (this.options.headers) { for (let _i = 0, _a = this.options.headers; _i < _a.length; _i++) { const header = _a[_i]; xhr.setRequestHeader(header.name, header.value); } } if (this.authToken) { xhr.setRequestHeader(this.authTokenHeader, this.authToken); } xhr.onload = () => { const headers = this._parseHeaders(xhr.getAllResponseHeaders()); const response = this._transformResponse(xhr.response, headers); const gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error'; const method = '_on' + gist + 'Item'; for (const item of this.queue) { this[method](item, response, xhr.status, headers); } this._onCompleteItem(this.queue[0], response, xhr.status, headers); } xhr.send(sendable); } } responses this.uploaderUpdate.onSuccessItem = (item, response, status, headers) => { this.uploadResult = JSON.parse(response); console.log(this.uploadResult) if (this.uploadResult.rescode == "0000") { this.uploaderUpdate.clearQueue(); this.editMyContainer = !this.editMyContainer; this.toastyService.success(this.uploadResult.Description); } else if (this.uploadResult.rescode == "0001") { this.toastyService.error(this.uploadResult.ErrorDescription); } else if (this.uploadResult.rescode == "0002") { this.toastyService.error(this.uploadResult.ErrorDescription); } }; ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1131