query regarding live form uploads

In the Phoenix.Liveview.Socket docs, we can share the same websocket connection with multiple liveviews as well as channels.

So my exact problem is implementing live file uploads but ensuring that happens as a background job instead, so users can navigate to other liveview pages etc while thats happening. I assume channels is the way to go for this by using a persistent channel thats always up & running, to be used as a medium for uploading files in realtime while live_navigation between liveviews takes place as normal but im open to other ideas too. Any suggestions?
I also thought of using a genserver or Task or something to upload files asynchronously & send an update once the upload is over so the form with those files can be submitted. Any ideas on the most efficient way to go about with this? realtime live file uploads, as background jobs basically

A possible way may be to put the upload in a seperate liveview that is rendered on the page with live_render in your layout, this survives navigation.

It was my first attempt but its very unclean. The template of the sticky liveview appends to the main liveviews template, & bringing the uploads button down towhere its desirable on the page will be some very nasty css that I dont want to fall into.
All I want to know is if there are any examples of sending binary data to phx channels. The docs arent very comprehensive

Pushing from the JS side of things has it’s own documentation at phoenix 1.7.7 | Documentation, if that is what you are looking for.

yeah I get the channel.push API but I cant send an entire image file through it. I mean I can, but it throws an error when I try to write it- enoent. Problem is, im using FileReader API to do this, its sending the file as binary as expected, but im catching it without using {:binary, chunk}, & for some reason just catching it as normal text is working, but the data is throwing an error.

How and where are you getting the enoent?

i fixed the enoent but the binaries are scuffed. ig it holds extra info other than just the file. Its alright though, I made life tougher for myself. Ive gone with sticky liveviews, cant reinvent the wheel for uploads now can I. But now I have a different problem, please let me know if theres a way to do drag drop files in such a way that the entire page is a dragarea. So dragging the file anywhere on the page will get the files selected without interfering with other page elements

I am doing it with

<section phx-drop-target={@upload.csv.ref}>
...
</section>

But this is inside my form, don’t know what it does if you put it outside.

it works if you put it outside the form but what I wanted was an entire window wide dragarea which covers the entire page, but its cool. Im writing a hook for that