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

Add beginnings of the directory uploader

Browse Source
This commit is contained in:
Fornax
2022-02-21 21:55:09 +01:00
parent fff4410801
commit e4e061869e
8 changed files with 167 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
res/template/directory_upload.html Normal file
View File

@@ -0,0 +1,25 @@
{{define "directory_upload"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Directory upload"}}
{{template "user_style" . }}
{{template "user_style_js" . }}
<script>
window.api_endpoint = '{{.APIEndpoint}}';
window.user = {{.User}};
</script>
<link rel='stylesheet' href='/res/svelte/directory_upload.css?v{{.CacheID}}'>
<script defer src='/res/svelte/directory_upload.js?v{{.CacheID}}'></script>
</head>
<body>
{{template "page_top" .}}
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
</html>
{{end}}

1
svelte/rollup.config.js
View File

@@ -37,6 +37,7 @@ export default [
"user_file_manager", "user_file_manager",
"admin_panel", "admin_panel",
"home_page", "home_page",
"directory_upload",
].map((name, index) => ({ ].map((name, index) => ({
input: `src/${name}.js`, input: `src/${name}.js`,
output: { output: {

8
svelte/src/directory_upload.js Normal file
View File

@@ -0,0 +1,8 @@
import App from './directory_upload/Uploader.svelte';
const app = new App({
target: document.getElementById("page_content"),
props: {}
});
export default app;

52
svelte/src/directory_upload/DirectoryUploader.svelte Normal file
View File

@@ -0,0 +1,52 @@
<script>
import { tick } from "svelte";
import FileManager from "../filesystem/filemanager/FileManager.svelte";
import { fs_create_bucket, fs_get_node } from "../filesystem/FilesystemAPI.svelte";
let fm
let bucket_id = ""
let bucket_state = null
let write_password = ""
export const add_files = async files => {
if (bucket_id === "") {
write_password = gen_password(10)
try {
let bucket = await fs_create_bucket("", "", write_password)
bucket_id = bucket.id
bucket_state = await fs_get_node(bucket_id, "")
} catch (err) {
alert("Failed to create bucket! "+err)
}
}
await tick()
fm.upload(files)
}
const gen_password = len => {
var pw = "";
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for ( var i = 0; i < len; i++ ) {
pw += chars.charAt(Math.floor(Math.random() * chars.length));
}
return pw;
}
const navigate = async e => {
try {
let new_state = await fs_get_node(bucket_id, e.detail)
bucket_state = new_state
} catch (err) {
alert("Failed to create bucket! "+err)
}
}
</script>
{#if bucket_state !== null }
<FileManager bind:this={fm} state={bucket_state} on:navigate={navigate}></FileManager>
{/if}

61
svelte/src/directory_upload/Uploader.svelte Normal file
View File

@@ -0,0 +1,61 @@
<script>
import DirectoryUploader from "./DirectoryUploader.svelte";
let uploader
let file_input_field
const file_input_change = e => {
// Start uploading the files async
uploader.add_files(e.target.files)
// 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()
uploader.add_files(e.dataTransfer.files)
}
}
const paste = e => {
if (e.clipboardData.files[0]) {
e.preventDefault();
e.stopPropagation();
uploader.add_files(e.clipboardData.files)
}
}
</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} />
<header style="padding-bottom: 50px;">
<h1>Directory uploader</h1>
<section>
<div class="highlight_red">
Pixeldrain's filesystem feature is still under development. Please
don't upload anything you can't afford to lose
</div>
</section>
</header>
<section>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
<i class="icon small">cloud_upload</i>
<u>U</u>pload Files
</button>
</section>
<DirectoryUploader bind:this={uploader}></DirectoryUploader>

24
svelte/src/filesystem/FilesystemAPI.svelte
View File

@@ -1,15 +1,17 @@
<script context="module"> <script context="module">
export const fs_create_bucket = async (name) => { export const fs_create_bucket = async (name = "", read_pw = "", write_pw = "") => {
const form = new FormData() const form = new FormData()
form.append("name", name) form.append("name", name)
form.append("read_password", read_pw)
form.append("write_password", write_pw)
const resp = await fetch( const resp = await fetch(
window.api_endpoint+"/filesystem", window.api_endpoint+"/filesystem",
{ method: "POST", body: form } { method: "POST", body: form }
); );
if(resp.status >= 400) { if(resp.status >= 400) {
throw new Error(resp.text()); throw new Error(await resp.text());
} }
return resp.json() return resp.json()
} }
@@ -17,7 +19,7 @@ export const fs_create_bucket = async (name) => {
export const fs_get_buckets = async () => { export const fs_get_buckets = async () => {
const resp = await fetch(window.api_endpoint+"/filesystem"); const resp = await fetch(window.api_endpoint+"/filesystem");
if(resp.status >= 400) { if(resp.status >= 400) {
throw new Error(resp.text()); throw new Error(await resp.text());
} }
return resp.json(); return resp.json();
} }
@@ -30,7 +32,7 @@ export const fs_delete_bucket = async (id, recursive) => {
const resp = await fetch(uri, { method: "DELETE" }); const resp = await fetch(uri, { method: "DELETE" });
if(resp.status >= 400) { if(resp.status >= 400) {
throw new Error(resp.text()); throw new Error(await resp.text());
} }
} }
@@ -47,7 +49,7 @@ export const fs_create_directory = async (bucket, path, dir_name) => {
{ method: "POST", body: form } { method: "POST", body: form }
); );
if(resp.status >= 400) { if(resp.status >= 400) {
throw new Error(resp.text()) throw new Error(await resp.text())
} }
} }
@@ -60,7 +62,7 @@ export const fs_get_node = async (bucket, path) => {
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?stat" window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?stat"
); );
if(resp.status >= 400) { if(resp.status >= 400) {
throw new Error(resp.text()) throw new Error(await resp.text())
} }
return resp.json() return resp.json()
} }
@@ -79,12 +81,12 @@ export const fs_rename_node = async (bucket, old_path, new_path) => {
const form = new FormData() const form = new FormData()
form.append("move_to", new_path) form.append("move_to", new_path)
const resp=await fetch( const resp = await fetch(
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(old_path), window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(old_path),
{ method: "PUT", body: form } { method: "PUT", body: form }
) )
if(resp.status >= 400) { if (resp.status >= 400) {
throw new Error(resp.text()) throw new Error(await resp.text())
} }
} }
@@ -97,8 +99,8 @@ export const fs_delete_node = async (bucket, path) => {
window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?recursive", window.api_endpoint+"/filesystem/"+bucket+encodeURIComponent(path)+"?recursive",
{ method: "DELETE" } { method: "DELETE" }
); );
if(resp.status >= 400) { if (resp.status >= 400) {
throw new Error(resp.text()) throw new Error(await resp.text())
} }
} }

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

