Readme updated and added licence in library

jayprajapati857 · Apr 29, 2020 · 65c5ee7 · 65c5ee7
1 parent 05bcafb
commit 65c5ee7
Show file tree

Hide file tree

Showing 5 changed files with 337 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ npm install ng-file-uploader --save
 
 1. Import `NgFileUploaderModule` into your AppModule or in module where you will use it.
 
-```js
+```ts
 // app.module.ts
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -41,7 +41,7 @@ export class AppModule { }
 
 **or** Import `NgFileUploaderModule` into your SharedModule. This could be usefull if your project has nested Modules.
 
-```js
+```ts
 // shared.module.ts
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -61,7 +61,7 @@ export class SharedModule { }
 
 2. Data structures of Input events and upload output events of files.
 
-```js
+```ts
 
 /**
  * File Upload Options.
@@ -139,7 +139,7 @@ export interface IUploadOutput {
 
 **Component code**
 
-```js
+```ts
 // tslint:disable: max-line-length
 import { Component, EventEmitter } from '@angular/core';
 import { IUploadOptions, ISelectedFile, IUploadInput, IUploadOutput } from 'ng-file-uploader';
@@ -260,10 +260,12 @@ export class AppComponent {
 ## Running demo on local machine
 
 ```console
+
+npm install
+
 npm start
-```
 
-- If you face any problem in running demo do `npm install` for libraray and then try with `npm start`.
+```
 
 ### LICENCE
 

diff --git a/package.json b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "ng-file-uploader",
   "version": "1.0.0",
+  "description": "Angular file uploader.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jayprajapati857/ng-file-uploader.git"
+    "url": "https://github.com/jayprajapati857/ng-file-uploader.git"
   },
   "authors": [
     "Jay Prajapati <[email protected]>"
@@ -12,6 +13,22 @@
   "bugs": {
     "url": "https://github.com/jayprajapati857/ng-file-uploader/issues"
   },
+  "homepage": "https://github.com/jayprajapati857/ng-file-uploader",
+  "keywords": [
+    "angular",
+    "directive",
+    "typescript",
+    "ng-file-uploader",
+    "file upload directive",
+    "angular-file-uploader",
+    "angular file uploader"
+  ],
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/jayprajapati857/ng-file-uploader/blob/master/LICENSE"
+    }
+  ],
   "scripts": {
     "ng": "ng",
     "start": "ng build ng-file-uploader-lib && npm install && ng serve --open",

diff --git a/projects/ng-file-uploader/LICENSE b/projects/ng-file-uploader/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Jay Prajapati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/projects/ng-file-uploader/README.md b/projects/ng-file-uploader/README.md
@@ -1,24 +1,272 @@
-# NgFileUploader
+# ng-file-uploader
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+Angular 9 File Uploader.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
 
-## Code scaffolding
+## Installation
 
-Run `ng generate component component-name --project lib-file-uploader` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib-file-uploader`.
-> Note: Don't forget to add `--project lib-file-uploader` or else it will be added to the default project in your `angular.json` file. 
+Add `ng-file-uploader` module as dependency to your project.
 
-## Build
+```console
+npm install ng-file-uploader --save
+```
 
-Run `ng build lib-file-uploader` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Usage
 
-## Publishing
+1. Import `NgFileUploaderModule` into your AppModule or in module where you will use it.
 
-After building your library with `ng build lib-file-uploader`, go to the dist folder `cd dist/lib-file-uploader` and run `npm publish`.
+```ts
+// app.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { NgFileUploaderModule } from 'ng-file-uploader';
 
-## Running unit tests
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
 
-Run `ng test lib-file-uploader` to execute the unit tests via [Karma](https://karma-runner.github.io).
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    NgFileUploaderModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
 
-## Further help
+**or** Import `NgFileUploaderModule` into your SharedModule. This could be usefull if your project has nested Modules.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+```ts
+// shared.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { NgFileUploaderModule } from 'ng-file-uploader';
+
+@NgModule({  
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    NgFileUploaderModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class SharedModule { }
+```
+
+2. Data structures of Input events and upload output events of files.
+
+```ts
+
+/**
+ * File Upload Options.
+ */
+export interface IUploadOptions {
+    requestConcurrency: number; // Number of request can be made at a time.
+    maxFilesToAddInSingleRequest: number; // Number of files uploaded in single.
+    allowedFileTypes?: Array<string>; // Allowed file content types.
+    maxFileUploads?: number; // Max number of files that user can upload
+    maxFileSize?: number; // Max size of the file in bytes that user can upload.
+    logs?: boolean; // Flag to show the library logs. Default false
+}
+
+/**
+ * Selected File Object.
+ */
+export interface ISelectedFile {
+    id: string; // Unique id of selected file. generated by library.
+    fileIndex: number; // file index of selected files.
+    name: string; // Name of file.
+    type: string; // Type of file.
+    progress?: IUploadProgress; // File upload Progress.
+    nativeFile?: File; // Native File.
+    formData?: FormData; // Form data to upload with file.
+    response?: any; // Response for the selected file.
+}
+
+/**
+ * File Upload Progress.
+ */
+export interface IUploadProgress {
+    status: 'Queue' | 'Uploading' | 'Done' | 'Cancelled'; // Progress stauts.
+    data?: {
+        percentage: number; // Progress percentage.
+        speed: number; // Progress speed.
+        speedHuman: string; // Progress spped human.
+        startTime: number | null; // Progress start time.
+        endTime: number | null; // Progress end time.
+        eta: number | null; // Progress eta.
+        etaHuman: string | null; // Progress eta human.
+    }; // Upload progress data.
+}
+
+/**
+ * Upload Input events that can be emit to ng-file-uploader.
+ */
+export interface IUploadInput {
+    type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll'; // Input event type.
+    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.
+    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 ng-file-uploader.
+ */
+export interface IUploadOutput {
+    type: 'init' | 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll' | 'rejected' | 'error'; // Output events.
+    file?: ISelectedFile; // selected file.
+    progress?: IUploadProgress; // Progress
+    response?: any; // File upload api response.
+}
+
+```
+
+## Example
+
+**You can always run this working example by cloning this repository and build and run with command in terminal `npm start`.**
+
+**Component code**
+
+```ts
+// tslint:disable: max-line-length
+import { Component, EventEmitter } from '@angular/core';
+import { IUploadOptions, ISelectedFile, IUploadInput, IUploadOutput } from 'ng-file-uploader';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent {
+  title = 'ng-file-uploader';
+  options: IUploadOptions;
+  formData: FormData;
+  files: Array<ISelectedFile>;
+  uploadInput: EventEmitter<IUploadInput>;
+  dragOver: boolean;
+  uploadUrl = 'http://192.168.0.224:8099/api/blocklists/uploadblockednumberfile';
+
+
+  /**
+   * Default Constructor
+   */
+  constructor() {
+    this.options = { requestConcurrency: 1, maxFilesToAddInSingleRequest: 10, maxFileUploads: 5, maxFileSize: 1000000, logs: true };
+    this.files = new Array<ISelectedFile>();
+    this.uploadInput = new EventEmitter<IUploadInput>();
+    this.formData = new FormData();
+  }
+
+  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;
+    }
+  }
+
+  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);
+  }
+
+  cancelUpload(id: string): void {
+    this.uploadInput.emit({ type: 'cancel', id: id });
+  }
+
+  removeFile(id: string): void {
+    this.uploadInput.emit({ type: 'remove', id: id });
+  }
+
+  removeAllFiles(): void {
+    this.uploadInput.emit({ type: 'removeAll' });
+  }
+}
+```
+
+**Html code**
+
+```html
+<div class="drop-container" ngFileDrop [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)"
+    [uploadInput]="uploadInput" multiple>
+  or choose file(s)
+</label>
+
+<button type="button" class="start-upload-btn" (click)="startUpload()">
+  Start Upload
+</button>
+```
+
+## Running demo on local machine
+
+```console
+
+npm install
+
+npm start
+
+```
+
+### LICENCE
+
+[MIT](https://github.com/jayprajapati857/ng-file-uploader/blob/master/LICENSE)