First I followed this video:
But then I wanted to be able to paste an image from the clipboard. Apparently all you have to do is catch the paste
event on window
and put all the files it gives you into the <input>
tag.
I added this into app.js
.
window.addEventListener('paste', e => {
let files = e.clipboardData.files;
let input = document.querySelector("input[type=file]")
if(!files || !input) return;
input.files = files;
});
Going line-by-line through the above code:
paste
events on the window
clipboardData.files
To get Phoenix LiveView to pick up the change I needed to create an event that would bubble up to window
. These lines should be added to the event handler above (after line 5, before line 6).
var event = document.createEvent("HTMLEvents");
event.initEvent("input", true, true);
input.dispatchEvent(event);
window
to trigger an update in Phoenix Live Viewinput
It took several hours... The most useful thing I did was to change the import in app.js
from
import LiveSocket from "phoenix_live_view"
to use the uncompiled JS file instead. This meant I could add breakpoints in Chrome to figure out what happened when a change is made and how to create the right kind of event to trigger the Live View hooks.
Anyway hopefully I’ve saved you the trouble!