Create Dropzone
This commit is contained in:
parent
5f8b7415a7
commit
e0319aa75d
2 changed files with 66 additions and 50 deletions
63
src/lib/Dropzone.svelte
Normal file
63
src/lib/Dropzone.svelte
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
<script>
|
||||||
|
export let files;
|
||||||
|
export let acceptedFiles;
|
||||||
|
export let onKeydown;
|
||||||
|
export let onClick;
|
||||||
|
export let onDrop;
|
||||||
|
export let onChange;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
|
<div
|
||||||
|
id="dropzone"
|
||||||
|
tabindex={0}
|
||||||
|
on:keydown={onKeydown}
|
||||||
|
on:click={onClick}
|
||||||
|
on:dragover|preventDefault|stopPropagation
|
||||||
|
on:drop|preventDefault|stopPropagation={onDrop}
|
||||||
|
>
|
||||||
|
<label id="file-label" for="file-input"
|
||||||
|
>Drag and drop files here or click to upload.</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="file-input"
|
||||||
|
type="file"
|
||||||
|
name="files[]"
|
||||||
|
accept={acceptedFiles.join(",")}
|
||||||
|
multiple
|
||||||
|
on:change={onChange}
|
||||||
|
bind:files
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#dropzone {
|
||||||
|
display: flex;
|
||||||
|
height: 100px;
|
||||||
|
width: 500px;
|
||||||
|
border: 5px dotted black;
|
||||||
|
padding: 15px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-label {
|
||||||
|
z-index: -1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dropzone:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 5px dotted #05345f;
|
||||||
|
color: #05345f;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-device-width: 812px) {
|
||||||
|
#dropzone {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import CardList from "./CardList.svelte";
|
import CardList from "./CardList.svelte";
|
||||||
|
import Dropzone from "./Dropzone.svelte";
|
||||||
import FileList from "./FileList.svelte";
|
import FileList from "./FileList.svelte";
|
||||||
|
|
||||||
let files;
|
let files;
|
||||||
|
@ -58,28 +59,8 @@
|
||||||
<strong>{acceptedFiles.join(",")}</strong>.
|
<strong>{acceptedFiles.join(",")}</strong>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
<Dropzone {files} {acceptedFiles} {onKeydown} {onClick} {onDrop} {onChange} />
|
||||||
<div
|
|
||||||
id="dropzone"
|
|
||||||
tabindex={0}
|
|
||||||
on:keydown={onKeydown}
|
|
||||||
on:click={onClick}
|
|
||||||
on:dragover|preventDefault|stopPropagation
|
|
||||||
on:drop|preventDefault|stopPropagation={onDrop}
|
|
||||||
>
|
|
||||||
<label id="file-label" for="file-input"
|
|
||||||
>Drag and drop files here or click to upload.</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="file-input"
|
|
||||||
type="file"
|
|
||||||
name="files[]"
|
|
||||||
accept={acceptedFiles.join(",")}
|
|
||||||
multiple
|
|
||||||
on:change={onChange}
|
|
||||||
bind:files
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<input type="submit" value="Render files" />
|
<input type="submit" value="Render files" />
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
@ -90,37 +71,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#dropzone {
|
|
||||||
display: flex;
|
|
||||||
height: 100px;
|
|
||||||
width: 500px;
|
|
||||||
border: 5px dotted black;
|
|
||||||
padding: 15px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#file-label {
|
|
||||||
z-index: -1;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
#file-input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dropzone:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 5px dotted #05345f;
|
|
||||||
color: #05345f;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-device-width: 812px) {
|
@media only screen and (max-device-width: 812px) {
|
||||||
#form {
|
#form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropzone {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue