Add uploader
parent
ff4646598f
commit
aeddf1c9d6
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { fetcher, request, listPhotos } from './http.js';
|
import { fetcher, request, listPhotos } from './http.js';
|
||||||
import Gallery from './Gallery.svelte';
|
import Gallery from './Gallery.svelte';
|
||||||
|
import Uploader from './Uploader.svelte';
|
||||||
|
|
||||||
async function getMetadataTitle() {
|
async function getMetadataTitle() {
|
||||||
const resp = await fetcher(request('GET', 'metadata/title'));
|
const resp = await fetcher(request('GET', 'metadata/title'));
|
||||||
|
@ -49,6 +50,8 @@
|
||||||
{/await}
|
{/await}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<Uploader />
|
||||||
|
|
||||||
{#await photos then photos}
|
{#await photos then photos}
|
||||||
<Gallery {photos} />
|
<Gallery {photos} />
|
||||||
{:catch error}
|
{: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