pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Centralize drag-and-drop upload code

Browse Source
This commit is contained in:
Wim Brand
2024-09-10 18:51:13 +02:00
parent 75b6c304b2
commit c5ddc20ce2
13 changed files with 219 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
svelte/src/user_home/dashboard/CardFSHome.svelte
View File

@@ -4,7 +4,8 @@ import { FSNavigator } from "src/filesystem/FSNavigator.ts"
import { fs_encode_path, fs_node_icon } from "src/filesystem/FilesystemAPI.ts";
import Button from "src/layout/Button.svelte";
import CreateDirectory from "src/filesystem/filemanager/CreateDirectory.svelte";
import UploadWidget from "src/filesystem/upload_widget/UploadWidget.svelte";
import FSUploadWidget from "src/filesystem/upload_widget/FSUploadWidget.svelte";
import { drop_target } from "src/util/DropTarget.ts"
const nav = new FSNavigator(false)
let upload_widget
@@ -14,68 +15,73 @@ var creating_dir = false
onMount(() => nav.navigate("/me", false))
</script>
<div class="toolbar">
{#if $nav.permissions.update}
<div class="wrapper" use:drop_target={{upload: (files) => upload_widget.upload_files(files)}}>
<div class="toolbar">
{#if $nav.permissions.update}
<Button
click={() => upload_widget.pick_files()}
icon="cloud_upload"
title="Upload files to this directory"
label="Upload files"
/>
<Button
click={() => {creating_dir = !creating_dir}}
highlight={creating_dir}
icon="create_new_folder"
title="Create folder"
label="Create folder"
/>
{/if}
<div class="toolbar_spacer"></div>
<Button
click={() => upload_widget.pick_files()}
icon="cloud_upload"
title="Upload files to this directory"
label="Upload files"
click={() => {show_hidden = !show_hidden}}
highlight={show_hidden}
icon={show_hidden ? "visibility_off" : "visibility"}
title="Show hidden files and directories"
/>
<Button
click={() => {creating_dir = !creating_dir}}
highlight={creating_dir}
icon="create_new_folder"
title="Create folder"
label="Create folder"
click={() => nav.reload()}
icon="refresh"
title="Refresh directory listing"
/>
</div>
{#if creating_dir}
<CreateDirectory nav={nav} />
{/if}
<div class="toolbar_spacer"></div>
<div class="directory">
{#each $nav.children as child (child.path)}
<a
href={"/d"+fs_encode_path(child.path)}
class="node"
class:node_selected={child.fm_selected}
class:hidden={child.name.startsWith(".")}
>
<img src={fs_node_icon(child, 64, 64)} class="node_icon" alt="icon"/>
<Button
click={() => {show_hidden = !show_hidden}}
highlight={show_hidden}
icon={show_hidden ? "visibility_off" : "visibility"}
title="Show hidden files and directories"
/>
<Button
click={() => nav.reload()}
icon="refresh"
title="Refresh directory listing"
/>
<div class="node_name">
{child.name}
</div>
{#if child.id}
<a href="/d/{child.id}" class="button action_button">
<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
</a>
{/if}
</a>
{/each}
</div>
</div>
{#if creating_dir}
<CreateDirectory nav={nav} />
{/if}
<div class="directory">
{#each $nav.children as child (child.path)}
<a
href={"/d"+fs_encode_path(child.path)}
class="node"
class:node_selected={child.fm_selected}
class:hidden={child.name.startsWith(".")}
>
<img src={fs_node_icon(child, 64, 64)} class="node_icon" alt="icon"/>
<div class="node_name">
{child.name}
</div>
{#if child.id}
<a href="/d/{child.id}" class="button action_button">
<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
</a>
{/if}
</a>
{/each}
</div>
<UploadWidget nav={nav} bind:this={upload_widget} drop_upload />
<FSUploadWidget nav={nav} bind:this={upload_widget} />
<style>
.wrapper {
border-radius: 4px;
}
.toolbar {
display: flex;
flex-direction: row;

30
svelte/src/user_home/dashboard/CardUpload.svelte
View File

@@ -1,25 +1,31 @@
<script>
import UploadLib from "./UploadLib.svelte";
import { drop_target } from "src/util/DropTarget.ts"
let upload_widget
</script>
<div class="upload_buttons">
<button on:click={() => upload_widget.pick_files() } class="big_button button_highlight">
<i class="icon small">cloud_upload</i>
<span><u>U</u>pload Files</span>
</button>
<a href="/t" id="upload_text_button" class="button big_button button_highlight">
<i class="icon small">text_fields</i>
<span>Upload <u>T</u>ext</span>
</a>
</div>
<div class="wrapper" use:drop_target={{upload: (files) => upload_widget.upload_files(files)}}>
<div class="upload_buttons">
<button on:click={() => upload_widget.pick_files() } class="big_button button_highlight">
<i class="icon small">cloud_upload</i>
<span><u>U</u>pload Files</span>
</button>
<a href="/t" id="upload_text_button" class="button big_button button_highlight">
<i class="icon small">text_fields</i>
<span>Upload <u>T</u>ext</span>
</a>
</div>
<div class="center">
<UploadLib bind:this={upload_widget}/>
<div class="center">
<UploadLib bind:this={upload_widget}/>
</div>
</div>
<style>
.wrapper {
border-radius: 4px;
}
.center {
text-align: center;
}

26
svelte/src/user_home/dashboard/UploadLib.svelte
View File

@@ -17,15 +17,6 @@ const file_input_change = (event) => {
// This resets the file input field
file_input_field.nodeValue = ""
}
let dragging = false
const drop = (e) => {
dragging = false;
if (e.dataTransfer && e.dataTransfer.items.length > 0) {
e.preventDefault()
e.stopPropagation()
upload_files(e.dataTransfer.files)
}
}
const paste = (e) => {
if (e.clipboardData.files[0]) {
e.preventDefault();
@@ -39,7 +30,7 @@ let upload_queue = []
let state = "idle" // idle, uploading, finished
let upload_stats
const upload_files = async (files) => {
export const upload_files = async (files) => {
if (files.length === 0) {
return
}
@@ -88,7 +79,6 @@ const start_upload = () => {
if (active_uploads === 0 && finished_count != 0) {
state = "finished"
upload_stats.finish()
// uploads_finished()
} else {
state = "uploading"
upload_stats.start()
@@ -180,17 +170,9 @@ const keydown = (e) => {
case "m": share_tumblr(); break
}
}
</script>
<svelte:window
on:dragover|preventDefault|stopPropagation={() => { dragging = true }}
on:dragenter|preventDefault|stopPropagation={() => { dragging = true }}
on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
on:drop={drop}
on:paste={paste}
on:keydown={keydown}
on:beforeunload={leave_confirmation} />
<svelte:window on:paste={paste} on:keydown={keydown} on:beforeunload={leave_confirmation} />
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
@@ -209,10 +191,6 @@ const keydown = (e) => {
</div>
{/if}
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Drop your files to upload them
</div>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}