parent
b6680d7cab
commit
00398272bd
@ -0,0 +1,237 @@ |
||||
<!-- |
||||
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
--> |
||||
|
||||
<script lang="ts"> |
||||
import ng from "../../api"; |
||||
import { |
||||
branch_subscribe, |
||||
active_session, |
||||
online, |
||||
get_blob, |
||||
} from "../../store"; |
||||
import { cur_tab } from "../../tab"; |
||||
import { |
||||
ExclamationTriangle, |
||||
ArrowDownTray, |
||||
ArrowUpTray, |
||||
} from "svelte-heros-v2"; |
||||
|
||||
import { onMount, onDestroy, tick } from "svelte"; |
||||
import { Button, Progressbar, Spinner } from "flowbite-svelte"; |
||||
import { t } from "svelte-i18n"; |
||||
let is_tauri = import.meta.env.TAURI_PLATFORM; |
||||
|
||||
let upload_progress: null | { total: number; current: number; error?: any } = null; |
||||
|
||||
let commits = $active_session && branch_subscribe($cur_tab.branch.nuri, false); |
||||
let fileinput; |
||||
|
||||
let file_urls = {}; |
||||
const prepare_url = (nuri) => { |
||||
if (!file_urls[nuri]) { |
||||
file_urls[nuri] = { |
||||
click: false |
||||
}; |
||||
} |
||||
return true; |
||||
} |
||||
|
||||
const download = async (file) => { |
||||
if (is_tauri) { |
||||
await ng.file_save_to_downloads($active_session.session_id, file.reference, file.name, "did:ng:"+$cur_tab.branch.nuri); |
||||
} else { |
||||
file_urls[file.nuri].url = await get_blob(file, false); |
||||
//console.log(file.name); |
||||
//console.log(file_urls[file.nuri].click); |
||||
await tick(); |
||||
file_urls[file.nuri].click.click(); |
||||
} |
||||
} |
||||
|
||||
const isImage = async (url) : Promise<boolean> => { |
||||
if ( typeof url === 'string' ) { |
||||
let blob = await fetch(url).then(r => r.blob()); |
||||
return blob.type.startsWith("image/"); |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
function uploadFile(upload_id, nuri, file, success) { |
||||
console.log(nuri); |
||||
let chunkSize = 1_048_564; |
||||
let fileSize = file.size; |
||||
let offset = 0; |
||||
let readBlock = null; |
||||
upload_progress = { total: fileSize, current: offset }; |
||||
|
||||
let onLoadHandler = async function (event) { |
||||
let result = event.target.result; |
||||
|
||||
if (event.target.error == null) { |
||||
offset += result.byteLength; |
||||
upload_progress = { total: fileSize, current: offset }; |
||||
|
||||
// console.log("chunk", result); |
||||
|
||||
let res = await ng.upload_chunk( |
||||
$active_session.session_id, |
||||
upload_id, |
||||
result, |
||||
nuri |
||||
); |
||||
//console.log("chunk upload res", res); |
||||
// if (onChunkRead) { |
||||
// onChunkRead(result); |
||||
// } |
||||
} else { |
||||
// if (onChunkError) { |
||||
// onChunkError(event.target.error); |
||||
// } |
||||
return; |
||||
} |
||||
|
||||
// If finished: |
||||
if (offset >= fileSize) { |
||||
//console.log("file uploaded"); |
||||
let res = await ng.upload_chunk( |
||||
$active_session.session_id, |
||||
upload_id, |
||||
[], |
||||
nuri |
||||
); |
||||
//console.log("end upload res", res); |
||||
if (success) { |
||||
upload_progress = { total: fileSize, current: fileSize }; |
||||
success(res); |
||||
} else { |
||||
upload_progress = { total: fileSize, current: fileSize, error: true }; |
||||
} |
||||
|
||||
// Make progress bar disappear |
||||
setTimeout(() => { |
||||
upload_progress = null; |
||||
}, 1_000); |
||||
return; |
||||
} |
||||
|
||||
readBlock(offset, chunkSize, file); |
||||
}; |
||||
|
||||
readBlock = function (offset, length, file) { |
||||
let fileReader = new FileReader(); |
||||
let blob = file.slice(offset, length + offset); |
||||
fileReader.onload = onLoadHandler; |
||||
fileReader.readAsArrayBuffer(blob); |
||||
}; |
||||
|
||||
readBlock(offset, chunkSize, file); |
||||
return; |
||||
} |
||||
|
||||
const onFileSelected = async (e) => { |
||||
let image = e.target.files[0]; |
||||
if (!image) return; |
||||
//console.log(image.type); |
||||
|
||||
let start_request_payload = { |
||||
RandomAccessFilePut: image.type, |
||||
}; |
||||
let nuri = "did:ng:"+$cur_tab.branch.nuri; |
||||
let start_res = await ng.app_request_with_nuri_command(nuri, "FilePut", $active_session.session_id, start_request_payload); |
||||
let upload_id = start_res.V0.FileUploading; |
||||
|
||||
uploadFile(upload_id, nuri, image, async (reference) => { |
||||
if (reference) { |
||||
let file_put_payload = { |
||||
AddFile: { |
||||
filename: image.name, |
||||
object: reference.V0.FileUploaded, |
||||
}, |
||||
}; |
||||
|
||||
await ng.app_request_with_nuri_command(nuri, "FilePut", $active_session.session_id, file_put_payload); |
||||
} |
||||
}); |
||||
fileinput.value = ""; |
||||
}; |
||||
|
||||
</script> |
||||
|
||||
|
||||
<div class="w-full"> |
||||
<div class="row pt-2 w-full"> |
||||
|
||||
<Button |
||||
disabled={!$online && !is_tauri} |
||||
type="button" |
||||
on:click={() => { |
||||
fileinput.click(); |
||||
}} |
||||
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mr-2 mb-2" |
||||
> |
||||
<ArrowUpTray class="w-8 h-8 mr-2 -ml-1"/> |
||||
{$t("doc.file.upload")} |
||||
</Button> |
||||
<input |
||||
style="display:none" |
||||
type="file" |
||||
on:change={(e) => onFileSelected(e)} |
||||
bind:this={fileinput} |
||||
/> |
||||
</div> |
||||
{#if upload_progress !== null} |
||||
<div class="mx-6 mt-2"> |
||||
<Progressbar |
||||
progress={( |
||||
(100 * upload_progress.current) / |
||||
upload_progress.total |
||||
).toFixed(0)} |
||||
labelOutside={$t("doc.file.upload_progress")} |
||||
/> |
||||
</div> |
||||
{/if} |
||||
{#if commits} |
||||
{#await commits.load()} |
||||
<p>{$t("connectivity.loading")}...</p> |
||||
{:then} |
||||
{#each $commits.files as file} |
||||
<p class="mb-5"> |
||||
|
||||
{#await get_blob(file, true)} |
||||
<div class="ml-2"> |
||||
<Spinner /> |
||||
</div> |
||||
{:then url} |
||||
{#await isImage(url) then is} |
||||
{#if is} |
||||
<img src={url} title={file.nuri} alt={file.name} /> |
||||
{/if} |
||||
{/await} |
||||
<span class="ml-2 text-gray-600">{file.name}<br/></span> |
||||
{#if url === false} |
||||
<span><ExclamationTriangle tabindex="-1" class="ml-2 w-6 h-8 focus:outline-none" style="display:inline"/>{$t("errors.cannot_load_this_file")}</span> |
||||
{:else if prepare_url(file.nuri)} |
||||
<a bind:this={file_urls[file.nuri].click} |
||||
href={file_urls[file.nuri].url || ""} |
||||
target="_blank" |
||||
download={file.name} |
||||
></a> |
||||
<button class="ml-2 select-none p-1 pb-0 text-gray-600" style="box-shadow:none;" on:click={()=>download(file)}> |
||||
<span><ArrowDownTray tabindex="-1" class="w-6 h-8 mr-3 focus:outline-none" style="display:inline"/>{$t("doc.file.download")}</span> |
||||
</button> |
||||
{/if} |
||||
{/await} |
||||
</p> |
||||
{/each} |
||||
{/await} |
||||
{/if} |
||||
|
||||
</div> |
||||
Loading…
Reference in new issue