FileUpload upload file Nuxt updates
parent
3c4f5d1ed8
commit
f2f6365871
|
@ -18,7 +18,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<p>Drag and drop files to here to upload.</p>
|
<p>Drag and drop files to here to upload.</p>
|
||||||
</template>
|
</template>
|
||||||
|
@ -28,7 +28,7 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<p>Drag and drop files to here to upload.</p>
|
<p>Drag and drop files to here to upload.</p>
|
||||||
</template>
|
</template>
|
||||||
|
@ -50,7 +50,7 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<p>Drag and drop files to here to upload.</p>
|
<p>Drag and drop files to here to upload.</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -14,32 +14,32 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
onUpload() {
|
onUpload() {
|
||||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
<\/script>
|
<\/script>
|
||||||
`,
|
`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -47,7 +47,7 @@ import { useToast } from "primevue/usetoast";
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
|
||||||
const onUpload = () => {
|
const onUpload = () => {
|
||||||
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||||
};
|
};
|
||||||
<\/script>
|
<\/script>
|
||||||
`
|
`
|
||||||
|
|
|
@ -14,13 +14,13 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload"accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload"accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="/api/upload"accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Uploader UI can be customized with templating.</p>
|
<p>Uploader UI can be customized with templating.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
||||||
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
||||||
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -67,7 +67,7 @@ export default {
|
||||||
totalSizePercent: 0,
|
totalSizePercent: 0,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
||||||
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
||||||
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -123,7 +123,7 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
||||||
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
||||||
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -232,7 +232,7 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toast />
|
<Toast />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
<FileUpload name="demo[]" url="/api/upload" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
|
||||||
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
|
||||||
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
|
Loading…
Reference in New Issue