Quickest Way To Send File To String And Back To File In JavaScript

Question

So in a client-side HTML page, a user selects a file and uploads it to the JavaScript code. JavaScript parses the file and sends it to the server and back to everyone else who is on the site. Then every client makes a blob download link for the file. It's easy when I can send the file to server and back like this.

But now, I want to make that file available for future users of the site without saving it to a location. This is in a chat program, so I've been sending messages from users as strings to a database. I'd like to create a program to send the aforementioned File object to the shortest string possible and then recreate the file (including all metadata) at another client from this string.

What is the standard way to convert a Blob to a string and back again without losing anything? If there's multiple ways, what results in the shortest string?

Answer 1

I found the answer to my question, I had to modify some other answers from SO questions that only sorta applied to my question. Here's what I found:

This is on the uploading-client, in the function called when a file is uploaded:

let inp = document.getElementById("file_input");
let reader = new FileReader();
reader.onload = function(){
    send_off_to_other_clients(reader.result);
}
reader.readAsBinaryString(inp.files[0]);

On the other clients:

<script>
    function get_blob_from_string (string, type, name) {
        let array = new Uint8Array(string.length);
        for (let i = 0; i < string.length; i++){
            array[i] = string.charCodeAt(i);
        }
        let end_file = new Blob([array], {type: type, name: name});
        let a = document.createElement("a");
        a.href = URL.createObjectURL(end_file);
        a.download = name;
        a.target = "_blank";
        a.click();
    }
</script>

end_file is the returned-to-blob version, and then I create an anchor tag to download it. Probably isn't "proper" but it works.