matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug when editing submissions - file input (#357)

This commit is contained in:
formsdev 2024-03-22 13:34:18 +05:30 committed by GitHub
parent 31e5624aec
commit 0fe038d8c3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
client/components/forms/FileInput.vue
View File

@ -1,24 +1,16 @@
<template>
<input-wrapper
v-bind="inputWrapperProps"
>
<input-wrapper v-bind="inputWrapperProps">
<template #label>
<slot name="label" />
</template>
<div class="flex w-full items-center justify-center transition-colors duration-40"
:class="[{'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
<div class="flex w-full items-center justify-center transition-colors duration-40" :class="[{
'!cursor-not-allowed': disabled, 'cursor-pointer': !disabled,
[theme.fileInput.inputHover.light + ' dark:' + theme.fileInput.inputHover.dark]: uploadDragoverEvent,
['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading}, theme.fileInput.input]"
@dragover.prevent="uploadDragoverEvent=true"
@dragleave.prevent="uploadDragoverEvent=false"
@drop.prevent="onUploadDropEvent"
@click="openFileUpload"
>
<div
v-if="loading"
class="text-gray-600 dark:text-gray-400"
>
['hover:' + theme.fileInput.inputHover.light + ' dark:hover:' + theme.fileInput.inputHover.dark]: !loading
}, theme.fileInput.input]" @dragover.prevent="uploadDragoverEvent = true"
@dragleave.prevent="uploadDragoverEvent = false" @drop.prevent="onUploadDropEvent" @click="openFileUpload">
<div v-if="loading" class="text-gray-600 dark:text-gray-400">
<Loader class="mx-auto h-6 w-6" />
<p class="mt-2 text-center text-sm text-gray-500">
Uploading your file...
@ -26,32 +18,18 @@
</div>
<template v-else>
<div class="text-center">
<input
ref="actual-input"
class="hidden"
:multiple="multiple"
type="file"
:name="name"
:accept="acceptExtensions"
@change="manualFileUpload"
>
<input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name"
:accept="acceptExtensions" @change="manualFileUpload">
<div v-if="files.length" class="flex flex-wrap items-center justify-center gap-4">
<uploaded-file
v-for="file in files"
:key="file.url"
:file="file"
:theme="theme"
@remove="clearFile(file)"
/>
<uploaded-file v-for="file in files" :key="file.url" :file="file" :theme="theme"
@remove="clearFile(file)" />
</div>
<template v-else>
<div class="text-gray-500 w-full flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6"
>
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
</div>
@ -225,6 +203,9 @@ export default {
})
},
async getFileFromUrl(url, defaultType = 'image/jpeg') {
if (typeof url === 'object') {
url = url?.file_url
}
const response = await fetch(url)
const data = await response.blob()
const name = url.replace(/^.*(\\|\/|\:)/, '')