Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 09:23:38 +00:00
Code Issues Projects Releases Wiki Activity

feat: revamp upload page

Browse Source
This commit is contained in:
Damillora 2025-02-22 16:09:56 +00:00
parent 4f39b8ab56
commit 2cb4d344cd
1 changed files with 132 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
web/app/src/routes/upload/+page.svelte
View File

@ -3,11 +3,13 @@
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import Tags from "svelte-tags-input"; import Tags from "svelte-tags-input";
import AuthRequired from "$lib/components/checks/AuthRequired.svelte"; import AuthRequired from "$lib/components/checks/AuthRequired.svelte";
import ShiorikoImage from "$lib/components/ui/ShiorikoImage.svelte";
let currentProgress = $state(0); let currentProgress = $state(0);
let fileName = $state(""); let fileName = $state("");
let similar = $state([]); let similar = $state([]);
let previewUrl = $state("");
let form = $state({ let form = $state({
blob_id: "", blob_id: "",
@ -21,16 +23,20 @@
}; };
const onFileChange = async (e) => { const onFileChange = async (e) => {
fileName = "";
similar = [];
var file = e.target.files[0]; var file = e.target.files[0];
fileName = "";
previewUrl = "";
similar = [];
if (file) { if (file) {
var response = await uploadBlob({ file, onProgress }); var response = await uploadBlob({ file, onProgress });
if (response.similar) { if (response.similar) {
fileName = "";
previewUrl = "";
similar = response.similar; similar = response.similar;
} }
form.blob_id = response.id; form.blob_id = response.id;
fileName = file.name; fileName = file.name;
previewUrl = response.previewUrl;
} }
}; };
@ -54,72 +60,133 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<h1 class="title">Upload Image</h1> <div class="columns">
<form onsubmit={onSubmit}> <div class="column is-one-third">
<div class="field"> <div class="panel is-primary">
<label for="file" class="label">Image File</label> <form onsubmit={onSubmit}>
<div class="control"> <p class="panel-heading">Upload Image</p>
<div class="file"> <div class="panel-block column">
<label class="file-label"> <div class="row">
<input <label for="file" class="label">Image:</label>
id="file" </div>
class="file-input" <div class="row">
type="file" <div class="field">
name="resume" <div class="control">
onchange={onFileChange} <div class="file">
/> <label class="file-label">
<span class="file-cta"> <input
<span class="file-icon"></span> id="file"
<span class="file-label"> Choose a file… </span> class="file-input"
</span> type="file"
</label> name="resume"
</div> onchange={onFileChange}
</div> />
{#if currentProgress > 0 && currentProgress < 100} <span class="file-cta">
<p class="help">{currentProgress}%</p> <span class="file-icon"
{/if} ></span>
{#if fileName !== ""} <span class="file-label">
<p class="help">{fileName} uploaded</p> Choose a file…
{/if} </span>
{#if similar.length > 0} </span>
<p class="help"> </label>
Similar posts: </div>
{#each similar as post, i} </div>
<a href="/post/{post.id}">{post.id}</a> </div>
{#if i < similar.length - 1} </div>
, </div>
{/if} <div class="panel-block column">
{/each} <div class="row">
</p> <label for="source" class="label"
{/if} >Source URL:</label
</div> >
<div class="field"> </div>
<label for="source" class="label">Source URL</label> <div class="row">
<div class="control"> <div class="field">
<input <div class="control">
id="source" <input
class="input" id="source"
type="url" class="input"
placeholder="Source URL" type="url"
bind:value={form.source_url} placeholder="Source URL"
/> bind:value={form.source_url}
/>
</div>
</div>
</div>
</div>
<div class="panel-block column">
<div class="row">
<label for="tags" class="label">Tags</label>
</div>
<div class="row">
<div class="field">
<div class="control" id="tags">
<Tags
tags={form.tags}
addKeys={[9, 32]}
on:tags={onTagChange}
autoComplete={onAutocomplete}
autoCompleteFilter={false}
/>
</div>
</div>
</div>
</div>
<div class="panel-block column">
<button
type="submit"
class="button is-primary is-fullwidth is-outlined"
>Submit</button
>
</div>
</form>
</div> </div>
</div> </div>
<div class="field"> <div class="column is-two-thirds">
<label for="tags" class="label">Tags</label> <div class="box">
<div class="control" id="tags"> {#if fileName}
<Tags {#if similar.length > 0}
tags={form.tags} <div class="notification is-warning">
addKeys={[9, 32]} {fileName} has been succesfully uploaded. There are
on:tags={onTagChange} similar images existing:
autoComplete={onAutocomplete} {#each similar as post, i}
autoCompleteFilter={false} <a href="/post/{post.id}">{post.id}</a>
/> {#if i < similar.length - 1}
,
{/if}
{/each}
</div>
{:else}
<div class="notification is-primary">
{fileName} has been succesfully uploaded.
</div>
{/if}
<figure class="image">
<ShiorikoImage alt={fileName} src={previewUrl} />
</figure>
{:else if currentProgress > 0 && currentProgress < 100}
<progress
class="progress is-primary"
value={currentProgress}
max="100"
>
{currentProgress}%
</progress>
<div class="notification is-info">
Your image is currently uploading...
</div>
{:else}
<div class="notification is-primary">
Your image will appear here when you upload it.
</div>
{/if}
</div> </div>
</div> </div>
<div class="control"> </div>
<button type="submit" class="button is-primary">Submit</button> </div>
</div> </section>
</form> <section class="section">
<div class="container">
<h1 class="title">Upload Image</h1>
</div> </div>
</section> </section>