Replace user home page with user dashboard
This commit is contained in:
233
svelte/src/user_home/dashboard/UploadLib.svelte
Normal file
233
svelte/src/user_home/dashboard/UploadLib.svelte
Normal file
@@ -0,0 +1,233 @@
|
||||
<script>
|
||||
import UploadProgressBar from "../../home_page/UploadProgressBar.svelte"
|
||||
import { tick } from "svelte"
|
||||
import UploadStats from "../../home_page/UploadStats.svelte";
|
||||
|
||||
export const pick_files = () => {
|
||||
file_input_field.click()
|
||||
}
|
||||
|
||||
// === UPLOAD LOGIC ===
|
||||
|
||||
let file_input_field
|
||||
const file_input_change = (event) => {
|
||||
// Start uploading the files async
|
||||
upload_files(event.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()
|
||||
upload_files(e.dataTransfer.files)
|
||||
}
|
||||
}
|
||||
const paste = (e) => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
upload_files(e.clipboardData.files)
|
||||
}
|
||||
}
|
||||
|
||||
let active_uploads = 0
|
||||
let upload_queue = []
|
||||
let state = "idle" // idle, uploading, finished
|
||||
let upload_stats
|
||||
|
||||
const upload_files = async (files) => {
|
||||
if (files.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Add files to the queue
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
if (files[i].type === "" && files[i].size === 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
upload_queue.push({
|
||||
file: files[i],
|
||||
name: files[i].name,
|
||||
status: "queued",
|
||||
component: null,
|
||||
id: "",
|
||||
total_size: files[i].size,
|
||||
loaded_size: 0,
|
||||
on_finished: finish_upload,
|
||||
})
|
||||
}
|
||||
|
||||
// Reassign array and wait for tick to complete. After the tick is completed
|
||||
// each upload progress bar will have bound itself to its array item
|
||||
upload_queue = upload_queue
|
||||
await tick()
|
||||
|
||||
start_upload()
|
||||
}
|
||||
|
||||
const start_upload = () => {
|
||||
let finished_count = 0
|
||||
|
||||
for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
|
||||
if (upload_queue[i].status == "queued") {
|
||||
active_uploads++
|
||||
upload_queue[i].component.start()
|
||||
} else if (
|
||||
upload_queue[i].status == "finished" ||
|
||||
upload_queue[i].status == "error"
|
||||
) {
|
||||
finished_count++
|
||||
}
|
||||
}
|
||||
|
||||
if (active_uploads === 0 && finished_count != 0) {
|
||||
state = "finished"
|
||||
upload_stats.finish()
|
||||
// uploads_finished()
|
||||
} else {
|
||||
state = "uploading"
|
||||
upload_stats.start()
|
||||
}
|
||||
}
|
||||
|
||||
const finish_upload = (file) => {
|
||||
active_uploads--
|
||||
start_upload()
|
||||
}
|
||||
|
||||
const leave_confirmation = e => {
|
||||
if (state === "uploading") {
|
||||
e.preventDefault()
|
||||
e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
|
||||
return e.returnValue
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// === SHARING BUTTONS ===
|
||||
|
||||
let share_link = ""
|
||||
let input_album_name = ""
|
||||
|
||||
let btn_create_list
|
||||
|
||||
const create_list = async (title, anonymous) => {
|
||||
let files = upload_queue.reduce(
|
||||
(acc, curr) => {
|
||||
if (curr.status === "finished") {
|
||||
acc.push({"id": curr.id})
|
||||
}
|
||||
return acc
|
||||
},
|
||||
[],
|
||||
)
|
||||
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/list",
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=UTF-8" },
|
||||
body: JSON.stringify({
|
||||
"title": title,
|
||||
"anonymous": anonymous,
|
||||
"files": files
|
||||
})
|
||||
}
|
||||
)
|
||||
if(!resp.ok) {
|
||||
return Promise.reject("HTTP error: "+resp.status)
|
||||
}
|
||||
return await resp.json()
|
||||
}
|
||||
|
||||
const share_mail = () => window.open("mailto:please@set.address?subject=File%20on%20pixeldrain&body=" + share_link)
|
||||
const share_twitter = () => window.open("https://twitter.com/share?url=" + share_link)
|
||||
const share_facebook = () => window.open('https://www.facebook.com/sharer.php?u=' + share_link)
|
||||
const share_reddit = () => window.open('https://www.reddit.com/submit?url=' + share_link)
|
||||
const share_tumblr = () => window.open('https://www.tumblr.com/share/link?url=' + share_link)
|
||||
|
||||
const create_album = () => {
|
||||
if (!input_album_name) {
|
||||
return
|
||||
}
|
||||
create_list(input_album_name, false).then(resp => {
|
||||
window.location = '/l/' + resp.id
|
||||
}).catch(err => {
|
||||
alert("Failed to create list. Server says this:\n"+err)
|
||||
})
|
||||
}
|
||||
|
||||
const keydown = (e) => {
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) {
|
||||
return // prevent custom shortcuts from interfering with system shortcuts
|
||||
}
|
||||
if (document.activeElement.type && document.activeElement.type === "text") {
|
||||
return // Prevent shortcuts from interfering with input fields
|
||||
}
|
||||
switch (e.key) {
|
||||
case "u": file_input_field.click(); break
|
||||
case "l": btn_create_list.click(); break
|
||||
case "e": share_mail(); break
|
||||
case "w": share_twitter(); break
|
||||
case "f": share_facebook(); break
|
||||
case "r": share_reddit(); break
|
||||
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} />
|
||||
|
||||
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
|
||||
|
||||
<UploadStats bind:this={upload_stats} upload_queue={upload_queue}/>
|
||||
|
||||
{#if upload_queue.length > 1}
|
||||
<div class="album_widget">
|
||||
Create an album<br/>
|
||||
<form class="album_name_form" on:submit|preventDefault={create_album}>
|
||||
<div>Name:</div>
|
||||
<input bind:value={input_album_name} type="text" placeholder="My album"/>
|
||||
<button type="submit" disabled={state !== "finished"}>
|
||||
<i class="icon">create_new_folder</i> Create
|
||||
</button>
|
||||
</form>
|
||||
</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}
|
||||
|
||||
<style>
|
||||
.album_widget {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.album_name_form {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user