vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #360, Fixed #361

pull/388/head
cagataycivici 2020-07-04 13:01:30 +03:00
parent 4bc91019fd
commit 7dfe249ed6
3 changed files with 150 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/fileupload/FileUpload.d.ts vendored
View File

@ -10,11 +10,14 @@ export declare class FileUpload extends Vue {
auto?: boolean;
maxFileSize?: number;
invalidFileSizeMessage?: string;
invalidFileLimitMessage?: string;
fileLimit?: number;
withCredentials?: boolean;
previewWidth?: number;
chooseLabel?: string;
uploadLabel?: string;
cancelLabel?: string;
customUpload?: boolean;
$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;

151
src/components/fileupload/FileUpload.vue
View File

@ -2,12 +2,12 @@
<div class="p-fileupload p-fileupload-advanced p-component" v-if="isAdvanced">
<div class="p-fileupload-buttonbar">
<span :class="advancedChooseButtonClass" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="disabled" />
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
<span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-label">{{chooseLabel}}</span>
</span>
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="disabled || !hasFiles" />
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="disabled || !hasFiles" />
<FileUploadButton :label="uploadLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" />
<FileUploadButton :label="cancelLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" />
</div>
<div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
<FileUploadProgressBar :value="progress" v-if="hasFiles" />
@ -84,6 +84,14 @@ export default {
type: String,
default: '{0}: Invalid file size, file size should be smaller than {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
@ -103,9 +111,14 @@ export default {
cancelLabel: {
type: String,
default: 'Cancel'
},
customUpload: {
type: Boolean,
default: false
}
},
duplicateIEEvent: false,
uploadedFileCount: 0,
data() {
return {
files: null,
@ -137,7 +150,11 @@ export default {
this.$emit('select', {originalEvent: event, files: files});
if (this.auto && this.hasFiles) {
if (this.fileLimit) {
this.checkFileLimit();
}
if (this.auto && this.hasFiles && !this.isFileLimitExceeded()) {
this.upload();
}
@ -152,60 +169,73 @@ export default {
this.$refs.fileInput.click();
},
upload() {
let xhr = new XMLHttpRequest();
let formData = new FormData();
if (this.customUpload) {
if (this.fileLimit) {
this.uploadedFileCount += this.files.length;
}
this.$emit('before-upload', {
'xhr': xhr,
'formData': formData
});
for (let file of this.files) {
formData.append(this.name, file, file.name);
this.$emit('uploader', {files: this.files});
}
else {
let xhr = new XMLHttpRequest();
let formData = new FormData();
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
this.$emit('before-upload', {
'xhr': xhr,
'formData': formData
});
});
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
this.progress = 0;
if (xhr.status >= 200 && xhr.status < 300) {
this.$emit('upload', {
xhr: xhr,
files: this.files
});
}
else {
this.$emit('error', {
xhr: xhr,
files: this.files
});
}
this.clear();
for (let file of this.files) {
formData.append(this.name, file, file.name);
}
};
xhr.open('POST', this.url, true);
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
this.progress = Math.round((event.loaded * 100) / event.total);
}
this.$emit('before-send', {
'xhr': xhr,
'formData': formData
});
this.$emit('progress', {
originalEvent: event,
progress: this.progress
});
});
xhr.withCredentials = this.withCredentials;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
this.progress = 0;
xhr.send(formData);
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.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 = null;
@ -308,6 +338,22 @@ export default {
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.msgs.push({
severity: 'error',
summary: this.invalidFileLimitMessageSummary.replace('{0}', this.fileLimit.toString()),
detail: this.invalidFileLimitMessageDetail.replace('{0}', this.fileLimit.toString())
});
}
}
},
computed: {
@ -342,6 +388,15 @@ export default {
},
hasFiles() {
return this.files && this.files.length > 0;
},
chooseDisabled() {
return this.disabled || (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount);
},
uploadDisabled() {
return this.disabled || !this.hasFiles;
},
cancelDisabled() {
return this.disabled || !this.hasFiles;
}
},
components: {

50
src/views/fileupload/FileUploadDoc.vue
View File

@ -40,22 +40,37 @@ import FileUpload from 'primevue/fileupload';
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</CodeHighlight>
<h5>File Size</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
<h5>File Size and File Linit</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" /&gt;
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
</CodeHighlight>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> option. In messages, {0} placeholder refers to the filename and in detail message, the file size.</p>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
<ul>
<li>
invalidFileSizeMessage: '{0}: Invalid file size, file size should be smaller than {1}.'
invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'
</li>
<li>
invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'
</li>
</ul>
<h5>Request Customization</h5>
<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
<h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<CodeHighlight>
&lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
</CodeHighlight>
<CodeHighlight lang="javascript">
myUploader(event) {
//event.files == files to upload
}
</CodeHighlight>
<h5>Empty Template</h5>
<p>When there is no file selected, you may use the empty slot to display content.</p>
<CodeHighlight>
@ -130,7 +145,19 @@ import FileUpload from 'primevue/fileupload';
<td>invalidFileSizeMessage</td>
<td>string</td>
<td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
<td>Summary message of the invalid fize size.</td>
<td>Message of the invalid fize size.</td>
</tr>
<tr>
<td>invalidFileLimitMessage</td>
<td>string</td>
<td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
<td>Message to display when number of files to be uploaded exceeeds the limit.</td>
</tr>
<tr>
<td>fileLimit</td>
<td>number</td>
<td>null</td>
<td>Maximum number of files that can be uploaded.</td>
</tr>
<tr>
<td>withCredentials</td>
@ -161,6 +188,12 @@ import FileUpload from 'primevue/fileupload';
<td>string</td>
<td>Cancel</td>
<td>Label of the cancel button.</td>
</tr>
<tr>
<td>customUpload</td>
<td>boolean</td>
<td>false</td>
<td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
</tr>
</tbody>
</table>
@ -220,6 +253,11 @@ import FileUpload from 'primevue/fileupload';
event.progress: Calculated progress value.</td>
<td>Callback to invoke when files are selected.</td>
</tr>
<tr>
<td>uploader</td>
<td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td>
</tr>
</tbody>
</table>
</div>