Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File upload - simplify a bit with gloo::file::FileList::from #3685

Merged
merged 7 commits into from
Oct 12, 2024
Merged

File upload - simplify a bit with gloo::file::FileList::from #3685

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
504f690
simplify a little with gloo::file::FileList::from
knzai Jul 20, 2024
5625a2f
a little less repetition
knzai Jul 20, 2024
a51196e
trim the web_sys feature flags a bit
knzai Jul 20, 2024
1db7edb
drop the clone
knzai Jul 21, 2024
d19fc67
more golf
knzai Jul 21, 2024
d388dd6
Merge branch 'master' into fork/knzai/file_upload
ranile Oct 12, 2024
bdd1f7e
fmt
ranile Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 3 additions & 84 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion examples/file_upload/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ gloo = "0.10"

[dependencies.web-sys]
version = "0.3"
features = ["File", "DragEvent", "DataTransfer"]
features = ["DataTransfer"]
60 changes: 19 additions & 41 deletions examples/file_upload/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,19 @@ use std::collections::HashMap;
use base64::engine::general_purpose::STANDARD;
use base64::Engine;
use gloo::file::callbacks::FileReader;
use gloo::file::File;
use web_sys::{DragEvent, Event, FileList, HtmlInputElement};
use web_sys::{DragEvent, Event, HtmlInputElement};
use yew::html::TargetCast;
use yew::{html, Callback, Component, Context, Html};

struct FileDetails {
pub struct FileDetails {
name: String,
file_type: String,
data: Vec<u8>,
}

pub enum Msg {
Loaded(String, String, Vec<u8>),
Files(Vec<File>),
Loaded(FileDetails),
Files(Option<web_sys::FileList>),
}

pub struct App {
Expand All @@ -38,33 +37,28 @@ impl Component for App {

fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::Loaded(file_name, file_type, data) => {
self.files.push(FileDetails {
data,
file_type,
name: file_name.clone(),
});
self.readers.remove(&file_name);
Msg::Loaded(file) => {
let name = file.name.clone();
self.files.push(file);
self.readers.remove(&name);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you flip these two lines, you should be able to avoid the clone above. It doesn't really matter though

true
}
Msg::Files(files) => {
for file in files.into_iter() {
let file_name = file.name();
for file in gloo::file::FileList::from(files.expect("files")).iter() {
let link = ctx.link().clone();
let name = file.name().clone();
let file_type = file.raw_mime_type();

let task = {
let link = ctx.link().clone();
let file_name = file_name.clone();

gloo::file::callbacks::read_as_bytes(&file, move |res| {
link.send_message(Msg::Loaded(
file_name,
gloo::file::callbacks::read_as_bytes(file, move |res| {
link.send_message(Msg::Loaded(FileDetails {
data: res.expect("failed to read file"),
file_type,
res.expect("failed to read file"),
))
name,
}))
})
};
self.readers.insert(file_name, task);
self.readers.insert(file.name(), task);
}
true
}
Expand All @@ -80,8 +74,7 @@ impl Component for App {
id="drop-container"
ondrop={ctx.link().callback(|event: DragEvent| {
event.prevent_default();
let files = event.data_transfer().unwrap().files();
Self::upload_files(files)
Msg::Files(event.data_transfer().unwrap().files())
})}
ondragover={Callback::from(|event: DragEvent| {
event.prevent_default();
Expand All @@ -101,7 +94,7 @@ impl Component for App {
multiple={true}
onchange={ctx.link().callback(move |e: Event| {
let input: HtmlInputElement = e.target_unchecked_into();
Self::upload_files(input.files())
Msg::Files(input.files())
})}
/>
<div id="preview-area">
Expand Down Expand Up @@ -129,22 +122,7 @@ impl App {
</div>
}
}

fn upload_files(files: Option<FileList>) -> Msg {
let mut result = Vec::new();

if let Some(files) = files {
let files = js_sys::try_iter(&files)
.unwrap()
.unwrap()
.map(|v| web_sys::File::from(v.unwrap()))
.map(File::from);
result.extend(files);
}
Msg::Files(result)
}
}

fn main() {
yew::Renderer::<App>::new().render();
}
Loading