@@ -7,9 +7,13 @@ import FileUploader from './FileUploader.svelte'
let dispatch = createEventDispatcher() let dispatch = createEventDispatcher()
export let state export let state
let uploader
let mode = "viewing" let mode = "viewing"
let creating_dir = false let creating_dir = false
let uploader
export const upload = files => {
return uploader.upload(files)
}
const node_click = (index) => { const node_click = (index) => {
creating_dir = false creating_dir = false
@@ -203,7 +207,7 @@ const toggle_select = () => {
.width_container { .width_container {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 94%; max-width: 95%;
width: 1000px; width: 1000px;
margin: 0; margin: 0;
padding: 0; padding: 0;

1
webcontroller/web_controller.go
View File

@@ -160,6 +160,7 @@ func New(
{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})}, {GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})},
{GET, "business" /* */, wc.serveMarkdown("business.md", handlerOpts{})}, {GET, "business" /* */, wc.serveMarkdown("business.md", handlerOpts{})},
{GET, "apps" /* */, wc.serveTemplate("apps", handlerOpts{})}, {GET, "apps" /* */, wc.serveTemplate("apps", handlerOpts{})},
{GET, "directory_upload" /**/, wc.serveTemplate("directory_upload", handlerOpts{})},
// User account pages // User account pages
{GET, "register" /* */, wc.serveForm(wc.registerForm, handlerOpts{NoEmbed: true})}, {GET, "register" /* */, wc.serveForm(wc.registerForm, handlerOpts{NoEmbed: true})},