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

Filesystem fixes

Browse Source
This commit is contained in:
Fornax
2022-02-22 19:53:48 +01:00
parent 336960a631
commit 1a9f30f18a
7 changed files with 308 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/directory_upload/DirectoryUploader.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { tick } from "svelte";
import FileManager from "../filesystem/filemanager/FileManager.svelte";
import { fs_create_bucket, fs_get_node } from "../filesystem/FilesystemAPI.svelte";
@@ -18,6 +17,7 @@ export const add_files = async files => {
let bucket = await fs_create_bucket("", "", write_password)
bucket_id = bucket.id
bucket_state = await fs_get_node(bucket_id, "")
bucket_state.write_password = write_password
} catch (err) {
alert("Failed to create bucket! "+err)
}

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

@@ -43,6 +43,11 @@ let state = {
base: window.initial_node.base,
children: window.initial_node.children,
// Passwords for accessing this bucket. Passwords are not always required
// but sometimes they are
read_password: "",
write_password: "",
// These are used to navigate forward and backward within a directory (using
// the previous and next buttons on the toolbar). The cached siblings will
// be used so that we don't need to make an extra request to the parent
@@ -86,9 +91,6 @@ const navigate = (path, pushHist) => {
)
}
// Sort directory children
sort_children(resp.children)
open_node(resp)
}).catch(err => {
console.error(err)
@@ -108,6 +110,9 @@ const open_node = (node) => {
state.siblings = state.children
}
// Sort directory children
sort_children(node.children)
// Update shared state
state.bucket = node.bucket
state.parents = node.parents

26
svelte/src/filesystem/filemanager/CreateDirectory.svelte
View File

@@ -26,8 +26,26 @@ let create_dir = () => {
onMount(() => { name_input.focus() })
</script>
<form class="node" on:submit|preventDefault={create_dir}>
<td><img src="/res/img/mime/folder.png" class="node_icon" alt="icon"/></td>
<td><input type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} /></td>
<td><input type="submit" value="create"/></td>
<form class="create_dir highlight_dark" on:submit|preventDefault={create_dir}>
<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
<input class="dirname" type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} />
<input class="submit" type="submit" value="create"/>
</form>
<style>
.create_dir {
display: flex;
flex-direction: row;
}
.create_dir > img {
height: 32px;
width: 32px;
flex: 0 0 auto;
}
.dirname {
flex: 1 1 auto;
}
.submit {
flex: 0 0 auto;
}
</style>

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

@@ -1,12 +1,14 @@
<script>
import { formatDataVolume } from '../../util/Formatting.svelte'
import { fs_delete_node } from './../FilesystemAPI.svelte'
import { createEventDispatcher } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import FileUploader from './FileUploader.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
let dispatch = createEventDispatcher()
export let state
export let directory_view = "gallery"
let uploader
let mode = "viewing"
let creating_dir = false
@@ -15,7 +17,9 @@ export const upload = files => {
return uploader.upload(files)
}
const node_click = (index) => {
const node_click = e => {
let index = e.detail
creating_dir = false
// We prefix our custom state properties with fm_ to not interfere with
@@ -36,38 +40,6 @@ const navigate_up = () => {
}
const reload = () => { dispatch("navigate", state.base.path) }
const node_icon = node => {
if (node.type === "dir") {
return "/res/img/mime/folder.png"
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
const delete_selected = () => {
if (mode !== "selecting") {
return
@@ -126,10 +98,22 @@ const toggle_select = () => {
<div class="toolbar">
<button on:click={navigate_up} disabled={state.parents.length === 0}><i class="icon">arrow_back</i></button>
<button on:click={reload}><i class="icon">refresh</i></button>
{#if directory_view === "list"}
<button on:click={() => {directory_view = "gallery"}} alt="Switch to gallery view">
<i class="icon">collections</i>
</button>
{:else if directory_view === "gallery"}
<button on:click={() => {directory_view = "list"}} alt="Switch to list view">
<i class="icon">list</i>
</button>
{/if}
<div class="toolbar_spacer"></div>
{#if state.bucket.permissions.update}
<button on:click={uploader.picker}><i class="icon">cloud_upload</i></button>
<button on:click={() => {creating_dir = true}}><i class="icon">create_new_folder</i></button>
<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir}>
<i class="icon">create_new_folder</i>
</button>
<button
on:click={toggle_select}
@@ -159,41 +143,25 @@ const toggle_select = () => {
</div>
<br/>
{/if}
{#if creating_dir}
<CreateDirectory state={state} on:done={() => {reload(); creating_dir = false;}} on:loading></CreateDirectory>
{/if}
<FileUploader bind:this={uploader} bucket_id={state.bucket.id} target_dir={state.base.path} on:reload={reload}></FileUploader>
<FileUploader
bind:this={uploader}
bucket_id={state.bucket.id}
target_dir={state.base.path}
on:reload={reload}
write_password={state.write_password}
></FileUploader>
<div class="directory">
<tr>
<td></td>
<td>name</td>
<td>size</td>
</tr>
{#if creating_dir}
<CreateDirectory state={state} on:done={() => {reload(); creating_dir = false;}} on:loading></CreateDirectory>
{/if}
{#each state.children as child, index (child.path)}
<a
href={state.path_root+child.path}
on:click|preventDefault={() => {node_click(index)}}
class="node"
class:node_selected={child.fm_selected}>
<td>
<img src={node_icon(child)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
{child.name}
</td>
<td class="node_size">
{#if child.type === "file"}
{formatDataVolume(child.file_size, 3)}
{/if}
</td>
</a>
{/each}
</div>
</div>
{#if directory_view === "list"}
<ListView state={state} on:node_click={node_click}></ListView>
{:else if directory_view === "gallery"}
<GalleryView state={state} on:node_click={node_click}></GalleryView>
{/if}
</div>
<style>
@@ -206,10 +174,10 @@ const toggle_select = () => {
}
.width_container {
position: relative;
display: inline-block;
display: block;
max-width: 95%;
width: 1000px;
margin: 0;
margin: auto;
padding: 0;
}
.toolbar {
@@ -229,60 +197,4 @@ const toggle_select = () => {
flex-direction: column;
}
}
.directory {
display: table;
position: relative;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
margin: 16px 0 16px 0;
text-align: left;
background-color: var(--layer_1_color);
box-shadow: 1px 1px 5px var(--shadow_color);
border-collapse: collapse;
}
.directory > * { display: table-row; }
.directory > * > * { display: table-cell; }
.directory :global(.node) {
display: table-row;
text-decoration: none;
color: var(--text-color);
padding: 6px;
}
.directory :global(.node:not(:last-child)) {
border-bottom: 1px solid var(--layer_2_color);
}
.directory :global(.node:hover:not(.node_selected)) {
background-color: var(--input_color_dark);
color: var(--input_text_color);
text-decoration: none;
}
.directory :global(.node.node_selected) {
background-color: var(--highlight_color) !important;
color: var(--highlight_text_color);
}
.directory :global(.node.node_delete) {
background-color: var(--danger_color) !important;
color: var(--highlight_text_color);
}
.directory :global(td) {
padding: 4px;
vertical-align: middle;
}
.directory :global(.node_icon) {
height: 32px;
width: 32px;
vertical-align: middle;
}
.directory :global(.node_name) {
width: 100%;
overflow: hidden;
line-height: 1.2em;
word-break: break-all;
}
.directory :global(.node_size) {
min-width: 50px;
white-space: nowrap;
}
</style>

14
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -4,6 +4,7 @@ let dispatch = createEventDispatcher();
export let bucket_id;
export let target_dir;
export let write_password = "";
let upload_jobs = [];
let upload_threads = 0;
@@ -70,14 +71,13 @@ const upload_file = () => {
form.append("type", "file");
form.append("file", job.file);
let url = window.api_endpoint+"/filesystem/"+bucket_id+encodeURIComponent(job.target_dir + "/" + job.file.name)
if (write_password) {
url += "?write_password="+write_password
}
let xhr = new XMLHttpRequest();
xhr.open(
"POST",
"/api/filesystem/" +
bucket_id +
encodeURIComponent(job.target_dir + "/" + job.file.name),
true
);
xhr.open("POST", url, true);
xhr.timeout = 21600000; // 6 hours, to account for slow connections
// Report progress updates back to the caller

103
svelte/src/filesystem/filemanager/GalleryView.svelte Normal file
View File

@@ -0,0 +1,103 @@
<script>
import { createEventDispatcher } from "svelte"
let dispatch = createEventDispatcher()
export let state
const node_icon = node => {
if (node.type === "dir") {
return "/res/img/mime/folder.png"
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="gallery">
{#each state.children as child, index (child.path)}
<a class="file"
href={state.path_root+child.path}
on:click|preventDefault={() => {dispatch("node_click", index)}}
class:selected={child.fm_selected}
title={child.name}
>
<div
class="icon_container"
style="background-image: url('{node_icon(child)}?width=256&height=256');">
</div>
{child.name}
</a>
{/each}
</div>
<style>
.gallery{
padding: 16px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.file{
position: relative;
width: 180px;
max-width: 45%;
height: 180px;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 6px 0 var(--shadow_color);
background-color: var(--layer_3_color);
text-align: center;
line-height: 1.2em;
display: inline-block;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
color: var(--text_color);
}
.file:hover {
box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none;
}
.selected {
background-color: var(--highlight_color_dark);
}
.icon_container {
width: 100%;
height: 116px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
font-size: 22px;
text-align: left;
}
</style>

130
svelte/src/filesystem/filemanager/ListView.svelte Normal file
View File

@@ -0,0 +1,130 @@
<script>
import { createEventDispatcher } from "svelte";
import { formatDataVolume } from "../../util/Formatting.svelte";
let dispatch = createEventDispatcher()
export let state
const node_icon = node => {
if (node.type === "dir") {
return "/res/img/mime/folder.png"
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="directory">
<tr>
<td></td>
<td>name</td>
<td>size</td>
</tr>
{#each state.children as child, index (child.path)}
<a
href={state.path_root+child.path}
on:click|preventDefault={() => {dispatch("node_click", index)}}
class="node"
class:node_selected={child.fm_selected}>
<td>
<img src={node_icon(child)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
{child.name}
</td>
<td class="node_size">
{#if child.type === "file"}
{formatDataVolume(child.file_size, 3)}
{/if}
</td>
</a>
{/each}
</div>
<style>
.directory {
display: table;
position: relative;
overflow: hidden;
margin: 8px auto 16px auto;
text-align: left;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 6px var(--shadow_color);
border-collapse: collapse;
border-radius: 8px;
max-width: 95%;
width: 1000px;
}
.directory > * {
display: table-row;
}
.directory > * > * {
display: table-cell;
}
.node {
display: table-row;
text-decoration: none;
color: var(--text-color);
padding: 6px;
}
.node:not(:last-child) {
border-bottom: 1px solid var(--layer_2_color_border);
}
.node:hover:not(.node_selected) {
background-color: var(--input_color_dark);
color: var(--input_text_color);
text-decoration: none;
}
.node.node_selected {
background-color: var(--highlight_color) !important;
color: var(--highlight_text_color);
}
td {
padding: 4px;
vertical-align: middle;
}
.node_icon {
height: 32px;
width: 32px;
vertical-align: middle;
}
.node_name {
width: 100%;
overflow: hidden;
line-height: 1.2em;
word-break: break-all;
}
.node_size {
min-width: 50px;
white-space: nowrap;
}
</style>