opnform/resources/js/components/forms/FileInput.vue

242 lines
7.2 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
<div :class="wrapperClass">
<label
v-if="label"
:class="[
theme.default.label,
{
'text-xs uppercase': uppercaseLabels,
'text-sm': !uppercaseLabels,
},
]"
2022-09-20 19:59:52 +00:00
>
{{ label }}
<span v-if="required" class="required-dot text-red-500">*</span>
2022-09-20 19:59:52 +00:00
</label>
<small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
<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"
2022-09-20 19:59:52 +00:00
>
<loader class="mx-auto h-6 w-6" />
<p class="mt-2 text-center text-sm text-gray-500">
Uploading your file...
</p>
</div>
<template v-else>
<div class="text-center">
<input
ref="actual-input"
class="hidden"
:multiple="multiple"
type="file"
:name="name"
:accept="acceptExtensions"
@change="manualFileUpload"
2022-09-20 19:59:52 +00:00
>
<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)"
2022-09-20 19:59:52 +00:00
/>
</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"
>
<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"
/>
</svg>
</div>
<p class="mt-2 text-sm text-gray-500 font-semibold select-none">
Click to choose {{ multiple ? 'file(s)' : 'a file' }} or drag here
</p>
<p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
Size limit: {{ mbLimit }}MB per file
</p>
</template>
</div>
</template>
</div>
<small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
<slot name="help"><span class="field-help" v-html="help" /></slot>
2022-09-20 19:59:52 +00:00
</small>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>
</template>
<script>
import axios from 'axios'
import inputMixin from '~/mixins/forms/input.js'
import UploadedFile from './components/UploadedFile.vue'
2022-09-20 19:59:52 +00:00
export default {
name: 'FileInput',
components: { UploadedFile },
2022-09-20 19:59:52 +00:00
mixins: [inputMixin],
props: {
multiple: { type: Boolean, default: true },
mbLimit: { type: Number, default: 5 },
accept: { type: String, default: '' },
moveToFormAssets: { type: Boolean, default: false }
2022-09-20 19:59:52 +00:00
},
data: () => ({
files: [],
uploadDragoverEvent: false,
loading: false
}),
computed: {
currentUrl () {
return this.form[this.name]
},
acceptExtensions () {
if (!this.accept) {
return null
2022-09-20 19:59:52 +00:00
}
return this.accept
.split(',')
.map((i) => {
return '.' + i.trim()
})
.join(',')
2022-09-20 19:59:52 +00:00
}
},
watch: {
files: {
deep: true,
handler (files) {
this.compVal = files.map((file) => file.url)
2022-09-20 19:59:52 +00:00
}
}
},
async created () {
if (typeof this.compVal === 'string' || this.compVal instanceof String) {
await this.getFileFromUrl(this.compVal).then((fileObj) => {
this.files = [{
file: fileObj,
url: this.compVal,
src: this.getFileSrc(fileObj)
}]
})
} else if (this.compVal && this.compVal.length > 0) {
const tmpFiles = []
for (let i = 0; i < this.compVal.length; i++) {
await this.getFileFromUrl(this.compVal[i]).then((fileObj) => {
tmpFiles.push({
file: fileObj,
url: this.compVal[i],
src: this.getFileSrc(fileObj)
})
})
}
this.files = tmpFiles
}
2022-09-20 19:59:52 +00:00
},
methods: {
clearAll () {
this.files = []
},
clearFile (index) {
this.files.splice(index, 1)
},
onUploadDropEvent (e) {
this.uploadDragoverEvent = false
this.droppedFiles(e.dataTransfer.files)
2022-09-20 19:59:52 +00:00
},
droppedFiles (droppedFiles) {
if (!droppedFiles || this.disabled) return
2022-09-20 19:59:52 +00:00
for (let i = 0; i < droppedFiles.length; i++) {
this.uploadFileToServer(droppedFiles.item(i))
}
2022-09-20 19:59:52 +00:00
},
openFileUpload () {
if (this.disabled) return
2022-09-20 19:59:52 +00:00
this.$refs['actual-input'].click()
},
manualFileUpload (e) {
2022-12-13 10:00:43 +00:00
const files = e.target.files
for (let i = 0; i < files.length; i++) {
this.uploadFileToServer(files.item(i))
}
2022-09-20 19:59:52 +00:00
},
uploadFileToServer (file) {
if (this.disabled) return
2022-09-20 19:59:52 +00:00
this.loading = true
this.storeFile(file)
.then((response) => {
if (!this.multiple) {
this.files = []
}
if (this.moveToFormAssets) {
// Move file to permanent storage for form assets
axios.post('/api/open/forms/assets/upload', {
type: 'files',
url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
}).then(moveFileResponse => {
this.files.push({
file: file,
url: moveFileResponse.data.url,
src: this.getFileSrc(file)
})
this.loading = false
}).catch((error) => {
this.loading = false
})
} else {
this.files.push({
file: file,
url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension,
src: this.getFileSrc(file)
})
this.loading = false
}
})
.catch((error) => {
this.clearAll()
this.loading = false
})
},
async getFileFromUrl (url, defaultType = 'image/jpeg') {
const response = await fetch(url)
const data = await response.blob()
const name = url.replace(/^.*(\\|\/|\:)/, '')
return new File([data], name, {
type: data.type || defaultType
})
},
getFileSrc (file) {
if (file.type && file.type.split('/')[0] === 'image') {
return URL.createObjectURL(file)
}
return null
2022-09-20 19:59:52 +00:00
}
}
}
</script>