How to save Uint8Array data made in javascript to database?

I have an operation that runs client side in the browser that creates a Uint8Array. I would like to somehow save this data from the browser to the database so that I can later load the data back into browser for other clients.

I’ve created a table with a :binary field, a schema and a changeset, but beyond that context I’m not sure what path to take to actually make the request from javascript land.

You need to have a backend application. What do you have, or what do you plan to have? Do you want to send the data through http or websocket?

It’s a phoenix app. The page is not liveview but does have a channel connected. Either sending data thru http or websocket would be fine. I just don’t know how to send binary data when not using the eex form helpers. It’s the construction of the signed request that I think I’m lacking reference for

Send multipart request with XMLHttpRequest in custom JS?

You can use form data like @evadne have suggested, or you can push the data through the phoenix channel. Phoenix channel supports binary data. With a liveview socket, you can’t send binary data directly but you can base64 encode into a string.

Would you happen to know of any good examples for how to make a custom POST function that sends the binary data and the csrf token?

How do you push binary data using the phoenix js client?

This is what I have so far:

Client side:

        // data is Uint8Array
        const blob = new Blob([data.buffer])
        var fd = new FormData();
        fd.append('space_id', "123")
        fd.append('data', blob);

        const up = () => {
            fetch('/my_end_point/nav_mesh', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
                    'Content-Type': 'multipart/form-data',
                    "x-csrf-token": document.getElementsByName("csrf-token")[0]['content']
                body: fd // This is your file object
                response => response.json() // if the response is a JSON object
                success => console.log(success) // Handle the success response object
                error => console.log(error) // Handle the error response object


  def nav_mesh(conn, params) do
    IO.inspect(params, label: "params")
    conn |> json(%{})

When the js function executes I see the IO.inspect on the elixir logs, but get no “data” key in the params. Am I sending the binary data incorrectly? How do I get access to the binary data on the controller side?

This forum post was helpful Download binary data in POST request to a file - #4 by jxxcarlson