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

copy and paste support for file and image upload (#224)

This commit is contained in:
formsdev 2023-10-20 14:24:21 +05:30 committed by GitHub
parent e6905b7bb4
commit c470791282
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,9 +115,9 @@
class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out" class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out"
@click="openFileUpload" @click="openFileUpload"
> >
Upload {{ multiple ? 'file(s)' : 'a file' }} Upload {{ multiple ? 'file(s)' : 'a file' }},
</button> </button>
or drag and drop use drag and drop or paste it
</p> </p>
<p class="mt-1 text-xs text-gray-500"> <p class="mt-1 text-xs text-gray-500">
Up to {{ mbLimit }}mb Up to {{ mbLimit }}mb
@ -198,6 +198,10 @@ export default {
if(this.disabled){ if(this.disabled){
this.showUploadModal = false this.showUploadModal = false
} }
document.removeEventListener('paste', this.onUploadPasteEvent)
if(this.showUploadModal){
document.addEventListener("paste", this.onUploadPasteEvent)
}
} }
}, },
files: { files: {
@ -237,11 +241,15 @@ export default {
onUploadDropEvent (e) { onUploadDropEvent (e) {
this.uploadDragoverEvent = false this.uploadDragoverEvent = false
this.uploadDragoverTracking = false this.uploadDragoverTracking = false
this.droppedFiles(e) this.droppedFiles(e.dataTransfer.files)
}, },
droppedFiles (e) { onUploadPasteEvent (e) {
const droppedFiles = e.dataTransfer.files if(!this.showUploadModal) return
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e.clipboardData.files)
},
droppedFiles (droppedFiles) {
if (!droppedFiles) return if (!droppedFiles) return
for (let i = 0; i < droppedFiles.length; i++) { for (let i = 0; i < droppedFiles.length; i++) {

27
resources/js/components/forms/ImageInput.vue
View File

@ -86,9 +86,9 @@
class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out" class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out"
@click="openFileUpload" @click="openFileUpload"
> >
Upload your image Upload your image,
</button> </button>
or drag and drop use drag and drop or paste it
</p> </p>
<p class="mt-1 text-xs text-gray-500"> <p class="mt-1 text-xs text-gray-500">
.jpg, .jpeg, .png, .bmp, .gif, .svg up to 5mb .jpg, .jpeg, .png, .bmp, .gif, .svg up to 5mb
@ -130,6 +130,17 @@ export default {
} }
}, },
watch: {
showUploadModal: {
handler (val) {
document.removeEventListener('paste', this.onUploadPasteEvent)
if(this.showUploadModal){
document.addEventListener("paste", this.onUploadPasteEvent)
}
}
}
},
methods: { methods: {
clearUrl () { clearUrl () {
this.$set(this.form, this.name, null) this.$set(this.form, this.name, null)
@ -141,11 +152,15 @@ export default {
onUploadDropEvent (e) { onUploadDropEvent (e) {
this.uploadDragoverEvent = false this.uploadDragoverEvent = false
this.uploadDragoverTracking = false this.uploadDragoverTracking = false
this.droppedFiles(e) this.droppedFiles(e.dataTransfer.files)
}, },
droppedFiles (e) { onUploadPasteEvent (e) {
const droppedFiles = e.dataTransfer.files if(!this.showUploadModal) return
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e.clipboardData.files)
},
droppedFiles (droppedFiles) {
if (!droppedFiles) return if (!droppedFiles) return
this.file = droppedFiles[0] this.file = droppedFiles[0]