Comment on page
File Uploader
Pages Drag and Drop File Uploader
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(){}
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){ }
parameter | Instructions | Types of | Defaults |
Accept | 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 andpicture-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 | |
Last modified 5yr ago