mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
58
components/lib/fileupload/FileContent.vue
Normal file
58
components/lib/fileupload/FileContent.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file">
|
||||
<img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
|
||||
<div class="p-fileupload-file-details">
|
||||
<div class="p-fileupload-file-name">{{ file.name }}</div>
|
||||
<span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
|
||||
<FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
|
||||
</div>
|
||||
<div class="p-fileupload-file-actions">
|
||||
<FileUploadButton icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></FileUploadButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Badge from 'primevue/badge';
|
||||
import Button from 'primevue/button';
|
||||
|
||||
export default {
|
||||
emits: ['remove'],
|
||||
props: {
|
||||
files: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
badgeSeverity: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
badgeValue: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatSize(bytes) {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
let k = 1000,
|
||||
dm = 3,
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
FileUploadButton: Button,
|
||||
FileUploadBadge: Badge
|
||||
}
|
||||
};
|
||||
</script>
|
||||
398
components/lib/fileupload/FileUpload.d.ts
vendored
Executable file
398
components/lib/fileupload/FileUpload.d.ts
vendored
Executable file
|
|
@ -0,0 +1,398 @@
|
|||
/**
|
||||
*
|
||||
* FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/fileupload/)
|
||||
*
|
||||
* @module fileupload
|
||||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
/**
|
||||
* Custom select event.
|
||||
* @see {@link FileUploadEmits.select}
|
||||
*/
|
||||
export interface FileUploadSelectEvent {
|
||||
/**
|
||||
* Browser event.
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* List of selected files.
|
||||
*/
|
||||
files: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom before upload event.
|
||||
* @see {@link FileUploadEmits['before-upload']}
|
||||
*/
|
||||
export interface FileUploadBeforeUploadEvent {
|
||||
/**
|
||||
* XmlHttpRequest instance.
|
||||
*/
|
||||
xhr: XMLHttpRequest;
|
||||
/**
|
||||
* FormData object.
|
||||
*/
|
||||
formData: FormData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom progress event.
|
||||
* @see {@link FileUploadEmits.progress }
|
||||
*/
|
||||
export interface FileUploadProgressEvent {
|
||||
/**
|
||||
* Browser event.
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Calculated progress value.
|
||||
*/
|
||||
progress: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom upload event.
|
||||
* @see {@link FileUploadEmits.upload}
|
||||
*/
|
||||
export interface FileUploadUploadEvent {
|
||||
/**
|
||||
* XmlHttpRequest instance.
|
||||
*/
|
||||
xhr: XMLHttpRequest;
|
||||
/**
|
||||
* Files that are not uploaded.
|
||||
*/
|
||||
files: File | File[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom uploader event.
|
||||
* @see {@link FileUploadEmits.uploader}
|
||||
*/
|
||||
export interface FileUploadUploaderEvent {
|
||||
/**
|
||||
* List of selected files.
|
||||
*/
|
||||
files: File | File[];
|
||||
}
|
||||
/**
|
||||
* Custom error event.
|
||||
* @see {@link FileUploadEmits.error}
|
||||
*/
|
||||
export interface FileUploadErrorEvent {
|
||||
/**
|
||||
* XmlHttpRequest instance.
|
||||
*/
|
||||
xhr: XMLHttpRequest;
|
||||
/**
|
||||
* Files that are not uploaded.
|
||||
*/
|
||||
files: File | File[];
|
||||
}
|
||||
/**
|
||||
* Custom before send event.
|
||||
* @see {@link FileUploadEmits['before-send']}
|
||||
*/
|
||||
export interface FileUploadBeforeSendEvent {
|
||||
/**
|
||||
* XmlHttpRequest instance.
|
||||
*/
|
||||
xhr: XMLHttpRequest;
|
||||
/**
|
||||
* FormData object.
|
||||
*/
|
||||
formData: FormData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom remove event.
|
||||
* @see {@link FileUploadEmits.remove}
|
||||
*/
|
||||
export interface FileUploadRemoveEvent {
|
||||
/**
|
||||
* Removed file.
|
||||
*/
|
||||
file: File;
|
||||
/**
|
||||
* Remaining files to be uploaded.
|
||||
*/
|
||||
files: File[];
|
||||
}
|
||||
/**
|
||||
* Custom remove upload file event.
|
||||
* @see {@link FileUploadEmits['remove-uploaded-file']}
|
||||
*/
|
||||
export interface FileUploadRemoveUploadedFile {
|
||||
/**
|
||||
* Removed file.
|
||||
*/
|
||||
file: File;
|
||||
/**
|
||||
* Remaining files to be uploaded.
|
||||
*/
|
||||
files: File[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in FileUpload component.
|
||||
*/
|
||||
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'.
|
||||
* @defaultValue advanced
|
||||
*/
|
||||
mode?: 'advanced' | 'basic' | undefined;
|
||||
/**
|
||||
* Used to select multiple files at once from file dialog.
|
||||
* @defaultValue false
|
||||
*/
|
||||
multiple?: boolean | undefined;
|
||||
/**
|
||||
* Pattern to restrict the allowed file types such as 'image/*'.
|
||||
*/
|
||||
accept?: string | undefined;
|
||||
/**
|
||||
* Disables the upload functionality.
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* When enabled, upload begins automatically after selection is completed.
|
||||
* @defaultValue false
|
||||
*/
|
||||
auto?: boolean | undefined;
|
||||
/**
|
||||
* Maximum file size allowed in bytes.
|
||||
*/
|
||||
maxFileSize?: number | undefined;
|
||||
/**
|
||||
* Message of the invalid fize size.
|
||||
* @defaultValue {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.
|
||||
* @defaultValue Maximum number of files to be uploaded is {0.}
|
||||
*/
|
||||
invalidFileLimitMessage?: string | undefined;
|
||||
/**
|
||||
* Message of the invalid fize type.
|
||||
* @defaultValue '{0}: Invalid file type.'
|
||||
*/
|
||||
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.
|
||||
* @defaultValue false
|
||||
*/
|
||||
withCredentials?: boolean | undefined;
|
||||
/**
|
||||
* Width of the image thumbnail in pixels.
|
||||
* @defaultValue 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.
|
||||
*/
|
||||
uploadLabel?: string | undefined;
|
||||
/**
|
||||
* Label of the cancel button. Defaults to PrimeVue Locale configuration.
|
||||
* @defaultValue 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.
|
||||
* @defaultValue true
|
||||
*/
|
||||
showUploadButton?: boolean | undefined;
|
||||
/**
|
||||
* Whether to show the cancel button.
|
||||
* @defaultValue true
|
||||
*/
|
||||
showCancelButton?: boolean | undefined;
|
||||
/**
|
||||
* Icon of the choose button.
|
||||
* @defaultValue pi pi-fw pi-plus
|
||||
*/
|
||||
chooseIcon?: string | undefined;
|
||||
/**
|
||||
* Icon of the upload button.
|
||||
* @defaultValue pi pi-fw pi-upload
|
||||
*/
|
||||
uploadIcon?: string | undefined;
|
||||
/**
|
||||
* Icon of the cancel button.
|
||||
* @defaultValue pi pi-fw pi-times
|
||||
*/
|
||||
cancelIcon?: string | undefined;
|
||||
/**
|
||||
* Inline style of the component.
|
||||
*/
|
||||
style?: any;
|
||||
/**
|
||||
* Style class of the component.
|
||||
*/
|
||||
class?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in FileUpload slots.
|
||||
*/
|
||||
export interface FileUploadSlots {
|
||||
/**
|
||||
* Custom header content template.
|
||||
*/
|
||||
header(scope: {
|
||||
/**
|
||||
* Files to upload.
|
||||
*/
|
||||
files: File[];
|
||||
/**
|
||||
* Uploaded files.
|
||||
*/
|
||||
uploadedFiles: File[];
|
||||
/**
|
||||
* Choose function
|
||||
*/
|
||||
chooseCallback(): void;
|
||||
/**
|
||||
* Upload function
|
||||
*/
|
||||
uploadCallback(): void;
|
||||
/**
|
||||
* Clear function
|
||||
*/
|
||||
clearCallback(): void;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom uploaded content template.
|
||||
*/
|
||||
content(scope: {
|
||||
/**
|
||||
* Files to upload.
|
||||
*/
|
||||
files: File[];
|
||||
/**
|
||||
* Uploaded files.
|
||||
*/
|
||||
uploadedFiles: File[];
|
||||
/**
|
||||
* Function to remove an uploaded file.
|
||||
*/
|
||||
removeUploadedFileCallback(index: number): void;
|
||||
/**
|
||||
* Function to remove a file.
|
||||
*/
|
||||
removeFileCallback(index: number): void;
|
||||
/**
|
||||
* Uploaded progress as number.
|
||||
*/
|
||||
progress: number;
|
||||
/**
|
||||
* Status messages about upload process.
|
||||
*/
|
||||
messages: string | undefined;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom content when there is no selected file.
|
||||
*/
|
||||
empty(): VNode[];
|
||||
}
|
||||
|
||||
export interface 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;
|
||||
/**
|
||||
* Callback to invoke when a single uploaded file is removed from the uploaded file list.
|
||||
* @param {FileUploadRemoveUploadedFile} event - Custom uploaded file remove event.
|
||||
*/
|
||||
removeUploadedFile(event: FileUploadRemoveUploadedFile): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - FileUpload**
|
||||
*
|
||||
* _FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/fileupload/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class FileUpload extends ClassComponent<FileUploadProps, FileUploadSlots, FileUploadEmits> {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
FileUpload: GlobalComponentConstructor<FileUpload>;
|
||||
}
|
||||
}
|
||||
|
||||
export default FileUpload;
|
||||
549
components/lib/fileupload/FileUpload.vue
Executable file
549
components/lib/fileupload/FileUpload.vue
Executable file
|
|
@ -0,0 +1,549 @@
|
|||
<template>
|
||||
<div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component">
|
||||
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
|
||||
<div class="p-fileupload-buttonbar">
|
||||
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
|
||||
<span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
|
||||
<span :class="advancedChooseIconClass"></span>
|
||||
<span class="p-button-label">{{ chooseButtonLabel }}</span>
|
||||
</span>
|
||||
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" />
|
||||
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" />
|
||||
</slot>
|
||||
</div>
|
||||
<div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
|
||||
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
|
||||
<FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" />
|
||||
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
|
||||
<FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" />
|
||||
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" />
|
||||
</slot>
|
||||
<div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
|
||||
<slot name="empty"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component">
|
||||
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
|
||||
<span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
|
||||
<span :class="basicChooseButtonIconClass"></span>
|
||||
<span class="p-button-label">{{ basicChooseButtonLabel }}</span>
|
||||
<input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from 'primevue/button';
|
||||
import Message from 'primevue/message';
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import FileContent from './FileContent.vue';
|
||||
|
||||
export default {
|
||||
name: 'FileUpload',
|
||||
emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'remove-uploaded-file'],
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'advanced'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileSizeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file size, file size should be smaller than {1}.'
|
||||
},
|
||||
invalidFileTypeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file type, allowed file types: {1}.'
|
||||
},
|
||||
fileLimit: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileLimitMessage: {
|
||||
type: String,
|
||||
default: 'Maximum number of files exceeded, limit is {0} at most.'
|
||||
},
|
||||
withCredentials: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
chooseLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
uploadLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
cancelLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
customUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showUploadButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chooseIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-plus'
|
||||
},
|
||||
uploadIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-upload'
|
||||
},
|
||||
cancelIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-times'
|
||||
},
|
||||
style: null,
|
||||
class: null
|
||||
},
|
||||
duplicateIEEvent: false,
|
||||
data() {
|
||||
return {
|
||||
uploadedFileCount: 0,
|
||||
files: [],
|
||||
messages: [],
|
||||
focused: false,
|
||||
progress: null,
|
||||
uploadedFiles: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFileSelect(event) {
|
||||
if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
|
||||
this.duplicateIEEvent = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.messages = [];
|
||||
this.files = this.files || [];
|
||||
let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
||||
|
||||
for (let file of files) {
|
||||
if (!this.isFileSelected(file)) {
|
||||
if (this.validate(file)) {
|
||||
if (this.isImage(file)) {
|
||||
file.objectURL = window.URL.createObjectURL(file);
|
||||
}
|
||||
|
||||
this.files.push(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit('select', { originalEvent: event, files: this.files });
|
||||
|
||||
if (this.fileLimit) {
|
||||
this.checkFileLimit();
|
||||
}
|
||||
|
||||
if (this.auto && this.hasFiles && !this.isFileLimitExceeded()) {
|
||||
this.upload();
|
||||
}
|
||||
|
||||
if (event.type !== 'drop' && this.isIE11()) {
|
||||
this.clearIEInput();
|
||||
} else {
|
||||
this.clearInputElement();
|
||||
}
|
||||
},
|
||||
choose() {
|
||||
this.$refs.fileInput.click();
|
||||
},
|
||||
upload() {
|
||||
if (this.customUpload) {
|
||||
if (this.fileLimit) {
|
||||
this.uploadedFileCount += this.files.length;
|
||||
}
|
||||
|
||||
this.$emit('uploader', { files: this.files });
|
||||
this.clear();
|
||||
} else {
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
|
||||
this.$emit('before-upload', {
|
||||
xhr: xhr,
|
||||
formData: formData
|
||||
});
|
||||
|
||||
for (let file of this.files) {
|
||||
formData.append(this.name, file, file.name);
|
||||
}
|
||||
|
||||
xhr.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
this.progress = Math.round((event.loaded * 100) / event.total);
|
||||
}
|
||||
|
||||
this.$emit('progress', {
|
||||
originalEvent: event,
|
||||
progress: this.progress
|
||||
});
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
this.progress = 0;
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
if (this.fileLimit) {
|
||||
this.uploadedFileCount += this.files.length;
|
||||
}
|
||||
|
||||
this.$emit('upload', {
|
||||
xhr: xhr,
|
||||
files: this.files
|
||||
});
|
||||
} else {
|
||||
this.$emit('error', {
|
||||
xhr: xhr,
|
||||
files: this.files
|
||||
});
|
||||
}
|
||||
|
||||
this.uploadedFiles.push(...this.files);
|
||||
this.clear();
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open('POST', this.url, true);
|
||||
|
||||
this.$emit('before-send', {
|
||||
xhr: xhr,
|
||||
formData: formData
|
||||
});
|
||||
|
||||
xhr.withCredentials = this.withCredentials;
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.files = [];
|
||||
this.messages = null;
|
||||
this.$emit('clear');
|
||||
|
||||
if (this.isAdvanced) {
|
||||
this.clearInputElement();
|
||||
}
|
||||
},
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
},
|
||||
isFileSelected(file) {
|
||||
if (this.files && this.files.length) {
|
||||
for (let sFile of this.files) {
|
||||
if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isIE11() {
|
||||
return !!window['MSInputMethodContext'] && !!document['documentMode'];
|
||||
},
|
||||
validate(file) {
|
||||
if (this.accept && !this.isFileTypeValid(file)) {
|
||||
this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.maxFileSize && file.size > this.maxFileSize) {
|
||||
this.messages.push(this.invalidFileSizeMessage.replace('{0}', file.name).replace('{1}', this.formatSize(this.maxFileSize)));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
isFileTypeValid(file) {
|
||||
let acceptableTypes = this.accept.split(',').map((type) => type.trim());
|
||||
|
||||
for (let type of acceptableTypes) {
|
||||
let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type) : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
|
||||
|
||||
if (acceptable) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
getTypeClass(fileType) {
|
||||
return fileType.substring(0, fileType.indexOf('/'));
|
||||
},
|
||||
isWildcard(fileType) {
|
||||
return fileType.indexOf('*') !== -1;
|
||||
},
|
||||
getFileExtension(file) {
|
||||
return '.' + file.name.split('.').pop();
|
||||
},
|
||||
isImage(file) {
|
||||
return /^image\//.test(file.type);
|
||||
},
|
||||
onDragEnter(event) {
|
||||
if (!this.disabled) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onDragOver(event) {
|
||||
if (!this.disabled) {
|
||||
DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onDragLeave() {
|
||||
if (!this.disabled) {
|
||||
DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
}
|
||||
},
|
||||
onDrop(event) {
|
||||
if (!this.disabled) {
|
||||
DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
||||
const allowDrop = this.multiple || (files && files.length === 1);
|
||||
|
||||
if (allowDrop) {
|
||||
this.onFileSelect(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
onBasicUploaderClick() {
|
||||
if (this.hasFiles) this.upload();
|
||||
else this.$refs.fileInput.click();
|
||||
},
|
||||
remove(index) {
|
||||
this.clearInputElement();
|
||||
let removedFile = this.files.splice(index, 1)[0];
|
||||
|
||||
this.files = [...this.files];
|
||||
this.$emit('remove', {
|
||||
file: removedFile,
|
||||
files: this.files
|
||||
});
|
||||
},
|
||||
removeUploadedFile(index) {
|
||||
let removedFile = this.uploadedFiles.splice(index, 1)[0];
|
||||
|
||||
this.uploadedFiles = [...this.uploadedFiles];
|
||||
this.$emit('remove-uploaded-file', {
|
||||
file: removedFile,
|
||||
files: this.uploadedFiles
|
||||
});
|
||||
},
|
||||
clearInputElement() {
|
||||
this.$refs.fileInput.value = '';
|
||||
},
|
||||
clearIEInput() {
|
||||
if (this.$refs.fileInput) {
|
||||
this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
|
||||
this.$refs.fileInput.value = '';
|
||||
}
|
||||
},
|
||||
formatSize(bytes) {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
let k = 1000,
|
||||
dm = 3,
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
},
|
||||
isFileLimitExceeded() {
|
||||
if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focused) {
|
||||
this.focused = false;
|
||||
}
|
||||
|
||||
return this.fileLimit && this.fileLimit < this.files.length + this.uploadedFileCount;
|
||||
},
|
||||
checkFileLimit() {
|
||||
if (this.isFileLimitExceeded()) {
|
||||
this.messages.push(this.invalidFileLimitMessage.replace('{0}', this.fileLimit.toString()));
|
||||
}
|
||||
},
|
||||
onMessageClose() {
|
||||
this.messages = null;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAdvanced() {
|
||||
return this.mode === 'advanced';
|
||||
},
|
||||
isBasic() {
|
||||
return this.mode === 'basic';
|
||||
},
|
||||
advancedChooseButtonClass() {
|
||||
return [
|
||||
'p-button p-component p-fileupload-choose',
|
||||
this.class,
|
||||
{
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused
|
||||
}
|
||||
];
|
||||
},
|
||||
basicChooseButtonClass() {
|
||||
return [
|
||||
'p-button p-component p-fileupload-choose',
|
||||
this.class,
|
||||
{
|
||||
'p-fileupload-choose-selected': this.hasFiles,
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused
|
||||
}
|
||||
];
|
||||
},
|
||||
advancedChooseIconClass() {
|
||||
return ['p-button-icon p-button-icon-left pi-fw', this.chooseIcon];
|
||||
},
|
||||
basicChooseButtonIconClass() {
|
||||
return ['p-button-icon p-button-icon-left', !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon];
|
||||
},
|
||||
basicChooseButtonLabel() {
|
||||
return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
|
||||
},
|
||||
hasFiles() {
|
||||
return this.files && this.files.length > 0;
|
||||
},
|
||||
hasUploadedFiles() {
|
||||
return this.uploadedFiles && this.uploadedFiles.length > 0;
|
||||
},
|
||||
chooseDisabled() {
|
||||
return this.disabled || (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount);
|
||||
},
|
||||
uploadDisabled() {
|
||||
return this.disabled || !this.hasFiles || (this.fileLimit && this.fileLimit < this.files.length);
|
||||
},
|
||||
cancelDisabled() {
|
||||
return this.disabled || !this.hasFiles;
|
||||
},
|
||||
chooseButtonLabel() {
|
||||
return this.chooseLabel || this.$primevue.config.locale.choose;
|
||||
},
|
||||
uploadButtonLabel() {
|
||||
return this.uploadLabel || this.$primevue.config.locale.upload;
|
||||
},
|
||||
cancelButtonLabel() {
|
||||
return this.cancelLabel || this.$primevue.config.locale.cancel;
|
||||
},
|
||||
completedLabel() {
|
||||
return this.$primevue.config.locale.completed;
|
||||
},
|
||||
pendingLabel() {
|
||||
return this.$primevue.config.locale.pending;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
FileUploadButton: Button,
|
||||
FileUploadProgressBar: ProgressBar,
|
||||
FileUploadMessage: Message,
|
||||
FileContent
|
||||
},
|
||||
directives: {
|
||||
ripple: Ripple
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-fileupload-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-button.p-fileupload-choose {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-fileupload-buttonbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-fileupload > input[type='file'],
|
||||
.p-fileupload-basic input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-fluid .p-fileupload .p-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-fileupload-file {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-fileupload-file-thumbnail {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-fileupload-file-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
9
components/lib/fileupload/package.json
Normal file
9
components/lib/fileupload/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./fileupload.cjs.js",
|
||||
"module": "./fileupload.esm.js",
|
||||
"unpkg": "./fileupload.min.js",
|
||||
"types": "./FileUpload.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./FileUpload.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue