Attach files to `live_file_input` from js

Hello community,

I’ve been exploring the possibility of programmatically setting files in the browser and associating them with a live_file_input in a Phoenix LiveView application. I’ve attempted the following script, but it doesn’t seem to be working as expected:

let file = new File([e.detail.blob], "avatar_preview.png", { type: "image/png" });
let fileInput = document.querySelector('input[name="avatar_preview"]');
let dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;

Unfortunately, the file does not appear to be assigned to the live_file_input as intended. I’ve tried various approaches, such as updating the files property multiple times, but without success.

Is there a way to programmatically update the live_file_input or its associated ref data attributes to achieve the desired file association? Any insights or guidance on how to approach this challenge would be greatly appreciated.

Thank you!