vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

FileUpload basic doc updates

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-09 17:46:36 +03:00
parent 63d04f0788
commit e30ecebcea
3 changed files with 192 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

29
doc/fileupload/BasicDoc.vue
View file

@ -2,8 +2,9 @@
<DocSectionText v-bind="$attrs">
<p>FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<Button label="Upload" @click="upload" severity="secondary" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,19 +15,24 @@ export default {
return {
code: {
basic: `
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<Button label="Upload" @click="upload" severity="secondary" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<Button label="Upload" @click="upload" severity="secondary" />
</div>
</template>
<script>
export default {
methods: {
upload() {
this.$refs.fileupload.basicUpload();
},
onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
}
@ -36,15 +42,21 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex flex-column gap-4 align-items-center justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<Button label="Upload" @click="upload" severity="secondary" />
</div>
</template>
<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();
const fileupload = ref();
const upload = () => {
fileupload.value.basicUpload();
};
const onUpload = () => {
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
@ -55,6 +67,9 @@ const onUpload = () => {
};
},
methods: {
upload() {
this.$refs.fileupload.basicUpload();
},
onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
}