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

Update to svelte 5

Browse Source
This commit is contained in:
Wim Brand
2025-10-13 16:05:50 +02:00
parent f936e4c0f2
commit 6d89c5ddd9
129 changed files with 2443 additions and 2180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
svelte/src/user_home/APIKeys.svelte
View File

@@ -1,9 +1,10 @@
<script>
import { preventDefault } from 'svelte/legacy';
import { loading_finish, loading_start } from "lib/Loading";
import { formatDate } from "util/Formatting";
let loaded = false
let rows = []
let loaded = $state(false)
let rows = $state([])
const load_keys = async () => {
loading_start()
@@ -93,14 +94,14 @@ const logout = async (key) => {
full control over your account. Do not show your API keys to
someone or something you don't trust!
</p>
<button class="button_red" on:click={load_keys}>
<button class="button_red" onclick={load_keys}>
<i class="icon">lock_open</i> Show API keys
</button>
</div>
{:else}
<div class="toolbar" style="text-align: left;">
<div class="toolbar_spacer"></div>
<button on:click={create_key}>
<button onclick={create_key}>
<i class="icon">add</i> Create new API key
</button>
</div>
@@ -134,7 +135,7 @@ const logout = async (key) => {
<td>{formatDate(row.last_used_time, true, true, false)}</td>
<td>{row.creation_ip_address}</td>
<td>
<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red round">
<button onclick={preventDefault(() => {logout(row.auth_key)})} class="button button_red round">
<i class="icon">delete</i>
</button>
</td>

4
svelte/src/user_home/AccountSettings.svelte
View File

@@ -4,10 +4,10 @@ import CopyButton from "layout/CopyButton.svelte";
import Form from "util/Form.svelte";
import Button from "layout/Button.svelte";
import OtpSetup from "./OTPSetup.svelte";
import { put_user } from "lib/PixeldrainAPI";
import { put_user } from "lib/PixeldrainAPI";
let affiliate_link = window.location.protocol+"//"+window.location.host + "?ref=" + encodeURIComponent(window.user.username)
let affiliate_deny = false
let affiliate_deny = $state(false)
onMount(() => {
affiliate_deny = localStorage.getItem("affiliate_deny") === "1"
})

12
svelte/src/user_home/ActivityLog.svelte
View File

@@ -5,8 +5,8 @@ import { formatDate } from "util/Formatting";
let year = 0
let month = 0
let month_str = ""
let data = []
let month_str = $state("")
let data = $state([])
const load_activity = async () => {
loading_start()
@@ -66,12 +66,12 @@ onMount(() => {
<h3>{month_str}</h3>
<div class="toolbar">
<button on:click={last_month}>
<button onclick={last_month}>
<i class="icon">chevron_left</i>
Previous month
</button>
<div class="toolbar_spacer"></div>
<button on:click={next_month}>
<button onclick={next_month}>
Next month
<i class="icon">chevron_right</i>
</button>
@@ -118,12 +118,12 @@ onMount(() => {
{#if data.length > 100}
<div class="toolbar">
<button on:click={last_month}>
<button onclick={last_month}>
<i class="icon">chevron_left</i>
Previous month
</button>
<div class="toolbar_spacer"></div>
<button on:click={next_month}>
<button onclick={next_month}>
Next month
<i class="icon">chevron_right</i>
</button>

19
svelte/src/user_home/AffiliatePrompt.svelte
View File

@@ -2,13 +2,16 @@
import { onMount } from "svelte";
import Modal from "util/Modal.svelte";
import { get_user, put_user } from "lib/PixeldrainAPI";
import { loading_finish, loading_start } from "lib/Loading";
import { loading_finish, loading_start } from "lib/Loading";
// When the always flag is set then the pop-up will also show if the user
// already has an affiliate ID set
export let always = false
let modal: Modal
let referral: string
let { always = false }: {
// When the always flag is set then the pop-up will also show if the user
// already has an affiliate ID set
always?: boolean;
} = $props();
let modal: Modal = $state()
let referral: string = $state()
let shown = false
export const prompt = async (ref: string) => {
@@ -105,10 +108,10 @@ const deny = () => {
choose 'Deny' then we will never show this pop-up again.
</p>
<div class="buttons">
<button class="button button_red" on:click={e => deny()}>
<button class="button button_red" onclick={e => deny()}>
Deny
</button>
<button class="button button_highlight" on:click={e => allow()}>
<button class="button button_highlight" onclick={e => allow()}>
Accept
</button>
</div>

19
svelte/src/user_home/BandwidthSharing.svelte
View File

@@ -1,15 +1,16 @@
<script>
import { preventDefault } from 'svelte/legacy';
import { onMount } from "svelte";
import Pro from "icons/Pro.svelte";
import { formatDataVolume } from "util/Formatting";
import ProgressBar from "util/ProgressBar.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { loading_finish, loading_start } from "lib/Loading";
let success_message
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e12
let skip_viewer = window.user.skip_file_viewer
let success_message = $state()
let hotlinking = $state(window.user.hotlinking_enabled)
let transfer_cap = $state(window.user.monthly_transfer_cap / 1e12)
let skip_viewer = $state(window.user.skip_file_viewer)
const update = async () => {
const form = new FormData()
@@ -44,7 +45,7 @@ let toggle_hotlinking = () => {
update()
}
let transfer_used = 0
let transfer_used = $state(0)
let load_transfer_used = () => {
let today = new Date()
let start = new Date()
@@ -80,7 +81,7 @@ onMount(() => {
<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
<SuccessMessage bind:this={success_message}></SuccessMessage>
<button on:click={toggle_hotlinking}>
<button onclick={toggle_hotlinking}>
{#if hotlinking}
<i class="icon green">check</i> ON (click to turn off)
{:else}
@@ -101,7 +102,7 @@ onMount(() => {
Billshock limit in terabytes per month (1 TB = 1000 GB). Set to 0 to
disable.
</p>
<form on:submit|preventDefault={update} class="billshock_container">
<form onsubmit={preventDefault(update)} class="billshock_container">
<input type="number" bind:value={transfer_cap} step="0.1" min="0" style="width: 5em;"/>
<div style="margin: 0.5em;">TB</div>
<button type="submit">
@@ -123,7 +124,7 @@ onMount(() => {
</p>
<h2><Pro/>Skip download page</h2>
<button on:click={toggle_skip_viewer}>
<button onclick={toggle_skip_viewer}>
{#if skip_viewer}
<i class="icon green">check</i> ON (click to turn off)
{:else}

10
svelte/src/user_home/ConnectApp.svelte
View File

@@ -3,8 +3,8 @@ import { onMount } from "svelte";
import CopyButton from "layout/CopyButton.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let app_name = ""
let api_key = ""
let app_name = $state("")
let api_key = $state("")
const create_key = async () => {
loading_start()
try {
@@ -30,7 +30,7 @@ const create_key = async () => {
}
}
let show_key = ""
let show_key = $state("")
const toggle_show_key = () => {
if (show_key === "") {
show_key = api_key
@@ -90,7 +90,7 @@ onMount(() => {
{#if !api_key}
<div class="center">
<button class="button_highlight" on:click={create_key}>
<button class="button_highlight" onclick={create_key}>
<i class="icon">add</i>
Generate key
</button>
@@ -100,7 +100,7 @@ onMount(() => {
<div class="copy_container">
<CopyButton text={api_key}>Copy key to clipboard</CopyButton>
<button on:click={toggle_show_key} class="copy_button" class:button_highlight={show_key !== ""}>
<button onclick={toggle_show_key} class="copy_button" class:button_highlight={show_key !== ""}>
<i class="icon">visibility</i>
{#if show_key === ""}
Show key

4
svelte/src/user_home/DepositCredit.svelte
View File

@@ -37,8 +37,8 @@ const checkout = async (network = "", amount = 0, country = "") => {
}
}
let invoices = []
let unpaid_invoice = 0
let invoices = $state([])
let unpaid_invoice = $state(0)
const load_invoices = async () => {
loading_start()
try {

7
svelte/src/user_home/EmbeddingControls.svelte
View File

@@ -1,13 +1,14 @@
<script>
import { preventDefault } from 'svelte/legacy';
import { onMount } from "svelte";
import Persistence from "icons/Persistence.svelte";
import SuccessMessage from "util/SuccessMessage.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let success_message
let success_message = $state()
// Embedding settings
let embed_domains = ""
let embed_domains = $state("")
const save_embed = async () => {
const form = new FormData()
@@ -63,7 +64,7 @@ onMount(() => {
space. Like this: 'pixeldrain.com google.com twitter.com'
</p>
Domain names:<br/>
<form class="form_row" on:submit|preventDefault={save_embed}>
<form class="form_row" onsubmit={preventDefault(save_embed)}>
<input class="grow" bind:value={embed_domains} type="text"/>
<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
</form>

15
svelte/src/user_home/HotlinkProgressBar.svelte
View File

@@ -1,11 +1,14 @@
<script>
<script lang="ts">
import ProgressBar from "util/ProgressBar.svelte";
import { formatDataVolume } from "util/Formatting"
import { user } from "lib/UserStore";
export let total = 0
export let used = 0
let { total = 0, used = 0 }: {
total?: number;
used?: number;
} = $props();
$: frac = used / total
let frac = $derived(used / total)
</script>
<ProgressBar total={total} used={used}></ProgressBar>
@@ -31,7 +34,7 @@ $: frac = used / total
files have a daily download limit and hotlinking is disabled.
</p>
{#if window.user.monthly_transfer_cap > 0}
{#if $user.monthly_transfer_cap > 0}
<p>
You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to
@@ -53,7 +56,7 @@ $: frac = used / total
and hotlinking is disabled.
</p>
{#if window.user.monthly_transfer_cap > 0}
{#if $user.monthly_transfer_cap > 0}
<p>
You have a billshock limit configured. <a
href="/user/sharing/bandwidth">increase or disable the limit</a> to

14
svelte/src/user_home/OTPSetup.svelte
View File

@@ -5,11 +5,11 @@ import CopyButton from "layout/CopyButton.svelte";
import ToggleButton from "layout/ToggleButton.svelte";
import { check_response, get_endpoint, get_user, type User } from "lib/PixeldrainAPI";
let user: User = null
let secret = ""
let uri = ""
let qr = ""
let reveal_key = false
let user: User = $state(null)
let secret = $state("")
let uri = $state("")
let qr = $state("")
let reveal_key = $state(false)
const generate_key = async () => {
try {
let form = new FormData()
@@ -28,7 +28,7 @@ const generate_key = async () => {
}
}
let otp = ""
let otp = $state("")
const verify = async (e: SubmitEvent) => {
e.preventDefault()
@@ -133,7 +133,7 @@ onMount(async () => {
app is working properly. This step enables two-factor authentication
on your account.
</p>
<form id="otp_verify" on:submit={verify} class="otp_form">
<form id="otp_verify" onsubmit={verify} class="otp_form">
<input bind:value={otp} type="text" autocomplete="one-time-code" pattern={"[0-9]{6}"} required>
<Button form="otp_verify" label="Verify OTP"/>
</form>

8
svelte/src/user_home/PatreonActivationResult.svelte
View File

@@ -1,9 +1,9 @@
<script>
import { onMount } from "svelte";
let patreon_result = ""
let patreon_message = ""
let patreon_error = ""
let patreon_result = $state("")
let patreon_message = $state("")
let patreon_error = $state("")
onMount(() => {
if (window.location.hash.startsWith("#")) {
@@ -57,7 +57,7 @@ onMount(() => {
cause issues with the authentication process. Try linking your
subscription in <a
href="https://www.mozilla.org/firefox/">Firefox</a> for example.
<p/>
</p>
<p>
If the information above does not solve your issue then please
contact me on <a

2
svelte/src/user_home/Router.svelte
View File

@@ -83,7 +83,7 @@ let pages: Tab[] = [
},
]
let user = {} as User
let user = $state({} as User)
onMount(async () => {
user = await get_user()
})

13
svelte/src/user_home/StorageProgressBar.svelte
View File

@@ -1,11 +1,14 @@
<script>
<script lang="ts">
import { formatDataVolume } from "util/Formatting"
import ProgressBar from "util/ProgressBar.svelte";
export let total = 0
export let used = 0
export let disable_warnings = false
$: frac = used / total
let { total = 0, used = 0, disable_warnings = false }: {
total?: number;
used?: number;
disable_warnings?: boolean;
} = $props();
let frac = $derived(used / total)
</script>
<ProgressBar total={total} used={used}></ProgressBar>

44
svelte/src/user_home/Subscription.svelte
View File

@@ -1,43 +1,23 @@
<script>
<script lang="ts">
import Euro from "util/Euro.svelte"
import SuccessMessage from "util/SuccessMessage.svelte";
import PatreonActivationResult from "./PatreonActivationResult.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import { user } from "lib/UserStore";
import { put_user } from "lib/PixeldrainAPI";
let subscription = window.user.subscription.id
let subscription_type = window.user.subscription.type
let success_message
let subscription = $state($user.subscription.id)
let subscription_type = $state($user.subscription.type)
let success_message: SuccessMessage = $state()
const update = async (plan) => {
const update = async (plan: string) => {
const form = new FormData()
form.append("subscription", plan)
loading_start()
try {
{
const resp = await fetch(
window.api_endpoint+"/user",
{ method: "PUT", body: form },
)
if(resp.status >= 400) {
let json = await resp.json()
throw json.message
}
success_message.set(true, "Subscription updated")
}
{
const resp = await fetch(window.api_endpoint+"/user")
if(resp.status >= 400) {
let json = await resp.json()
throw json.message
}
window.user = await resp.json()
subscription = window.user.subscription.id
subscription_type = window.user.subscription.type
}
await put_user({subscription: plan})
success_message.set(true, "Subscription updated")
} catch (err) {
success_message.set(false, "Failed to update subscription: "+err)
} finally {
@@ -101,9 +81,9 @@ const update = async (plan) => {
<p>
The Prepaid subscription is charged daily based on usage. When you reach
negative balance the subscription will automatically end. You need at
least <Euro amount="1e6"/> account credit to activate prepaid. Your
least <Euro amount={1e6}/> account credit to activate prepaid. Your
current credit amount is <Euro
amount={window.user.balance_micro_eur}/>. You can deposit credit on the
amount={$user.balance_micro_eur}/>. You can deposit credit on the
<a href="/user/prepaid/deposit">credit deposit page</a>.
</p>
@@ -152,7 +132,7 @@ const update = async (plan) => {
{#if subscription === "prepaid"}
Currently active
{:else}
<button on:click={() => update("prepaid")}>
<button onclick={() => update("prepaid")}>
<i class="icon">attach_money</i>
Activate
</button>

10
svelte/src/user_home/Transactions.svelte
View File

@@ -6,8 +6,8 @@ import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
let month_str = ""
let transactions = {
let month_str = $state("")
let transactions = $state({
rows: [],
total_subscription_charge: 0,
total_storage_used: 0,
@@ -17,7 +17,7 @@ let transactions = {
total_affiliate_amount: 0,
total_deposited: 0,
total_deducted: 0,
}
})
const load_transactions = async () => {
loading_start()
@@ -113,12 +113,12 @@ onMount(() => {
<h3>{month_str}</h3>
<div class="toolbar">
<button on:click={last_month}>
<button onclick={last_month}>
<i class="icon">chevron_left</i>
Previous month
</button>
<div class="toolbar_spacer"></div>
<button on:click={next_month}>
<button onclick={next_month}>
Next month
<i class="icon">chevron_right</i>
</button>

2
svelte/src/user_home/dashboard/CardAccount.svelte
View File

@@ -30,7 +30,7 @@ import { logout_user } from "lib/PixeldrainAPI";
Filesystem
</a>
{/if}
<button on:click={()=> logout_user("/")}>
<button onclick={()=> logout_user("/")}>
<i class="icon">logout</i>
Log out
</button>

4
svelte/src/user_home/dashboard/CardActivity.svelte
View File

@@ -6,8 +6,8 @@ import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
let month_str = ""
let data = []
let month_str = $state("")
let data = $state([])
const load_activity = async () => {
month_str = year + "-" + ("00"+(month)).slice(-2)

6
svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
View File

@@ -7,8 +7,8 @@ import { loading_finish, loading_start } from "lib/Loading";
let year = 0
let month = 0
let month_str = ""
let transactions = {
let month_str = $state("")
let transactions = $state({
rows: [],
total_subscription_charge: 0,
total_storage_used: 0,
@@ -20,7 +20,7 @@ let transactions = {
total_deducted: 0,
balance_start: 0,
balance_end: 0,
}
})
const load_transactions = async () => {
month_str = year + "-" + ("00"+(month)).slice(-2)

73
svelte/src/user_home/dashboard/CardStatistics.svelte
View File

@@ -1,13 +1,17 @@
<script>
<script lang="ts">
import { onMount } from "svelte";
import Chart from "util/Chart.svelte";
import { color_by_name } from "util/Util.svelte";
import { color_by_name } from "util/Util";
import { formatDataVolume, formatThousands } from "util/Formatting";
import { get_endpoint } from "lib/PixeldrainAPI";
export let card_size = 1
$: chart_height = (80 + (card_size * 60)) + "px"
let graph_views_downloads = null
let graph_bandwidth = null
let { card_size = 1 }: {
card_size?: number;
} = $props();
let chart_height = $derived((80 + (card_size * 60)) + "px")
let graph_views_downloads = $state(null)
let graph_bandwidth = $state(null)
let load_graphs = async (minutes, interval) => {
let end = new Date()
@@ -15,14 +19,14 @@ let load_graphs = async (minutes, interval) => {
start.setMinutes(start.getMinutes() - minutes)
try {
let views = get_graph_data("views", start, end, interval);
let downloads = get_graph_data("downloads", start, end, interval);
let bandwidth = get_graph_data("bandwidth", start, end, interval);
let transfer_paid = get_graph_data("transfer_paid", start, end, interval);
views = await views
downloads = await downloads
bandwidth = await bandwidth
transfer_paid = await transfer_paid
let views_req = get_graph_data("views", start, end, interval);
let downloads_req = get_graph_data("downloads", start, end, interval);
let bandwidth_req = get_graph_data("bandwidth", start, end, interval);
let transfer_paid_req = get_graph_data("transfer_paid", start, end, interval);
let views = await views_req
let downloads = await downloads_req
let bandwidth = await bandwidth_req
let transfer_paid = await transfer_paid_req
graph_views_downloads.data().labels = views.timestamps;
graph_views_downloads.data().datasets[0].data = views.amounts
@@ -39,33 +43,36 @@ let load_graphs = async (minutes, interval) => {
}
}
let total_views = 0
let total_downloads = 0
let total_bandwidth = 0
let total_transfer_paid = 0
let total_views = $state(0)
let total_downloads = $state(0)
let total_bandwidth = $state(0)
let total_transfer_paid = $state(0)
let get_graph_data = async (stat, start, end, interval) => {
let get_graph_data = async (stat: string, start: Date, end: Date, interval: number) => {
let resp = await fetch(
window.api_endpoint + "/user/time_series/" + stat +
get_endpoint() + "/user/time_series/" + stat +
"?start=" + start.toISOString() +
"&end=" + end.toISOString() +
"&interval=" + interval
)
resp = await resp.json()
let resp_json: {
timestamps: string[]
amounts: number[]
} = await resp.json()
// Convert the timestamps to a human-friendly format
resp.timestamps.forEach((val, idx) => {
resp_json.timestamps.forEach((val, idx) => {
let date = new Date(val);
let str = date.getFullYear();
let str: string = date.getFullYear().toString();
str += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
str += "-" + ("00" + date.getDate()).slice(-2);
str += " " + ("00" + date.getHours()).slice(-2);
str += ":" + ("00" + date.getMinutes()).slice(-2);
resp.timestamps[idx] = " " + str + " "; // Poor man's padding
resp_json.timestamps[idx] = " " + str + " "; // Poor man's padding
});
// Add up the total amount and save it in the correct place
let total = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
let total = resp_json.amounts.reduce((acc, cur) => { return acc + cur }, 0)
if (stat == "views") {
total_views = total;
@@ -78,10 +85,10 @@ let get_graph_data = async (stat, start, end, interval) => {
total_transfer_paid = total;
}
return resp
return resp_json
}
let graph_timespan = 0
let graph_timespan = $state(0)
let update_graphs = (minutes, interval) => {
graph_timespan = minutes
load_graphs(minutes, interval)
@@ -127,37 +134,37 @@ onMount(() => {
<div class="time_buttons">
<button
on:click={() => update_graphs(1440, 1)}
onclick={() => update_graphs(1440, 1)}
class:button_highlight={graph_timespan == 1440}
class="group_first">
Day
</button>
<button
on:click={() => update_graphs(10080, 60)}
onclick={() => update_graphs(10080, 60)}
class:button_highlight={graph_timespan == 10080}
class="group_middle">
Week
</button>
<button
on:click={() => update_graphs(43200, 1440)}
onclick={() => update_graphs(43200, 1440)}
class:button_highlight={graph_timespan == 43200}
class="group_middle">
Month
</button>
<button
on:click={() => update_graphs(131400, 1440)}
onclick={() => update_graphs(131400, 1440)}
class:button_highlight={graph_timespan == 131400}
class="group_middle">
Quarter
</button>
<button
on:click={() => update_graphs(525600, 1440)}
onclick={() => update_graphs(525600, 1440)}
class:button_highlight={graph_timespan == 525600}
class="group_middle">
Year
</button>
<button
on:click={() => update_graphs(1051200, 1440)}
onclick={() => update_graphs(1051200, 1440)}
class:button_highlight={graph_timespan == 1051200}
class="group_last">
Two Years

4
svelte/src/user_home/dashboard/CardUsage.svelte
View File

@@ -4,8 +4,8 @@ import HotlinkProgressBar from "user_home/HotlinkProgressBar.svelte";
import StorageProgressBar from "user_home/StorageProgressBar.svelte";
import ProgressBar from "util/ProgressBar.svelte";
let transfer_cap = 0
let transfer_used = 0
let transfer_cap = $state(0)
let transfer_used = $state(0)
let storage_limit = window.user.subscription.storage_space
let fs_storage_limit = window.user.subscription.filesystem_storage_limit
let load_direct_bw = () => {

6
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import Button from "layout/Button.svelte"
import { onMount } from "svelte";
import CardAccount from "./CardAccount.svelte";
@@ -10,7 +10,7 @@ import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
import AddressReputation from "home_page/AddressReputation.svelte";
import { flip } from "svelte/animate";
let cards = []
let cards = $state([])
const save = () => {
let storage = {
@@ -159,7 +159,7 @@ onMount(() => {
{#if !card.hidden && card.size > 0}
<div class="card_component">
<svelte:component this={card.elem} card_size={card.size}/>
<card.elem card_size={card.size}/>
</div>
{/if}
</div>

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

@@ -1,4 +1,5 @@
<script>
import { preventDefault } from 'svelte/legacy';
import UploadProgressBar from "home_page/UploadProgressBar.svelte"
import { tick } from "svelte"
import UploadStats from "home_page/UploadStats.svelte";
@@ -9,7 +10,7 @@ export const pick_files = () => {
// === UPLOAD LOGIC ===
let file_input_field
let file_input_field = $state()
const file_input_change = (event) => {
// Start uploading the files async
upload_files(event.target.files)
@@ -26,9 +27,9 @@ const paste = (e) => {
}
let active_uploads = 0
let upload_queue = []
let state = "idle" // idle, uploading, finished
let upload_stats
let upload_queue = $state([])
let status = $state("idle") // idle, uploading, finished
let upload_stats = $state()
export const upload_files = async (files) => {
if (files.length === 0) {
@@ -77,10 +78,10 @@ const start_upload = () => {
}
if (active_uploads === 0 && finished_count != 0) {
state = "finished"
status = "finished"
upload_stats.finish()
} else {
state = "uploading"
status = "uploading"
upload_stats.start()
}
}
@@ -91,7 +92,7 @@ const finish_upload = (file) => {
}
const leave_confirmation = e => {
if (state === "uploading") {
if (status === "uploading") {
e.preventDefault()
e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
return e.returnValue
@@ -103,7 +104,7 @@ const leave_confirmation = e => {
// === SHARING BUTTONS ===
let share_link = ""
let input_album_name = ""
let input_album_name = $state("")
let btn_create_list
@@ -172,19 +173,19 @@ const keydown = (e) => {
}
</script>
<svelte:window on:paste={paste} on:keydown={keydown} on:beforeunload={leave_confirmation} />
<svelte:window onpaste={paste} onkeydown={keydown} onbeforeunload={leave_confirmation} />
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
<input bind:this={file_input_field} onchange={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}>
<form class="album_name_form" onsubmit={preventDefault(create_album)}>
<div>Name:</div>
<input bind:value={input_album_name} type="text" placeholder="My album"/>
<button type="submit" disabled={state !== "finished"}>
<button type="submit" disabled={status !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>