It’ll be great if we could have a feature to paste screenshots. I got it to work for me by editing UploadFileDropzone.vue .
<template>
<div>
<input
v-show="false"
ref="file"
type="file"
multiple
@change="$emit('input', $event)"
/>
<div
class="upload-files__dropzone"
:class="{ 'upload-files__dropzone--dragging': dragging }"
@click.prevent="$refs.file.click($event)"
@drop.prevent="onDrop($event)"
@dragover.prevent
@dragenter.prevent="dragging = true"
@dragleave.prevent="dragging = false"
>
<div class="upload-files__dropzone-content">
<i class="upload-files__dropzone-icon fas fa-cloud-upload-alt"></i>
<div class="upload-files__dropzone-text">
<template v-if="dragging"
>{{ $t('uploadFileUserFileUpload.drop') }}
</template>
<template v-else>{{
$t('uploadFileUserFileUpload.clickOrDrop')
}}</template>
</div>
</div>
</div>
<div class="upload-files__paste-zone">
<div class="upload-files__paste-zone-content">
<span>{{ $t('uploadFileUserFileUpload.pasteZone') }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UploadFileDropzone',
data() {
return {
dragging: false,
};
},
mounted() {
window.addEventListener('paste', this.onPaste);
},
beforeUnmount() {
window.removeEventListener('paste', this.onPaste);
},
methods: {
onDrop(event) {
this.dragging = false;
this.$emit('input', event);
},
onPaste(event) {
if (event.clipboardData && event.clipboardData.items) {
const items = event.clipboardData.items;
const files = [];
for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'file') {
files.push(items[i].getAsFile());
}
}
if (files.length > 0) {
event.preventDefault();
this.$emit('input', { target: { files } });
}
}
},
},
};
</script>
<style scoped>
.upload-files__paste-zone {
border: 1px dashed #ccc;
border-radius: 4px;
padding: 15px;
text-align: center;
margin-top: 15px;
}
.upload-files__paste-zone-content {
display: inline-block;
vertical-align: middle;
}
.upload-files__paste-zone-content span {
font-size: 18px;
font-weight: bold;
color: #666;
}
</style>