86 lines
1.7 KiB
Svelte
86 lines
1.7 KiB
Svelte
<script>
|
|
import { t } from '$lib/translations';
|
|
import upload from '$lib/assets/upload.svg';
|
|
|
|
export let files;
|
|
export let supportedFormats;
|
|
export let onKeydown;
|
|
export let onClick;
|
|
export let onDrop;
|
|
export let onChange;
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
<div
|
|
id="dropzone"
|
|
tabindex={0}
|
|
role="region"
|
|
on:keydown={onKeydown}
|
|
on:dragover|preventDefault|stopPropagation
|
|
on:drop|preventDefault|stopPropagation={onDrop}
|
|
>
|
|
<img src={upload} width="40" height="40" alt="Upload icon" />
|
|
<label id="file-label" for="file-input">{@html $t('viewer.dropzone')}</label>
|
|
<input
|
|
id="file-input"
|
|
type="file"
|
|
name="files[]"
|
|
accept={supportedFormats.join(',')}
|
|
multiple
|
|
on:change={onChange}
|
|
bind:this={files}
|
|
/>
|
|
<button on:click|preventDefault={onClick}>{$t('viewer.browse')}</button>
|
|
</div>
|
|
|
|
<style>
|
|
#dropzone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
border: 1px solid #d3dce6;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
padding: 15px;
|
|
z-index: 10;
|
|
}
|
|
|
|
#file-label {
|
|
z-index: -1;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#file-input {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
margin-top: 20px;
|
|
padding: 12px 24px;
|
|
background-color: #06345f;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
width: 60%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button:hover {
|
|
color: #fff;
|
|
background-color: #000;
|
|
}
|
|
|
|
@media only screen and (max-device-width: 812px) {
|
|
#dropzone {
|
|
width: 100%;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|