1.1.2

Fixed issue of emitting events from both directive
jayprajapati857 · May 3, 2020 · f1c63d5 · f1c63d5
1 parent 2390355
commit f1c63d5
Show file tree

Hide file tree

Showing 14 changed files with 548 additions and 217 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,13 +4,19 @@ 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.1.2] - 2020-05-03
+
+### Fixed
+- fixed multiple events response
+- Fixed on upload first event was error
+
 ## [1.1.0] - 2020-04-29
 
 ### Added
 
 - Facility to send headers with request
 
-### Changed
+### Fixed
 - Fixed on removing file it will send file and the id of deleted file
 - Fixed on cancel uploading file it will send file and the id of cencelled file.
 

diff --git a/README.md b/README.md
@@ -13,13 +13,13 @@ npm install ngx-uploader-directive --save
 
 ## Usage
 
-1. Import `NgFileUploaderModule` into your AppModule or in module where you will use it.
+1. Import `NgxUploaderDirectiveModule` into your AppModule or in module where you will use it.
 
 ```ts
 // app.module.ts
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { NgFileUploaderModule } from 'ngx-uploader-directive';
+import { NgxUploaderDirectiveModule } from 'ngx-uploader-directive';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -31,27 +31,27 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgFileUploaderModule
+    NgxUploaderDirectiveModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
 ```
 
-**or** Import `NgFileUploaderModule` into your SharedModule. This could be usefull if your project has nested Modules.
+**or** Import `NgxUploaderDirectiveModule` into your SharedModule. This could be usefull if your project has nested Modules.
 
 ```ts
 // shared.module.ts
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { NgFileUploaderModule } from 'ngx-uploader-directive';
+import { NgxUploaderDirectiveModule } from 'ngx-uploader-directive';
 
 @NgModule({  
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgFileUploaderModule
+    NgxUploaderDirectiveModule
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -62,7 +62,6 @@ export class SharedModule { }
 2. Data structures of Input events and upload output events of files.
 
 ```ts
-
 /**
  * File Upload Options.
  */
@@ -79,10 +78,11 @@ export interface IUploadOptions {
  * Selected File Object.
  */
 export interface ISelectedFile {
-    id: string; // Unique id of selected file. generated by library.
+    requestId: string; // File request id generated by library.
     fileIndex: number; // file index of selected files.
     name: string; // Name of file.
     type: string; // Type of file.
+    selectedEventType: 'DROP' | 'SELECT'; // Type of selection of file.
     progress?: IUploadProgress; // File upload Progress.
     nativeFile?: File; // Native File.
     formData?: FormData; // Form data to upload with file.
@@ -110,27 +110,50 @@ export interface IUploadProgress {
  */
 export interface IUploadInput {
     type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll'; // Input event type.
+    /**
+     * Input unique reference number to evalueate unique events.
+     * Generate using Math.random().
+     */
+    inputReferenceNumber?: number; // Generate number using Math.random() and set it here.
     url?: string; // Input url.
     method?: string; // Input method.
     id?: string; // Input id of file to upload.
     fieldName?: string; // Input field name.
     fileIndex?: number; // Input file index to upload.
-    file?: ISelectedFile; // Input selected file.
+    file?: ISelectedFile; // Input array selected file.
     formData?: FormData; // Input form data to pass with file.
     headers?: { [key: string]: string }; // Input headers to pass with upload request.
-    withHeaders?: boolean; // Input upload with credentials.
 }
 
 /**
  * File Upload Output Events that emitted by ngx-uploader-directive.
  */
 export interface IUploadOutput {
-    type: 'init' | 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll' | 'rejected' | 'error'; // Output events.
-    file?: ISelectedFile; // selected file.
+    type: 'init' | 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver'
+    | 'dragOut' | 'drop' | 'removed' | 'removedAll' | 'rejected' | 'error'; // Output events.
+    id?: string; // id of selected file.
+    files?: Array<ISelectedFile>; // array selected file.
+    fileSelectedEventType?: 'DROP' | 'SELECT' | 'ALL'; // Type of selection of file.
     progress?: IUploadProgress; // Progress
     response?: any; // File upload api response.
 }
+```
+
+## Request headers
+
+If you want to pass any request header with file upload, you can set header in upload input event as follows:
 
+- Here I have set Authorization header to pass with request.
+
+```ts
+const event: IUploadInput = {
+    type: 'uploadAll',
+    inputReferenceNumber: Math.random(),
+    url: this.uploadUrl,
+    method: 'POST',
+    formData: this.formData,
+    headers: { Authorization: 'bearer ' + 'aetklsndfl' }
+};
 ```
 
 ## Example
@@ -157,8 +180,7 @@ export class AppComponent {
   files: Array<ISelectedFile>;
   uploadInput: EventEmitter<IUploadInput>;
   dragOver: boolean;
-  uploadUrl = 'http://192.168.0.224:8099/api/blocklists/uploadblockednumberfile';
-
+  uploadUrl = 'upload url';
 
   /**
    * Default Constructor
@@ -170,84 +192,130 @@ export class AppComponent {
     this.formData = new FormData();
   }
 
+  /**
+   * Upload output events.
+   * @param output IUploadOutput Model on output.
+   */
   onUploadOutput(output: IUploadOutput): void {
-    console.log(output);
-    switch (output.type) {
-      case 'init':
-        this.files = new Array<ISelectedFile>();
-        break;
-      case 'allAddedToQueue':
-        // uncomment this if you want to auto upload files when added
-        // startUpload();
-        break;
-      case 'addedToQueue':
-        if (typeof output.file !== 'undefined') {
-          this.files.push(output.file);
-          console.log(this.files);
-        }
-        break;
-      case 'uploading':
-        if (typeof output.file !== 'undefined') {
-          // update current data in files array for uploading file
-          const index = this.files.findIndex((file) => typeof output.file !== 'undefined' && file.id === output.file.id);
-          this.files[index] = output.file;
-        }
-        break;
-      case 'removed':
-        // remove file from array when removed
-        this.files = this.files.filter((file: ISelectedFile) => file !== output.file);
-        break;
-      case 'dragOver':
-        this.dragOver = true;
-        break;
-      case 'dragOut':
-      case 'drop':
-        this.dragOver = false;
-        break;
-      case 'done':
-        // The file is downloaded
-        break;
+      console.log(output);
+      switch(output.type) {
+        case 'init':
+      this.files = new Array<ISelectedFile>();
+      break;
+        case 'allAddedToQueue':
+      // uncomment this if you want to auto upload files when added
+      // this.startUpload();
+      break;
+        case 'addedToQueue':
+      this.files = this.files.concat(output.files);
+      console.log(this.files);
+      break;
+        case 'start':
+      // uploading start  
+      break;
+        case 'uploading':
+      this.files = this.updateFiles(this.files, output.files, 'UPDATE');
+      console.log(this.files);
+      break;
+        case 'removed':
+      this.files = this.updateFiles(this.files, output.files, 'REMOVE');
+      console.log(this.files);
+      break;
+        case 'dragOver':
+      this.dragOver = true;
+      break;
+        case 'dragOut':
+        case 'drop':
+      this.dragOver = false;
+      break;
+        case 'done':
+      // The files are uploaded
+      this.files = this.updateFiles(this.files, output.files, 'UPDATE');
+      console.log(this.files);
+      break;
+  }
     }
+
+  /**
+   * Update files on output events
+   * @param currentFiles Current Files Array
+   * @param updatedFiles Updated Files Array
+   * @param action Remove or Update
+   */
+  updateFiles(currentFiles: Array<ISelectedFile>, updatedFiles: Array<ISelectedFile>, action: 'REMOVE' | 'UPDATE') {
+    if (updatedFiles !== undefined) {
+      if (action === 'UPDATE') {
+        updatedFiles.forEach(updateFile => {
+          currentFiles.forEach(
+            (currentFile, currentFileIndex, currentFilesArray) => {
+              if (currentFile.name === updateFile.name) {
+                currentFilesArray[currentFileIndex] = updateFile;
+              }
+            }
+          );
+        });
+      } else if (action === 'REMOVE') {
+        currentFiles = currentFiles.filter((file) => file.requestId !== updatedFiles[0].requestId);
+      }
+    }
+    return currentFiles;
   }
 
+  /**
+   * Start Upload
+   */
   startUpload(): void {
-    this.formData.append('fileHasHeader', 'false');
-    this.formData.append('delimiter', ',');
-
-    const event: IUploadInput = {
-      type: 'uploadAll',
-      url: this.uploadUrl,
-      method: 'POST',
-      formData: this.formData
-    };
-
-    this.uploadInput.emit(event);
+      this.formData.append('fileHasHeader', 'false');
+      this.formData.append('delimiter', ',');
+
+      const event: IUploadInput = {
+          type: 'uploadAll',
+          inputReferenceNumber: Math.random(),
+          url: this.uploadUrl,
+          method: 'POST',
+          formData: this.formData,
+          headers: { Authorization: 'bearer ' + 'aetklsndfl' }
+      };
+
+      this.uploadInput.emit(event);
   }
 
-  cancelUpload(id: string): void {
-    this.uploadInput.emit({ type: 'cancel', id: id });
+  /**
+   * Cancel file uploads.
+   * @param requestId RequestId.
+   */
+  cancelUpload(requestId: string): void {
+      this.uploadInput.emit({ type: 'cancel', inputReferenceNumber: Math.random(), id: requestId });
   }
 
-  removeFile(id: string): void {
-    this.uploadInput.emit({ type: 'remove', id: id });
+  /**
+   * Remoce files.
+   * @param requestId Request id
+   */
+  removeFile(requestId: string): void {
+      console.log(requestId);
+      this.uploadInput.emit({ type: 'remove', inputReferenceNumber: Math.random(), id: requestId });
   }
 
+  /**
+   * Remoce all file uploads.
+   */
   removeAllFiles(): void {
-    this.uploadInput.emit({ type: 'removeAll' });
+      this.uploadInput.emit({ type: 'removeAll', inputReferenceNumber: Math.random(), });
   }
 }
 ```
 
 **Html code**
 
 ```html
-<div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)"
+<div class="drop-container" ngxFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)"
   [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
   <h1>Drag &amp; Drop</h1>
 </div>
 
 <label class="upload-button">
-  <input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)"
+  <input type="file" ngxFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)"
     [uploadInput]="uploadInput" multiple>
   or choose file(s)
 </label>
@@ -260,13 +328,18 @@ export class AppComponent {
 ## Running demo on local machine
 
 ```console
-
 npm install
 
 npm start
-
 ```
 
+## Future plans
+
+**Currently all the files are being sent in a single request though we have taken some params like `requestConcurrency` and `maxFilesToAddInSingleRequest` to send files.**
+
+- Allow user to send individual request with single file
+- To make multiple requests and send files based on the parameters taken
+
 ## LICENCE
 
 [MIT](https://github.com/jayprajapati857/ngx-uploader-directive/blob/master/LICENSE)
diff --git a/projects/ngx-uploader-directive/CHANGELOG.md b/projects/ngx-uploader-directive/CHANGELOG.md
@@ -4,13 +4,19 @@ 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.1.2] - 2020-05-03
+
+### Fixed
+- fixed multiple events response
+- Fixed on upload first event was error
+
 ## [1.1.0] - 2020-04-29
 
 ### Added
 
 - Facility to send headers with request
 
-### Changed
+### Fixed
 - Fixed on removing file it will send file and the id of deleted file
 - Fixed on cancel uploading file it will send file and the id of cencelled file.