From 65c5ee7d47f2e4e6ebc80ce0ac0df035ce7036f3 Mon Sep 17 00:00:00 2001 From: Jaykumar Prajapati Date: Wed, 29 Apr 2020 20:26:34 +0530 Subject: [PATCH] Readme updated and added licence in library --- README.md | 14 +- package.json | 19 +- projects/ng-file-uploader/LICENSE | 21 ++ projects/ng-file-uploader/README.md | 274 +++++++++++++++++++++++-- projects/ng-file-uploader/package.json | 30 ++- 5 files changed, 337 insertions(+), 21 deletions(-) create mode 100644 projects/ng-file-uploader/LICENSE diff --git a/README.md b/README.md index 78671e6..5a184f1 100644 --- 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 index 2d1b2c4..1012efb 100644 --- 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 " @@ -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 new file mode 100644 index 0000000..0245558 --- /dev/null +++ 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 index 8792798..5a184f1 100644 --- 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; // 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; + uploadInput: EventEmitter; + 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(); + this.uploadInput = new EventEmitter(); + this.formData = new FormData(); + } + + onUploadOutput(output: IUploadOutput): void { + console.log(output); + switch (output.type) { + case 'init': + this.files = new Array(); + 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 +
+

Drag & Drop

+
+ + + + +``` + +## Running demo on local machine + +```console + +npm install + +npm start + +``` + +### LICENCE + +[MIT](https://github.com/jayprajapati857/ng-file-uploader/blob/master/LICENSE) diff --git a/projects/ng-file-uploader/package.json b/projects/ng-file-uploader/package.json index 8dacb0e..bd8196b 100644 --- a/projects/ng-file-uploader/package.json +++ b/projects/ng-file-uploader/package.json @@ -1,6 +1,34 @@ { "name": "ng-file-uploader", - "version": "0.0.1", + "version": "1.0.0", + "description": "Angular file uploader.", + "repository": { + "type": "git", + "url": "https://github.com/jayprajapati857/ng-file-uploader.git" + }, + "authors": [ + "Jay Prajapati " + ], + "license": "MIT", + "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" + } + ], "peerDependencies": { "@angular/common": "^7.2.0", "@angular/core": "^7.2.0"