diff --git a/angular.json b/angular.json index 24d753d..2661fbc 100644 --- a/angular.json +++ b/angular.json @@ -6,7 +6,7 @@ "projects": { "ng2-file-upload": { "root": "libs/ng2-file-upload", - "sourceRoot": "libs/ng2-file-upload/src", + "sourceRoot": "libs/ng2-file-upload/", "projectType": "library", "architect": { "build": { @@ -127,7 +127,6 @@ } } }, - "defaultProject": "ng2-file-upload-demo", "schematics": { "@schematics/angular:component": { "prefix": "", diff --git a/libs/ng2-file-upload/README.md b/libs/ng2-file-upload/README.md index 7396731..7c2aa4d 100644 --- a/libs/ng2-file-upload/README.md +++ b/libs/ng2-file-upload/README.md @@ -1,10 +1,89 @@ -# libs-ng2-file-upload +# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) +Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/)) -This library was generated with [Nx](https://nx.dev). +[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) +[![Build Status](https://travis-ci.org/valor-software/ng2-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-file-upload) +[![Dependency Status](https://david-dm.org/valor-software/ng2-file-upload.svg)](https://david-dm.org/valor-software/ng2-file-upload) +## Quick start -## Running unit tests +1. A recommended way to install ***ng2-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-file-upload) package manager using the following command: -Run `nx test libs-ng2-file-upload` to execute the unit tests via [Jest](https://jestjs.io). + `npm i ng2-file-upload --save` + Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-file-upload/archive/master.zip). +2. Currently `ng2-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and + `ng2-file-drop` is used for area that will be used for dropping of file or files. + +3. More information regarding using of ***ng2-file-upload*** is located in + [demo](http://valor-software.github.io/ng2-file-upload/) and [demo sources](https://github.com/valor-software/ng2-file-upload/tree/master/demo). + +## Using ***ng2-file-upload*** in a project + +1. Install as shown in the above section. + +2. Import `FileUploadModule` into the module that declares the component using ***ng2-file-upload***: + +```import { FileUploadModule } from 'ng2-file-upload';``` + +3. Add it to `[imports]` under `@NgModule`: + +```imports: [ ... FileUploadModule, ... ]``` + +4. Import `FileUploader` into the component: + +```import { FileUploader } from 'ng2-file-upload';``` + +5. Create a variable for the API url: + +```const URL = 'path_to_api';``` + +6. Initialize it: + +```public uploader:FileUploader = new FileUploader({url: URL}); ``` + +## API for `ng2FileSelect` + +### Properties + + - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) + +### Events + - `onFileSelected` - fires when files are selected and added to the uploader queue + +## API for `ng2FileDrop` + +### Properties + + - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) + + Parameters supported by this object: + + 1. `url` - URL of File Uploader's route + 2. `authToken` - Auth token that will be applied as 'Authorization' header during file send. + 3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false. + 4. `itemAlias` - item alias (form name redefinition) + 5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called. + 6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false. + 7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false. + +### Events + + - `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out. + See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and + [html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html) + - `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"` + +# Troubleshooting + +Please follow these guidelines when reporting bugs and feature requests: + +1. Use [GitHub Issues](https://github.com/valor-software/ng2-file-upload/issues) board to report bugs and feature requests (not our email address) +2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it. + +Thanks for understanding! + +### License + +The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-file-upload/blob/master/LICENSE) file for the full text) diff --git a/libs/ng2-file-upload/index.ts b/libs/ng2-file-upload/index.ts index 781fe0a..ec877e0 100644 --- a/libs/ng2-file-upload/index.ts +++ b/libs/ng2-file-upload/index.ts @@ -1,4 +1,3 @@ - export * from './file-upload/file-drop.directive'; export * from './file-upload/file-uploader.class'; export * from './file-upload/file-item.class'; diff --git a/libs/ng2-file-upload/ng-package.json b/libs/ng2-file-upload/ng-package.json index 573aebe..b920240 100644 --- a/libs/ng2-file-upload/ng-package.json +++ b/libs/ng2-file-upload/ng-package.json @@ -1,6 +1,6 @@ { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/libs/ng2-file-upload", + "dest": "../../dist/libs/ng2-file-upload/", "lib": { "entryFile": "index.ts" } diff --git a/libs/ng2-file-upload/package.json b/libs/ng2-file-upload/package.json index c52fca1..4c624bd 100644 --- a/libs/ng2-file-upload/package.json +++ b/libs/ng2-file-upload/package.json @@ -1,8 +1,31 @@ { "name": "ng2-file-upload", "version": "2.0.0-0", + "description": "Angular file uploader", + "author": "Dmitriy Shekhovtsov ", + "license": "MIT", "peerDependencies": { - "@angular/common": "*", - "@angular/core": "*" - } + "@angular/core": "^11.0.0 || ^12.0.0", + "@angular/common": "^11.0.0 || ^12.0.0" + }, + "sideEffects": false, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "tag": "next" + }, + "repository": { + "type": "git", + "url": "git+ssh://git@github.com/valor-software/ng2-file-upload.git" + }, + "bugs": { + "url": "https://github.com/valor-software/ng2-file-upload/issues" + }, + "homepage": "https://github.com/valor-software/ng2-file-upload#readme", + "keywords": [ + "angular", + "upload file", + "ng", + "ng2", + "angular2" + ] }