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.
jayprajapati857 · Jun 30, 2020 · 9342ace · 9342ace
1 parent f5d252b
commit 9342ace
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 123 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -326,7 +326,7 @@ export class NgxUploaderDirectiveService {
    */
   startUpload(upload: { files: Array<ISelectedFile>, event: IUploadInput }): Observable<IUploadOutput> {
     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,15 +401,14 @@ 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) {
               case HttpEventType.UploadProgress:
                 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<ISelectedFile>, event: IUploadInput): Observable<IUploadOutput> {
-    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