diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts index 7afc38055..a5eb34384 100755 --- a/src/components/fileupload/FileUpload.d.ts +++ b/src/components/fileupload/FileUpload.d.ts @@ -1,44 +1,262 @@ import { VNode } from 'vue'; +import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; -interface FileUploadProps { - name?: string; - url?: string; - mode?: string; - multiple?: boolean; - accept?: string; - disabled?: boolean; - auto?: boolean; - maxFileSize?: number; - invalidFileSizeMessage?: string; - invalidFileLimitMessage?: string; - invalidFileTypeMessage?: string; - fileLimit?: number; - withCredentials?: boolean; - previewWidth?: number; - chooseLabel?: string; - uploadLabel?: string; - cancelLabel?: string; - customUpload?: boolean; - showUploadButton?: boolean; - showCancelButton?: boolean; - style?: any; - class?: string; +type FileUploadModeType = 'advanced' | 'basic'; + +export interface FileUploadSelectEvent { + /** + * Browser event. + */ + originalEvent: Event; + /** + * List of selected files. + */ + files: any; } -declare class FileUpload { - $props: FileUploadProps; - $emit(eventName: 'select', e: { originalEvent: Event, files: any }): this; - $emit(eventName: 'before-upload', e: { xhr: XMLHttpRequest, formData: any }): this; - $emit(eventName: 'progress', e: { originalEvent: Event, progress: any }): this; - $emit(eventName: 'upload', e: { xhr: XMLHttpRequest, files: any }): this; - $emit(eventName: 'uploader', e: { files: any }): this; - $emit(eventName: 'error', e: { xhr: XMLHttpRequest, files: any }): this; - $emit(eventName: 'before-send', e: { xhr: XMLHttpRequest, formData: any }): this; - $emit(eventName: 'clear'): this; - $emit(eventName: 'remove', e: { file: File, files: File[] }): this; - $slots: { - empty: VNode[]; +export interface FileUploadBeforeUploadEvent { + /** + * XmlHttpRequest instance. + */ + xhr: XMLHttpRequest; + /** + * FormData object. + */ + formData: FormData; +} + +export interface FileUploadProgressEvent { + /** + * Browser event. + */ + originalEvent: Event; + /** + * Calculated progress value. + */ + progress: number; +} + +export interface FileUploadUploadEvent { + /** + * XmlHttpRequest instance. + */ + xhr: XMLHttpRequest; + /** + * Files that are not uploaded. + */ + files: File | File[]; +} + +export interface FileUploadUploaderEvent { + /** + * List of selected files. + */ + files: File | File[]; +} + +export interface FileUploadErrorEvent { + /** + * XmlHttpRequest instance. + */ + xhr: XMLHttpRequest; + /** + * Files that are not uploaded. + */ + files: File | File[]; +} + +export interface FileUploadBeforeSendEvent { + /** + * XmlHttpRequest instance. + */ + xhr: XMLHttpRequest; + /** + * FormData object. + */ + formData: FormData; +} + +export interface FileUploadRemoveEvent { + /** + * Removed file. + */ + file: File; + /** + * Remaining files to be uploaded. + */ + files: File[]; +} + +export interface FileUploadProps { + /** + * Name of the request parameter to identify the files at backend. + */ + name?: string | undefined; + /** + * Remote url to upload the files. + */ + url?: string | undefined; + /** + * Defines the UI of the component, possible values are "advanced" and "basic". + * @see FileUploadModeType + * Default value is 'advanced'. + */ + mode?: FileUploadModeType; + /** + * Used to select multiple files at once from file dialog. + */ + multiple?: boolean | undefined; + /** + * Pattern to restrict the allowed file types such as "image/*". + */ + accept?: string | undefined; + /** + * Disables the upload functionality. + */ + disabled?: boolean | undefined; + /** + * When enabled, upload begins automatically after selection is completed. + */ + auto?: boolean | undefined; + /** + * Maximum file size allowed in bytes. + */ + maxFileSize?: number | undefined; + /** + * Message of the invalid fize size. + * Default value is '{0}: Invalid file size, file size should be smaller than {1}.'. + */ + invalidFileSizeMessage?: string | undefined; + /** + * Message to display when number of files to be uploaded exceeeds the limit. + * Default value is 'Maximum number of files exceeded, limit is {0} at most.'. + */ + invalidFileLimitMessage?: string | undefined; + /** + * Message of the invalid fize type. + * Default value is '{0}: Invalid file type, allowed file types: {1}.'. + */ + invalidFileTypeMessage?: string | undefined; + /** + * Maximum number of files that can be uploaded. + */ + fileLimit?: number | undefined; + /** + * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. + */ + withCredentials?: boolean | undefined; + /** + * Width of the image thumbnail in pixels. + * Default value is 50. + */ + previewWidth?: number | undefined; + /** + * Label of the choose button. Defaults to PrimeVue Locale configuration. + */ + chooseLabel?: string | undefined; + /** + * Label of the upload button. Defaults to PrimeVue Locale configuration. + * Default value is 'Upload'. + */ + uploadLabel?: string | undefined; + /** + * Label of the cancel button. Defaults to PrimeVue Locale configuration. + * Default value is 'Cancel'. + */ + cancelLabel?: string | undefined; + /** + * Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue Locale configuration. + */ + customUpload?: boolean | undefined; + /** + * Whether to show the upload button. + * Default value is true. + */ + showUploadButton?: boolean | undefined; + /** + * Whether to show the cancel button. + * Default value is true. + */ + showCancelButton?: boolean | undefined; + /** + * Inline style of the component. + */ + style?: any; + /** + * Style class of the component. + */ + class?: string | undefined; +} + +export interface FileUploadSlots { + /** + * Custom empty template. + */ + empty: () => VNode[]; +} + +export declare type FileUploadEmits = { + /** + * Callback to invoke when files are selected. + * @param {FileUploadSelectEvent} event - Custom select event. + */ + 'select': (event: FileUploadSelectEvent) => void; + /** + * Callback to invoke before file upload begins to customize the request such as post parameters before the files. + * @param {FileUploadBeforeUploadEvent} event - Custom before upload event. + */ + 'before-upload': (event: FileUploadBeforeUploadEvent) => void; + /** + * Callback to invoke when files are being uploaded. + * @param {FileUploadProgressEvent} event - Custom progress event. + */ + 'progress': (event: FileUploadProgressEvent) => void; + /** + * Callback to invoke when file upload is complete. + * @param {FileUploadUploadEvent} event - Custom upload event. + */ + 'upload': (event: FileUploadUploadEvent) => void; + /** + * Callback to invoke to implement a custom upload. + * @param {FileUploadUploaderEvent} event - Custom uploader event. + */ + 'uploader': (event: FileUploadUploaderEvent) => void; + /** + * Callback to invoke if file upload fails. + * @param {FileUploadErrorEvent} event - Custom error event. + */ + 'error': (event: FileUploadErrorEvent) => void; + /** + * Callback to invoke before file send begins to customize the request such as adding headers. + * @param {FileUploadBeforeSendEvent} event - Custom before send event. + */ + 'before-send': (event: FileUploadBeforeSendEvent) => void; + /** + * Callback to invoke when files in queue are removed without uploading. + */ + 'clear': () => void; + /** + * Callback to invoke when a singe file is removed from the list. + * @param {FileUploadRemoveEvent} event - Custom remove event. + */ + 'remove': (event: FileUploadRemoveEvent) => void; +} + +declare class FileUpload extends ClassComponent { } + +declare module '@vue/runtime-core' { + interface GlobalComponents { + FileUpload: GlobalComponentConstructor } } +/** + * + * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. + * + * Demos: + * + * - [FileUpload](https://www.primefaces.org/primevue/showcase/#/fileupload) + * + */ export default FileUpload;