Angular FileUploader

This is an Angular plugin that supports uploading files to server as a multipart/form-data

Features

• Upload files to your server by just providing the api url in the config
• Configuration for file types and file sizes are allowed
• custom messages on success and failure of file uploads
• Supports multiple file uploads in one go
• Supports Drag&Drop uploads
• Provides the percentage of file uploaded to server
• Shows progress of file uploads
• Works with any server side platform that supports standard HTML multipart form uploads

Install

npm install nz-file-uploader --save

Setup

Step1 : Import FileUploadModule from the package nz-file-uploader in app.module.ts file.

import { FileUploadModule } from  'nz-file-uploader'

Step2 : Add the FileUploadModule in the NgModule Imports array.

FileUploadModule.forRoot()

Step3 : Add the tags <nz-file-uploader></nz-file-uploader> in the app.component.ts file.

Setting Global Options

Pass values to FileUploadModule.forRoot()

// root app NgModule
 imports: [
 FileUploadModule.forRoot({
     API:  'Your api url here', // The files are uploaded using your api url
     fileTypes: ['images/jpeg', 'images/png'],
     maxFileSize: '100', // in MB
     fileTypeMsg:  'Please select valid filetype',
     filesizeMsg:  'File is too large',
     uploadSuccessMsg: 'Successfully uploaded',
     uploadFailureMsg: 'Upload failed',
     removePlaceHolder: 'remove',
     uploadBtnLabel: 'Upload',
    }),
 ],

Options :

Following are the options and its defaults values

Options	Type	Default	Required
API	String	empty	True
fileTypes	Array	'image/jpeg' 'image/png' 'video/mp4' 'application/zip'	False
maxFileSize	String	500 MB	False
fileTypeMsg	String	Please select valid filetype	False
filesizeMsg	String	File is too large	False
uploadSuccessMsg	String	Successfully uploaded	False
uploadFailureMsg	String	Upload failed	False
removePlaceHolder	String	remove	False
uploadBtnLabel	String	Upload	False

Description :

This package handels the angular UI to upload files to server using your own backend api. Just provide your api URL in the configuration in imports.

Don't forget to handel the uploads in "multipart/form-data" in your backend service.

Credits

Author && Developer : Nizamuddin shaik

Designer : Jaseem.p

License

Mit License: http://www.opensource.org/licenses/mit-license.php