330 lines
9.1 KiB
JavaScript
330 lines
9.1 KiB
JavaScript
const FileUploadProps = [
|
|
{
|
|
name: 'name',
|
|
type: 'string',
|
|
default: 'null',
|
|
description: 'Name of the request parameter to identify the files at backend.'
|
|
},
|
|
{
|
|
name: 'url',
|
|
type: 'string',
|
|
default: 'null',
|
|
description: 'Remote url to upload the files.'
|
|
},
|
|
{
|
|
name: 'mode',
|
|
type: 'string',
|
|
default: 'advanced',
|
|
description: 'Defines the UI of the component, possible values are "advanced" and "basic".'
|
|
},
|
|
{
|
|
name: 'multiple',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'Used to select multiple files at once from file dialog.'
|
|
},
|
|
{
|
|
name: 'accept',
|
|
type: 'string',
|
|
default: 'null',
|
|
description: 'Pattern to restrict the allowed file types such as "image/*".'
|
|
},
|
|
{
|
|
name: 'disabled',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'Disables the upload functionality.'
|
|
},
|
|
{
|
|
name: 'auto',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'When enabled, upload begins automatically after selection is completed.'
|
|
},
|
|
{
|
|
name: 'maxFileSize',
|
|
type: 'number',
|
|
default: 'null',
|
|
description: 'Maximum file size allowed in bytes.'
|
|
},
|
|
{
|
|
name: 'invalidFileSizeMessage',
|
|
type: 'string',
|
|
default: '"{0}: Invalid file size, file size should be smaller than {1}."',
|
|
description: 'Message of the invalid fize size.'
|
|
},
|
|
{
|
|
name: 'invalidFileLimitMessage',
|
|
type: 'string',
|
|
default: 'Maximum number of files exceeded, limit is {0} at most.',
|
|
description: 'Message to display when number of files to be uploaded exceeeds the limit.'
|
|
},
|
|
{
|
|
name: 'fileLimit',
|
|
type: 'number',
|
|
default: 'null',
|
|
description: 'Maximum number of files that can be uploaded.'
|
|
},
|
|
{
|
|
name: 'withCredentials',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.'
|
|
},
|
|
{
|
|
name: 'previewWidth',
|
|
type: 'number',
|
|
default: '50',
|
|
description: 'Width of the image thumbnail in pixels.'
|
|
},
|
|
{
|
|
name: 'chooseLabel',
|
|
type: 'string',
|
|
default: 'null',
|
|
description: 'Label of the choose button. Defaults to PrimeVue Locale configuration.'
|
|
},
|
|
{
|
|
name: 'uploadLabel',
|
|
type: 'string',
|
|
default: 'Upoad',
|
|
description: 'Label of the upload button. Defaults to PrimeVue Locale configuration.'
|
|
},
|
|
{
|
|
name: 'cancelLabel',
|
|
type: 'string',
|
|
default: 'Cancel',
|
|
description: 'Label of the cancel button. Defaults to PrimeVue Locale configuration.'
|
|
},
|
|
{
|
|
name: 'customUpload',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue Locale configuration.'
|
|
},
|
|
{
|
|
name: 'showUploadButton',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
description: 'Whether to show the upload button.'
|
|
},
|
|
{
|
|
name: 'showCancelButton',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
description: 'Whether to cancel the upload button.'
|
|
},
|
|
{
|
|
name: 'chooseIcon',
|
|
type: 'string',
|
|
default: 'pi pi-plus',
|
|
description: 'Icon of the choose button.'
|
|
},
|
|
{
|
|
name: 'uploadIcon',
|
|
type: 'string',
|
|
default: 'pi pi-upload',
|
|
description: 'Icon of the upload button.'
|
|
},
|
|
{
|
|
name: 'cancelIcon',
|
|
type: 'string',
|
|
default: 'pi pi-times',
|
|
description: 'Icon of the cancel button.'
|
|
},
|
|
{
|
|
name: 'style',
|
|
type: 'any',
|
|
default: 'null',
|
|
description: 'Inline style of the component.'
|
|
},
|
|
{
|
|
name: 'class',
|
|
type: 'string',
|
|
default: 'null',
|
|
description: 'Style class of the component.'
|
|
},
|
|
{
|
|
name: 'pt',
|
|
type: 'any',
|
|
default: 'null',
|
|
description: 'Uses to pass attributes to DOM elements inside the component.'
|
|
},
|
|
{
|
|
name: 'unstyled',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
description: 'When enabled, it removes component related styles in the core.'
|
|
}
|
|
];
|
|
|
|
const FileUploadEvents = [
|
|
{
|
|
name: 'before-upload',
|
|
description: 'Callback to invoke before file upload begins to customize the request such as post parameters before the files.',
|
|
arguments: [
|
|
{
|
|
name: 'event.xhr',
|
|
type: 'object',
|
|
description: 'XmlHttpRequest instance.'
|
|
},
|
|
{
|
|
name: 'event.formData',
|
|
type: 'object',
|
|
description: 'FormData object.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'before-send',
|
|
description: 'Callback to invoke before file send begins to customize the request such as adding headers.',
|
|
arguments: [
|
|
{
|
|
name: 'event.xhr',
|
|
type: 'object',
|
|
description: 'XmlHttpRequest instance.'
|
|
},
|
|
{
|
|
name: 'event.formData',
|
|
type: 'object',
|
|
description: 'FormData object.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'upload',
|
|
description: 'Callback to invoke when file upload is complete.',
|
|
arguments: [
|
|
{
|
|
name: 'event.xhr',
|
|
type: 'object',
|
|
description: 'XmlHttpRequest instance.'
|
|
},
|
|
{
|
|
name: 'event.files',
|
|
type: 'object',
|
|
description: 'Uploaded files.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'error',
|
|
description: 'Callback to invoke if file upload fails.',
|
|
arguments: [
|
|
{
|
|
name: 'event.xhr',
|
|
type: 'object',
|
|
description: 'XmlHttpRequest instance.'
|
|
},
|
|
{
|
|
name: 'event.files',
|
|
type: 'object',
|
|
description: 'Files that are not uploaded.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'clear',
|
|
description: 'Callback to invoke when files in queue are removed without uploading.'
|
|
},
|
|
{
|
|
name: 'select',
|
|
description: 'Callback to invoke when file upload is complete.',
|
|
arguments: [
|
|
{
|
|
name: 'event.originalEvent',
|
|
type: 'object',
|
|
description: 'Original browser event.'
|
|
},
|
|
{
|
|
name: 'event.files',
|
|
type: 'object',
|
|
description: 'List of selected files.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'progress',
|
|
description: 'Callback to invoke when files are selected.',
|
|
arguments: [
|
|
{
|
|
name: 'event.originalEvent',
|
|
type: 'object',
|
|
description: 'Original browser event.'
|
|
},
|
|
{
|
|
name: 'event.progress',
|
|
type: 'number',
|
|
description: 'Calculated progress value.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'uploader',
|
|
description: 'Callback to invoke to implement a custom upload.',
|
|
arguments: [
|
|
{
|
|
name: 'event.files',
|
|
type: 'object',
|
|
description: 'List of selected files.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'remove',
|
|
description: 'Callback to invoke when a singe file is removed from the list.',
|
|
arguments: [
|
|
{
|
|
name: 'event.file',
|
|
type: 'object',
|
|
description: 'Removed file.'
|
|
},
|
|
{
|
|
name: 'event.files',
|
|
type: 'object',
|
|
description: 'Remaining files to be uploaded.'
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const FileUploadSlots = [
|
|
{
|
|
name: 'header',
|
|
description: 'Custom header template.'
|
|
},
|
|
{
|
|
name: 'content',
|
|
description: 'Custom content template.'
|
|
},
|
|
{
|
|
name: 'empty',
|
|
description: 'Custom content when there is no selected file'
|
|
},
|
|
{
|
|
name: 'chooseicon',
|
|
description: 'Custom choose icon template.'
|
|
},
|
|
{
|
|
name: 'uploadicon',
|
|
description: 'Custom upload icon template.'
|
|
},
|
|
{
|
|
name: 'cancelicon',
|
|
description: 'Custom cancel icon template.'
|
|
},
|
|
{
|
|
name: 'fileremoveicon',
|
|
description: 'Custom remove icon template for each file.'
|
|
}
|
|
];
|
|
|
|
module.exports = {
|
|
fileupload: {
|
|
name: 'FileUpload',
|
|
description: 'FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.',
|
|
props: FileUploadProps,
|
|
events: FileUploadEvents,
|
|
slots: FileUploadSlots
|
|
}
|
|
};
|