fix(webui): drop poster from browser images

This commit is contained in:
Gauthier Roebroeck 2022-01-25 16:19:01 +08:00
parent 88357a589e
commit 7cb2a87a7f
2 changed files with 19 additions and 6 deletions

View file

@ -7,16 +7,22 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import {getFileFromUrl} from '@/functions/file'
export default Vue.extend({ export default Vue.extend({
name: 'DropZone', name: 'DropZone',
methods: { methods: {
dropHandler(event: Event) { async dropHandler(event: Event) {
if (event instanceof DragEvent && event.dataTransfer) { if (event instanceof DragEvent && event.dataTransfer) {
const droppedFiles = event.dataTransfer.files if (event.dataTransfer.files.length > 0)
if (!droppedFiles) return this.$emit('on-input-change', Array.from(event.dataTransfer.files))
else {
this.$emit('on-input-change', Array.from(droppedFiles)) const url = event.dataTransfer.getData('text/uri-list')
if (url) {
const file = await getFileFromUrl(url)
this.$emit('on-input-change', [file])
}
}
} }
if (event.target instanceof HTMLInputElement && event.target.files) { if (event.target instanceof HTMLInputElement && event.target.files) {
const selectedFiles = event.target.files const selectedFiles = event.target.files
@ -34,7 +40,7 @@ export default Vue.extend({
<style scoped> <style scoped>
.drop-zone { .drop-zone {
background:repeating-linear-gradient( background: repeating-linear-gradient(
135deg, 135deg,
var(--v-base-lighten1), var(--v-base-lighten1),
var(--v-base-lighten1) 20px, var(--v-base-lighten1) 20px,

View file

@ -0,0 +1,7 @@
export async function getFileFromUrl(url: string, name: string = url, defaultType = 'image/jpeg') {
const response = await fetch(url)
const data = await response.blob()
return new File([data], name, {
type: data.type || defaultType,
})
}