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
Typescript
<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>
 //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
​

Forms - Previous

Quill Editor

Next - UI Components

Progress Bar

Last modified 4yr ago

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 to`false`stop 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, `Multiple`valid when opened;`0`unlimited	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`,`picture`and`picture-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