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

12
svelte/src/filesystem/Filesystem.svelte
View File

@@ -7,14 +7,14 @@ import Breadcrumbs from './Breadcrumbs.svelte';
import DetailsWindow from './DetailsWindow.svelte';
import FilePreview from './viewers/FilePreview.svelte';
import SearchView from './SearchView.svelte';
import UploadWidget from './upload_widget/UploadWidget.svelte';
import FSUploadWidget from './upload_widget/FSUploadWidget.svelte';
import { fs_path_url } from './FilesystemAPI';
import { branding_from_path } from './edit_window/Branding.js'
import Menu from './Menu.svelte';
import { FSNavigator } from "./FSNavigator"
import { writable } from 'svelte/store';
import TransferLimit from '../file_viewer/TransferLimit.svelte';
import { stats } from "src/util/StatsSocket.js"
import { css_from_path } from './edit_window/Branding';
let file_viewer
let file_preview
@@ -41,7 +41,7 @@ onMount(() => {
}
// Custom CSS rules for the whole viewer
document.documentElement.style = branding_from_path(nav.path)
document.documentElement.style = css_from_path(nav.path)
loading.set(false)
})
@@ -169,10 +169,10 @@ const search = async () => {
<FilePreview
bind:this={file_preview}
nav={nav}
upload_widget={upload_widget}
edit_window={edit_window}
on:open_sibling={e => nav.open_sibling(e.detail)}
on:download={download}
on:upload_picker={() => upload_widget.pick_files()}
/>
{:else if view === "search"}
<SearchView nav={nav} on:done={() => {view = "file"}} />
@@ -206,7 +206,9 @@ const search = async () => {
<EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
<UploadWidget nav={nav} bind:this={upload_widget} drop_upload />
<!-- This one is included at the highest level so uploads can keep running
even when the user navigates to a different directory -->
<FSUploadWidget nav={nav} bind:this={upload_widget} />
<LoadingIndicator loading={$loading}/>
</div>

6
svelte/src/filesystem/edit_window/Branding.js
View File

@@ -10,7 +10,7 @@ export const branding_from_path = path => {
add_styles(style, node.properties)
}
last_generated_style = style
return gen_css(style)
return style
}
// The last style which was generated is cached, when we don't have a complete
@@ -21,6 +21,10 @@ export const branding_from_node = node => {
return gen_css(last_generated_style)
}
export const css_from_path = path => {
return gen_css(branding_from_path(path))
}
const gen_css = style => {
return Object.entries(style).map(([key, value]) => `--${key}:${value}`).join(';');
}

15
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -1,15 +1,16 @@
<script>
import { fs_delete_all, fs_rename } from './../FilesystemAPI.ts'
import { createEventDispatcher, onMount } from 'svelte'
import { onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
import Button from '../../layout/Button.svelte';
import FileImporter from './FileImporter.svelte';
import { formatDate } from '../../util/Formatting.svelte';
let dispatch = createEventDispatcher()
import { drop_target } from "src/util/DropTarget.ts"
export let nav
export let upload_widget
export let edit_window
export let directory_view = ""
let large_icons = false
@@ -256,7 +257,13 @@ onMount(() => {
<svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
<div class="container">
<div
class="container"
use:drop_target={{
upload: (files) => upload_widget.upload_files(files),
shadow: "var(--highlight_color) 0 0 10px 2px inset",
}}
>
<div class="width_container">
{#if mode === "viewing"}
<div class="toolbar">
@@ -296,7 +303,7 @@ onMount(() => {
<div class="toolbar_spacer"></div>
{#if $nav.permissions.update}
<button on:click={() => dispatch("upload_picker")} title="Upload files to this directory">
<button on:click={() => upload_widget.pick_files()} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
</button>

105
svelte/src/filesystem/upload_widget/DropUpload.svelte
View File

@@ -1,105 +0,0 @@
<script>
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
let dispatch = createEventDispatcher()
let dragging = false
const paste = (e) => {
if (e.clipboardData.files.length !== 0) {
e.preventDefault();
e.stopPropagation();
dispatch("upload", e.clipboardData.files)
}
}
const can_upload = e => {
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
return true
}
for (let i = 0; i < e.dataTransfer.items.length; i++) {
if (e.dataTransfer.items[i].kind === "file") {
return true
}
}
return false
}
const dragover = e => {
if (can_upload(e)) {
e.stopPropagation();
e.preventDefault();
dragging = true
console.log(e)
}
}
const dragleave = e => {
dragging = false
}
const drop = async e => {
dragging = false;
if (can_upload(e)) {
e.stopPropagation();
e.preventDefault();
} else {
return
}
// if directory support is available
if(e.dataTransfer && e.dataTransfer.items && e.dataTransfer.items.length > 0) {
for (let i = 0; i < e.dataTransfer.items.length; i++) {
let entry = await e.dataTransfer.items[i].webkitGetAsEntry();
if (entry) {
read_dir_recursive(entry);
}
}
} else if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
dispatch("upload_files", e.dataTransfer.files)
}
}
const read_dir_recursive = item => {
if (item.isDirectory) {
item.createReader().readEntries(entries => {
entries.forEach(entry => {
read_dir_recursive(entry);
});
});
} else {
item.file(file => {
dispatch("upload_file", file)
});
}
}
</script>
<svelte:window
on:dragover={dragover}
on:dragenter={dragover}
on:dragleave={dragleave}
on:drop={drop}
on:paste={paste}
/>
{#if dragging}
<div class="drag_target" transition:fade={{duration: 200}}>
Drop files here to upload them
</div>
{/if}
<style>
.drag_target {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
font-size: 2em;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 100px;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
</style>

6
svelte/src/filesystem/upload_widget/UploadWidget.svelte → svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
View File

@@ -1,7 +1,6 @@
<script>
import { tick } from "svelte";
import { fade } from "svelte/transition";
import DropUpload from "./DropUpload.svelte";
import UploadProgress from "./UploadProgress.svelte";
export let nav
@@ -18,7 +17,6 @@ export const pick_files = () => {
file_input_field.click()
}
export let drop_upload = false
let visible = false
let upload_queue = [];
let task_id_counter = 0
@@ -161,10 +159,6 @@ const leave_confirmation = (e) => {
</div>
{/if}
{#if drop_upload}
<DropUpload on:upload_files={e => upload_files(e.detail)} on:upload_file={e => upload_file(e.detail)}/>
{/if}
<style>
.upload_input {
visibility: hidden;

6
svelte/src/filesystem/upload_widget/UploadProgress.svelte
View File

@@ -78,15 +78,19 @@ const cancel = () => {
.prog {
display: flex;
flex-direction: row;
width: 100%;
overflow: hidden;
}
.bar {
flex: 1 1 auto;
padding: 2px 4px 1px 4px;
margin: 4px;
border-radius: 4px;
overflow: hidden;
line-break: anywhere;
}
.cancel {
flex: 0 0 auto;
flex: 0 0 content;
display: flex;
justify-content: center;
align-items: center; /* Stop stretching the button */

3
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -16,6 +16,7 @@ import { stats } from "src/util/StatsSocket.js"
import SlowDown from "src/layout/SlowDown.svelte";
export let nav
export let upload_widget
export let edit_window
let viewer
@@ -59,7 +60,7 @@ export const seek = delta => {
<Spinner></Spinner>
</div>
{:else if viewer_type === "dir"}
<FileManager nav={nav} edit_window={edit_window} on:upload_picker>
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window}>
<CustomBanner path={$nav.path}/>
</FileManager>
{:else if $nav.context.premium_transfer === false && $stats.limits.transfer_limit_used > $stats.limits.transfer_limit}