pull/4683/head
Cagatay Civici 2023-10-23 17:30:43 +03:00
commit 8ef699e955
6 changed files with 35 additions and 29 deletions

View File

@ -3,7 +3,7 @@
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
</DocSectionText>
<div class="card">
<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>
<p>Drag and drop files to here to upload.</p>
</template>
@ -18,7 +18,7 @@ export default {
return {
code: {
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>
<p>Drag and drop files to here to upload.</p>
</template>
@ -28,7 +28,7 @@ export default {
<template>
<div class="card">
<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>
<p>Drag and drop files to here to upload.</p>
</template>
@ -50,7 +50,7 @@ export default {
<template>
<div class="card">
<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>
<p>Drag and drop files to here to upload.</p>
</template>

View File

@ -3,7 +3,7 @@
<p>When <i>auto</i> property is enabled, a file gets uploaded instantly after selection.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<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>
<DocSectionCode :code="code" />
</template>
@ -14,32 +14,32 @@ export default {
return {
code: {
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: `
<template>
<div class="card flex justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
<div class="card flex justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</template>
<script>
export default {
methods: {
onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
}
}
methods: {
onUpload() {
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
<div class="card flex justify-content-center">
<Toast />
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</template>
<script setup>
@ -47,7 +47,7 @@ import { useToast } from "primevue/usetoast";
const toast = useToast();
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>
`

View File

@ -3,7 +3,7 @@
<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="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,13 +14,13 @@ export default {
return {
code: {
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: `
<template>
<div class="card flex justify-content-center">
<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>
</template>
@ -38,7 +38,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<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>
</template>

View File

@ -3,7 +3,7 @@
<p>Uploader UI can be customized with templating.</p>
</DocSectionText>
<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 }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
@ -67,7 +67,7 @@ export default {
totalSizePercent: 0,
code: {
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 }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
@ -123,7 +123,7 @@ export default {
<template>
<div class="card">
<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 }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">
@ -232,7 +232,7 @@ export default {
<template>
<div class="card">
<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 }">
<div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
<div class="flex gap-2">

View File

@ -1 +0,0 @@
<?php echo '<p>Fake Upload Process</p>'; ?>

7
server/api/upload.js Normal file
View File

@ -0,0 +1,7 @@
export default defineEventHandler((event) => {
return {
headers: { 'Access-Control-Allow-Origin': '*' },
statusCode: 200,
statusMessage: 'Fake Upload Process'
};
});