From 9342ace46ec994d8825753201c8e3d3f19ca4e0a Mon Sep 17 00:00:00 2001 From: Jaykumar Prajapati Date: Tue, 30 Jun 2020 15:36:42 +0530 Subject: [PATCH] 1.2.3 ### Fixed - Done event was not emitting to the output event. ### Changed - File upload using xhr request is removed due to done event of upload output was not emitting. --- CHANGELOG.md | 9 ++ package.json | 2 +- projects/ngx-uploader-directive/CHANGELOG.md | 9 ++ projects/ngx-uploader-directive/package.json | 2 +- .../ngx-uploader-directive.service.ts | 139 +++--------------- 5 files changed, 38 insertions(+), 123 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73d1ba2..5c335c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.2.3] - 2020-06-30 + +### Fixed +- Done event was not emitting to the output event. + +### Changed +- File upload using xhr request is removed due to done event of upload output was not emitting. + ## [1.2.2] - 2020-06-30 ### Changed @@ -73,6 +81,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Added File select directive - Uploading files in a single request +[1.2.3]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.2...1.2.3 [1.2.2]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.1...1.2.2 [1.2.1]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.0...1.2.1 [1.2.0]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.1.7...1.2.0 diff --git a/package.json b/package.json index e7a28f9..df2a6cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-uploader-directive", - "version": "1.2.2", + "version": "1.2.3", "description": "Angular 9 File Uploader Directive which provides two directives, which are select and file drag and drop to upload files on server.", "repository": { "type": "git", diff --git a/projects/ngx-uploader-directive/CHANGELOG.md b/projects/ngx-uploader-directive/CHANGELOG.md index 73d1ba2..5c335c7 100644 --- a/projects/ngx-uploader-directive/CHANGELOG.md +++ b/projects/ngx-uploader-directive/CHANGELOG.md @@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.2.3] - 2020-06-30 + +### Fixed +- Done event was not emitting to the output event. + +### Changed +- File upload using xhr request is removed due to done event of upload output was not emitting. + ## [1.2.2] - 2020-06-30 ### Changed @@ -73,6 +81,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Added File select directive - Uploading files in a single request +[1.2.3]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.2...1.2.3 [1.2.2]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.1...1.2.2 [1.2.1]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.2.0...1.2.1 [1.2.0]: https://github.com/jayprajapati857/ngx-uploader-directive/compare/1.1.7...1.2.0 diff --git a/projects/ngx-uploader-directive/package.json b/projects/ngx-uploader-directive/package.json index bdeddb8..593208e 100644 --- a/projects/ngx-uploader-directive/package.json +++ b/projects/ngx-uploader-directive/package.json @@ -1,6 +1,6 @@ { "name": "ngx-uploader-directive", - "version": "1.2.2", + "version": "1.2.3", "description": "Angular 9 File Uploader Directive which provides two directives, which are select and file drag and drop to upload files on server.", "repository": { "type": "git", diff --git a/projects/ngx-uploader-directive/src/lib/services/ngx-uploader-directive.service.ts b/projects/ngx-uploader-directive/src/lib/services/ngx-uploader-directive.service.ts index c38ae15..68ab88d 100644 --- a/projects/ngx-uploader-directive/src/lib/services/ngx-uploader-directive.service.ts +++ b/projects/ngx-uploader-directive/src/lib/services/ngx-uploader-directive.service.ts @@ -326,7 +326,7 @@ export class NgxUploaderDirectiveService { */ startUpload(upload: { files: Array, event: IUploadInput }): Observable { return new Observable(observer => { - const sub = this.uploadFilesXHRRequest(upload.files, upload.event) + const sub = this.uploadFilesHttpRequest(upload.files, upload.event) .pipe(finalize(() => { if (!observer.closed) { observer.complete(); @@ -368,6 +368,11 @@ export class NgxUploaderDirectiveService { } if (fileList.length > 0) { + let totalSize = 0; + files.forEach((file, index) => { + totalSize += file.nativeFile.size; + }); + const formData: FormData = new FormData(); if (event.data !== undefined) { @@ -396,7 +401,7 @@ export class NgxUploaderDirectiveService { reportProgress: true }); - this.httpClient.request(req).subscribe( + const httpRequestSubscription = this.httpClient.request(req).subscribe( // tslint:disable-next-line: no-shadowed-variable (data) => { switch (data.type) { @@ -404,7 +409,6 @@ export class NgxUploaderDirectiveService { const percentage = Math.round((data.loaded * 100) / data.total); const diff = new Date().getTime() - time; speed = Math.round(data.loaded / diff * 1000); - // progressStartTime = (files[0].progress.data && files[0].progress.data.startTime) || new Date().getTime(); eta = Math.ceil((data.total - data.loaded) / speed); // console.log('Progress: ' + this.fileUploadProgress); @@ -421,6 +425,10 @@ export class NgxUploaderDirectiveService { } }; + files.forEach((file, index, filesArray) => { + filesArray[index].progress = fileProgress; + }); + observer.next({ type: 'uploading', requestId: files[0].requestId, files, progress: fileProgress, fileSelectedEventType: files[0].selectedEventType }); break; @@ -438,6 +446,11 @@ export class NgxUploaderDirectiveService { etaHuman: this.secondsToHuman(eta || 0) } }; + + files.forEach((file, index, filesArray) => { + filesArray[index].response = data.body; + }); + observer.next({ type: 'done', requestId: files[0].requestId, response: data.body, progress, fileSelectedEventType: files[0].selectedEventType, files }); observer.complete(); break; @@ -450,6 +463,8 @@ export class NgxUploaderDirectiveService { } ); + this.subscriptions.push({ id: files[0].requestId, sub: httpRequestSubscription }); + } else { this.httpErrorResponse = new HttpErrorResponse({ status: 0, error: 'Files not available for upload', statusText: 'Invalid Input' }); observer.next({ type: 'error', requestId: files[0].requestId, response: this.httpErrorResponse }); @@ -458,124 +473,6 @@ export class NgxUploaderDirectiveService { }); } - uploadFilesXHRRequest(files: Array, event: IUploadInput): Observable { - return new Observable(observer => { - const url = event.url || ''; - const method = event.method || 'POST'; - const data = event.data || {}; - const headers = event.headers || {}; - - const xhr = new XMLHttpRequest(); - const time: number = new Date().getTime(); - let progressStartTime: number = (files[0].progress.data && files[0].progress.data.startTime) || time; - let speed = 0; - let eta: number | null = null; - - xhr.upload.addEventListener('progress', (e: ProgressEvent) => { - if (e.lengthComputable) { - const percentage = Math.round((e.loaded * 100) / e.total); - const diff = new Date().getTime() - time; - speed = Math.round(e.loaded / diff * 1000); - progressStartTime = (files[0].progress.data && files[0].progress.data.startTime) || new Date().getTime(); - eta = Math.ceil((e.total - e.loaded) / speed); - - const fileProgress: IUploadProgress = { - status: 'Uploading', - data: { - percentage, - speed, - speedHuman: `${this.humanizeBytes(speed)}/s`, - startTime: progressStartTime, - endTime: null, - eta, - etaHuman: this.secondsToHuman(eta) - } - }; - - observer.next({ type: 'uploading', requestId: files[0].requestId, files, progress: fileProgress, fileSelectedEventType: files[0].selectedEventType }); - } - }, false); - - xhr.upload.addEventListener('error', (e: Event) => { - observer.error(e); - observer.complete(); - }); - - xhr.onreadystatechange = () => { - if (xhr.readyState === XMLHttpRequest.DONE) { - let totalSize = 0; - files.forEach((file, index) => { - totalSize += file.nativeFile.size; - }); - const speedAverage = Math.round(totalSize / (new Date().getTime() - progressStartTime) * 1000); - const progress: IUploadProgress = { - status: 'Done', - data: { - percentage: 100, - speed: speedAverage, - speedHuman: `${this.humanizeBytes(speedAverage)}/s`, - startTime: progressStartTime, - endTime: new Date().getTime(), - eta, - etaHuman: this.secondsToHuman(eta || 0) - } - }; - - try { - files.forEach((file, index, filesArray) => { - filesArray[index].response = xhr.status; - }); - } catch (e) { - files.forEach((file, index, filesArray) => { - filesArray[index].response = xhr.status; - }); - } - - // file.responseHeaders = this.parseResponseHeaders(xhr.getAllResponseHeaders()); - - observer.next({ type: 'done', requestId: files[0].requestId, response: data.body, progress, fileSelectedEventType: files[0].selectedEventType, files }); - - observer.complete(); - } - }; - - xhr.open(method, url, true); - // xhr.withCredentials = event.withCredentials ? true : false; - - try { - const uploadIndex = this.queue.findIndex(outFile => outFile.requestId === files[0].requestId); - - if (this.queue[uploadIndex].progress.status === 'Cancelled') { - observer.complete(); - } - - Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key])); - - const bodyToSend: FormData = new FormData(); - - Object.keys(data).forEach(key => bodyToSend.append(key, data[key])); - if (files.length > 1) { - for (let fileIndex = 0; fileIndex < files.length; fileIndex++) { - const element = files[fileIndex]; - bodyToSend.append('file_' + (fileIndex + 1), files[fileIndex].nativeFile, files[fileIndex].name); - } - } else { - bodyToSend.append(event.fieldName || 'file', files[0].nativeFile, files[0].name); - } - - this.fileServiceEvents.emit({ type: 'start', requestId: files[0].requestId, files, fileSelectedEventType: files[0].selectedEventType }); - xhr.send(bodyToSend); - - } catch (e) { - observer.complete(); - } - - return () => { - xhr.abort(); - }; - }); - } - /** * Http Request to upload file(s). * @param requestMethod Request method POST | GET