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"
@click="openFileUpload"
>
Upload {{ multiple ? 'file(s)' : 'a file' }}
Upload {{ multiple ? 'file(s)' : 'a file' }},
</button>
or drag and drop
use drag and drop or paste it
</p>
<p class="mt-1 text-xs text-gray-500">
Up to {{ mbLimit }}mb
@ -198,6 +198,10 @@ export default {
if(this.disabled){
this.showUploadModal = false
}
document.removeEventListener('paste', this.onUploadPasteEvent)
if(this.showUploadModal){
document.addEventListener("paste", this.onUploadPasteEvent)
}
}
},
files: {
@ -237,11 +241,15 @@ export default {
onUploadDropEvent (e) {
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e)
this.droppedFiles(e.dataTransfer.files)
},
droppedFiles (e) {
const droppedFiles = e.dataTransfer.files
onUploadPasteEvent (e) {
if(!this.showUploadModal) return
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e.clipboardData.files)
},
droppedFiles (droppedFiles) {
if (!droppedFiles) return
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"
@click="openFileUpload"
>
Upload your image
Upload your image,
</button>
or drag and drop
use drag and drop or paste it
</p>
<p class="mt-1 text-xs text-gray-500">
.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: {
clearUrl () {
this.$set(this.form, this.name, null)
@ -141,11 +152,15 @@ export default {
onUploadDropEvent (e) {
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e)
this.droppedFiles(e.dataTransfer.files)
},
droppedFiles (e) {
const droppedFiles = e.dataTransfer.files
onUploadPasteEvent (e) {
if(!this.showUploadModal) return
this.uploadDragoverEvent = false
this.uploadDragoverTracking = false
this.droppedFiles(e.clipboardData.files)
},
droppedFiles (droppedFiles) {
if (!droppedFiles) return
this.file = droppedFiles[0]