Pages UI
v5.0.1 - Pages Angular
Search
⌃K
Comment on page

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 5yr ago