jheuel/photos
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make read file and upload separate js functions

Browse Source
This commit is contained in:
Johannes Heuel
2023-03-05 11:54:24 +01:00
parent f5af0c8711
commit fbcea9e77b
2 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/home.js
View File

@@ -49,7 +49,7 @@ export function get_files_data_transfer_items(data_transfer_items) {
return getFilesDataTransferItems(data_transfer_items); return getFilesDataTransferItems(data_transfer_items);
} }
function read_file(file) { export function read_file(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let reader = new FileReader(); let reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
@@ -60,23 +60,21 @@ function read_file(file) {
}); });
} }
export function upload_file(file, url) { export function upload(content, content_type, url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
read_file(file).then((content) => { fetch(url, {
fetch(url, { method: 'PUT',
method: 'PUT', headers: {
headers: { 'Accept': 'application/json',
'Accept': 'application/json', 'Content-Type': 'multipart/form-data',
'Content-Type': 'multipart/form-data', },
}, body: new Blob([content], { type: content_type }),
body: new Blob([content], { type: file.type }), }).then((resp) => {
}).then((resp) => { if (resp.status >= 200 && resp.status < 300) {
if (resp.status >= 200 && resp.status < 300) { resolve(resp);
resolve(resp); } else {
} else { reject(resp);
reject(resp); }
} });
});
}).catch(error => reject(error));
}); });
} }

24
frontend/src/components/home.rs
View File

@@ -3,7 +3,7 @@ use crate::gallery::Grid;
use crate::hooks::use_user_context; use crate::hooks::use_user_context;
use gloo_net::http::Request; use gloo_net::http::Request;
use js_sys::{Array, Promise}; use js_sys::{Array, ArrayBuffer, Promise};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue}; use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
use web_sys::{ use web_sys::{
@@ -128,19 +128,30 @@ pub fn home() -> Html {
.unwrap(); .unwrap();
console_log!("{}", serde_json::to_string(&photos).unwrap()); console_log!("{}", serde_json::to_string(&photos).unwrap());
console_log!("", files.len());
let mut promises: Vec<Promise> = Vec::new(); let mut promises: Vec<Promise> = Vec::new();
for (file, (_, url)) in files.iter().zip(photos.photos) { for (file, (_, url)) in files.iter().zip(photos.photos) {
console_log!("uploading: ", &file.name(), &url); console_log!("uploading: ", &file.name(), &url);
promises.push(upload_file(file.clone(), url.clone())); let promise = read_file(file.clone());
if let Ok(content) = wasm_bindgen_futures::JsFuture::from(promise).await {
let buffer: ArrayBuffer = content.dyn_into().unwrap();
let typed_buffer: js_sys::Uint8Array = js_sys::Uint8Array::new(&buffer);
let mut buf = vec![0; typed_buffer.length() as usize];
typed_buffer.copy_to(&mut buf[..]);
console_log!(
serde_json::to_string(&buf.len()).unwrap(),
serde_json::to_string(&buf).unwrap()
);
promises.push(upload(buffer, file.type_(), url.clone()));
}
} }
for promise in promises { for promise in promises {
match wasm_bindgen_futures::JsFuture::from(promise).await { match wasm_bindgen_futures::JsFuture::from(promise).await {
Ok(result) => console_log!(result), Ok(result) => console_log!(result),
_ => console_log!("errooooor"), Err(e) => console_log!("errooooor", e),
}; };
} }
console_log!("all uploaded"); console_log!("all uploaded");
}); });
}); });
@@ -192,5 +203,6 @@ pub fn home() -> Html {
#[wasm_bindgen(module = "/src/components/home.js")] #[wasm_bindgen(module = "/src/components/home.js")]
extern "C" { extern "C" {
fn get_files_data_transfer_items(data_transfer_items: DataTransferItemList) -> js_sys::Promise; fn get_files_data_transfer_items(data_transfer_items: DataTransferItemList) -> js_sys::Promise;
fn upload_file(file: File, url: String) -> js_sys::Promise; fn read_file(file: File) -> js_sys::Promise;
fn upload(content: ArrayBuffer, content_type: String, url: String) -> js_sys::Promise;
} }