village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

File upload fixes (#93) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala 2023-02-22 21:30:07 +05:30 committed by GitHub
parent 47964ec565
commit 29c09d9ea2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Service/Storage/StorageFileNameParser.php
View File

@ -30,6 +30,7 @@ class StorageFileNameParser
{ {
if ($this->fileName && $this->extension) { if ($this->fileName && $this->extension) {
$fileName = substr($this->fileName, 0, 50).'_'.$this->uuid.'.'.$this->extension; $fileName = substr($this->fileName, 0, 50).'_'.$this->uuid.'.'.$this->extension;
$fileName = preg_replace('#\p{C}+#u', '', $fileName); // avoid CorruptedPathDetected exceptions
return mb_convert_encoding($fileName, 'UTF-8', 'UTF-8'); return mb_convert_encoding($fileName, 'UTF-8', 'UTF-8');
} }
return $this->uuid; return $this->uuid;

55
resources/js/components/forms/FileInput.vue
View File

@ -8,11 +8,15 @@
</label> </label>
<span class="inline-block w-full rounded-md shadow-sm"> <span class="inline-block w-full rounded-md shadow-sm">
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button" <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
class="flex cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]" class="cursor-pointer relative flex"
:class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]"
:style="inputStyle" @click.self="showUploadModal=true" :style="inputStyle" @click.self="showUploadModal=true"
> >
<div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400 flex-grow" @click.prevent="showUploadModal=true"> <div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400 flex-grow truncate"
Upload {{ multiple?'file(s)':'a file' }} <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" @click.prevent="showUploadModal=true"
>
Upload {{ multiple ? 'file(s)' : 'a file' }} <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline"
fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@ -21,32 +25,38 @@
</svg> </svg>
</div> </div>
<template v-else> <template v-else>
<div class="flex-grow h-6 text-gray-600 dark:text-gray-400" @click.prevent="showUploadModal=true"> <div class="flex-grow h-6 text-gray-600 dark:text-gray-400 truncate" @click.prevent="showUploadModal=true">
<div class="truncate"> <div>
<p v-if="files.length==1"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2 -mt-1" fill="none" viewBox="0 0 24 24" <p v-if="files.length==1"><svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 inline mr-2 -mt-1" fill="none"
viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/> />
</svg>{{ files[0].file.name }}</p> </svg>{{ files[0].file.name }}</p>
<p v-else><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2 -mt-1" fill="none" viewBox="0 0 24 24" <p v-else><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2 -mt-1" fill="none"
viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/> />
</svg>{{ files.length }} files</p> </svg>{{ files.length }} file(s)</p>
</div> </div>
</div> </div>
<a href="#" v-if="files.length>0" class="hover:text-nt-blue" @click.prevent="clearAll" role="button"> <div v-if="files.length>0">
<a href="#" class="hover:text-nt-blue" role="button" @click.prevent="clearAll">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/> />
</svg></a> </svg>
</a>
</div>
</template> </template>
</button> </button>
</span> </span>
@ -86,8 +96,8 @@
/> />
<div class="relative z-20 text-center"> <div class="relative z-20 text-center">
<input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name" <input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name"
@change="manualFileUpload"
:accept="acceptExtensions" :accept="acceptExtensions"
@change="manualFileUpload"
> >
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-24 w-24 text-gray-200" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-24 w-24 text-gray-200" fill="none"
viewBox="0 0 24 24" stroke="currentColor" viewBox="0 0 24 24" stroke="currentColor"
@ -119,14 +129,17 @@
{{ file.file.name }} {{ file.file.name }}
</p> </p>
<div> <div>
<a href="#" class="text-gray-400 dark:text-gray-600 hover:text-nt-blue flex" @click.prevent="clearFile(index)" role="button"> <a href="#" class="text-gray-400 dark:text-gray-600 hover:text-nt-blue flex" role="button"
@click.prevent="clearFile(index)"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/> />
</svg></a> </svg>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -150,7 +163,7 @@ export default {
props: { props: {
multiple: { type: Boolean, default: true }, multiple: { type: Boolean, default: true },
mbLimit: { type: Number, default: 5 }, mbLimit: { type: Number, default: 5 },
accept: { type: String, default: "" } accept: { type: String, default: '' }
}, },
data: () => ({ data: () => ({
@ -168,11 +181,11 @@ export default {
}, },
acceptExtensions () { acceptExtensions () {
if (this.accept) { if (this.accept) {
return this.accept.split(",").map((i) => { return this.accept.split(',').map((i) => {
return "."+i.trim() return '.' + i.trim()
}).join(",") }).join(',')
} }
return "" return ''
} }
}, },
@ -209,9 +222,9 @@ export default {
if (!droppedFiles) return if (!droppedFiles) return
droppedFiles.forEach(file => { for (let i = 0; i < droppedFiles.length; i++) {
this.uploadFileToServer(file) this.uploadFileToServer(droppedFiles.item(i))
}) }
}, },
openFileUpload () { openFileUpload () {
this.$refs['actual-input'].click() this.$refs['actual-input'].click()