Blob download encoding

[Chtau]

Problem
If a Blob is created the bytes their encoding is wrong.

Steps To Reproduce

1. Create a Blob with a String ("Test") as content
2. Create a Url from the Blob

use web_sys::{js_sys::Uint8Array, Blob, BlobPropertyBag};
use yew::prelude::*;

#[derive(PartialEq, Properties)]
pub struct DownloadBlobProps {
    pub text: String,
}

#[function_component]
pub fn DownloadBlob(props: &DownloadBlobProps) -> Html {
    let array_buffer = props.text.clone().into_bytes();
    let uint8_array = Uint8Array::from(array_buffer.as_slice());

    let blob = Blob::new_with_u8_array_sequence_and_options(
        &uint8_array,
        BlobPropertyBag::new().type_("text/plain"),
    )
    .expect("Failed to create Blob");
    let url = web_sys::Url::create_object_url_with_blob(&blob)
        .expect("Failed to create object URL from Blob");

    html! {
        <a
            href={url}
            download="file.txt"
        >
            { "Download File" }
        </a>
    }
}

4. Download the file provided by the Url
5. The Provided String Value "Test" is shown as "84101115116" in the File

Expected behavior
The File should have the provided String value as Content.

Environment:

• Yew version: v0.21, master
• Rust version: 1.75.0
• Build tool, if relevant: trunk
• OS: Windows 10
• Browser and version: Brave 1.63.165 Chromium 122.0.6261.94, Firefox 123.0, Edge 122.0.2.2365.66

Minimal Example Code to reproduce: yew-blob-download-bug.zip

I also tried different methods to Encode and Blob creation but without success.

[hamza1311]

This happens because you convert the string into bytes before creating the blob. The blob is created with the string of bytes (UInt8Array). You want to create a blob with a string

[Chtau]

The problem was indeed the provided bytes. I changed the Code to use JsValue::from_serde from the gloo_utils and the Blob value is now provided as expected. I my test i didn't matter which new function is used from the blob as long as the value is provided from the serde.

use wasm_bindgen::JsValue;
use web_sys::{Blob, BlobPropertyBag};
use gloo_utils::format::JsValueSerdeExt;
use yew::prelude::*;

#[derive(PartialEq, Properties)]
pub struct DownloadBlobProps {
    pub text: String,
}

#[function_component]
pub fn DownloadBlob(props: &DownloadBlobProps) -> Html {

    let strings = vec![props.text.clone()];
    let js_value: JsValue = JsValue::from_serde(&strings).unwrap();

    let blob = Blob::new_with_str_sequence(
        &js_value
    ).expect("Failed to create Blob");

    // Also works!
    /*let blob = Blob::new_with_u8_array_sequence_and_options(
        &js_value,
        BlobPropertyBag::new().type_("text/plain"),
    ).expect("Failed to create Blob");*/

    let url = web_sys::Url::create_object_url_with_blob(&blob)
        .expect("Failed to create object URL from Blob");

    html! {
        <a
            href={url}
            download="file.txt"
        >
            { "Download File" }
        </a>
    }
}

I haven't jet tried it with binary blobs (Images etc.) but hopefully it should also work with serde.

[hamza1311]

For strings, it's way more efficient to use JsValue::from_str. Serde goes through JSON (stringify then parse) and there's no need to do that if you just want a JsValue of string (or even bytes)

[Chtau]

JsValue::from_str sadly throws an sequence error at least in my tries.