File Uploader

Pages Drag and Drop File Uploader

pg-upload is a fork of NG-ZORRO implementation of Dropzone Initial credits go to the author

Importing

First import it to your app module or any submodule as you wish

import { pgUploadModule } from '../@pages/components/upload/upload.module';
@NgModule({
  imports: [pgUploadModule,...]
})
export class AppModule(){}

How to use

Basic Select with Search

HTML

<pg-upload
    Type="drag"
    [Multiple]="true"
    [Limit]="2"
    Action="https://jsonplaceholder.typicode.com/posts/"
    (Change)="handleChange($event)"
    extraClass="dropzone"
    progressType="circle"
    >
    <div class="d-flex flex-column align-items-center">
    <h4 class="semi-bold no-margin">Drop files to Upload</h4>
    <p>or click here</p>
    </div>
</pg-upload>

Typescript

 //Fileupload HandleChange 

 handleChange(event){ }

API

The server upload interface implementation can refer to jQuery-File-Upload .

parameter	Instructions	Types of	Defaults
Accept	Accepted upload file types, see input accept Attribute	string	no
Action	Required parameters, uploaded address	string	no
BeforeUpload	Before uploading files hooks, parameters for the uploaded files, if returned tofalsestop uploading. Note: IE9 does not support this method. Note: Be sure what =>the definition of treatment.	(file, fileList) => boolean | Observable<boolean>	no
CustomRequest	By overriding the default upload behavior, you can customize your own upload implementation. Note: Be sure what =>the definition of treatment.	(item) => Subscription	no
Data	Upload the required parameters or return upload methods. Note: Be sure what=>the definition of treatment.	Object | ((file: UploadFile) => Object)	no
Disabled	Is it disabled	boolean	false
FileList	File list, two-way binding	UploadFile[]	no
Limit	Limit the maximum number of single uploads, Multiplevalid when opened;0unlimited	number	0
FileType	Limit the file type, for example:image/png,image/jpeg,image/gif,image/bmp	string	no
Filter	Custom filter	UploadFilter[]	no
Headers	Set upload request header, above IE10	object	no
ListType	Upload list of built-in styles, support three basic styles text,pictureandpicture-card	string	'text'
Multiple	Whether to support multiple-choice files, IE10+support. After opening, hold down ctrl to select multiple files.	boolean	false
Name	File parameter names sent to the background	string	'file'
ShowUploadList	Whether to display the list, can be set as an object for individually setting showPreviewIcon and showRemoveIcon	Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }	true
ShowButton	Whether to display the upload button	boolean	true
WithCredentials	Whether to carry a cookie when uploading a request	boolean	false
Preview	Clickback when clicking on a file link or preview icon. Note: Be sure what =>the definition of treatment.	(file: UploadFile) => void	no
Remove	Click on the callback when the file is removed. If the return value is false, it will not be removed. Support for returning Observable<boolean> objects. Note: Be sure what =>the definition of treatment.	(file: UploadFile) => boolean | Observable<boolean>	no
(Change)	Callback when upload file status changes	EventEmitter