48 lines
1.5 KiB
Vue
Executable File
48 lines
1.5 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>FileUpload</h1>
|
|
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<h5>Advanced</h5>
|
|
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
|
<template #empty>
|
|
<p>Drag and drop files to here to upload.</p>
|
|
</template>
|
|
</FileUpload>
|
|
|
|
<h5>Basic</h5>
|
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
|
|
|
<h5>Basic with Auto</h5>
|
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
|
</div>
|
|
|
|
<FileUploadDoc/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FileUploadDoc from './FileUploadDoc';
|
|
|
|
export default {
|
|
methods: {
|
|
onUpload() {
|
|
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
|
|
}
|
|
},
|
|
components: {
|
|
'FileUploadDoc': FileUploadDoc
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
p {
|
|
margin: 0;
|
|
}
|
|
</style> |