fix: fix input-file dragged file receiving required error

This commit is contained in:
tglide
2023-04-19 14:42:14 +01:00
parent 420e012a43
commit 4899720802
3 changed files with 27 additions and 14 deletions
+4 -4
View File
@@ -8,7 +8,7 @@
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/console": "0.1.0",
"@appwrite.io/pink": "^0.0.6-rc.10",
"@appwrite.io/pink": "^0.0.6-rc.11",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
@@ -156,9 +156,9 @@
}
},
"node_modules/@appwrite.io/pink": {
"version": "0.0.6-rc.10",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.10.tgz",
"integrity": "sha512-mhpgjQVfQvghItgcCzsHN0Ynn4U9JNg8HlSJ+HVDUi/bNHxmlm7XdNJE6s65LMJ6LfepROn6zZMHquANvGfNDg==",
"version": "0.0.6-rc.11",
"resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.11.tgz",
"integrity": "sha512-wHuWZM1SbBV7GQymBcBGDgtN5teu2OeMl9vB+IM6Ctg+Jkqjlc8QyO8Ef6Om8EFuSJCEzxCugMQPM0Ohtt/V2g==",
"dependencies": {
"@appwrite.io/pink-icons": "*",
"normalize.css": "^8.0.1",
+1 -1
View File
@@ -20,7 +20,7 @@
"dependencies": {
"@analytics/google-analytics": "^1.0.5",
"@appwrite.io/console": "0.1.0",
"@appwrite.io/pink": "^0.0.6-rc.10",
"@appwrite.io/pink": "^0.0.6-rc.11",
"@popperjs/core": "^2.11.6",
"@sentry/svelte": "^7.44.2",
"@sentry/tracing": "^7.44.2",
+22 -9
View File
@@ -1,11 +1,12 @@
<script lang="ts">
import { Trim } from '$lib/components';
import { humanFileSize } from '$lib/helpers/sizeConvertion';
import { onMount } from 'svelte';
import { Helper } from '.';
export let label: string = null;
export let files: FileList;
export let list = new DataTransfer();
export let allowedFileExtensions: string[] = [];
export let maxSize: number = null;
export let required = false;
@@ -14,16 +15,24 @@
let input: HTMLInputElement;
let hovering = false;
function setFiles(value: FileList) {
files = value;
input.files = value;
}
function resetFiles() {
setFiles(new DataTransfer().files);
}
function dropHandler(ev: DragEvent) {
ev.dataTransfer.dropEffect = 'move';
hovering = false;
if (ev.dataTransfer.items) {
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
list.items.clear();
list.items.add(ev.dataTransfer.items[i].getAsFile());
files = list.files;
}
if (!ev.dataTransfer.items) return;
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
setFiles(dataTransfer.files);
}
}
}
@@ -47,6 +56,10 @@
}
$: fileArray = files?.length ? Array.from(files) : [];
onMount(() => {
setFiles(files);
});
</script>
<input
@@ -123,7 +136,7 @@
{fileSize.value + fileSize.unit}
</span>
<button
on:click={() => (files = null)}
on:click={resetFiles}
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
aria-label="remove file"