Add uploader
parent
ff4646598f
commit
aeddf1c9d6
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { fetcher, request, listPhotos } from './http.js';
|
||||
import Gallery from './Gallery.svelte';
|
||||
import Uploader from './Uploader.svelte';
|
||||
|
||||
async function getMetadataTitle() {
|
||||
const resp = await fetcher(request('GET', 'metadata/title'));
|
||||
|
@ -49,6 +50,8 @@
|
|||
{/await}
|
||||
</header>
|
||||
|
||||
<Uploader />
|
||||
|
||||
{#await photos then photos}
|
||||
<Gallery {photos} />
|
||||
{:catch error}
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
let isdragenter = false;
|
||||
|
||||
function dragenter(event) {
|
||||
isdragenter = true;
|
||||
}
|
||||
function dragleave(event) {
|
||||
isdragenter = false;
|
||||
}
|
||||
function dragover(event) {
|
||||
// Do nothing
|
||||
}
|
||||
function drop(event) {
|
||||
console.log(event.dataTransfer.items);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div on:dragenter={dragenter} on:dragleave={dragleave} on:dragover|preventDefault={dragover} on:drop|preventDefault={drop}>
|
||||
<div class="instructions" class:isdragenter>
|
||||
Drop photos here
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.instructions {
|
||||
margin: calc(var(--spacing) * 2);
|
||||
padding: 1rem;
|
||||
|
||||
border: 2px dashed #000;
|
||||
border-radius: 0.5rem;
|
||||
opacity: 0.333;
|
||||
|
||||
text-align: center;
|
||||
font-weight: 550;
|
||||
pointer-events: none;
|
||||
}
|
||||
.instructions.isdragenter {
|
||||
opacity: 0.666;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- vim: set ft=html: -->
|
Loading…
Reference in New Issue