🏠 back to Observable

"Meme Generator" notebook in Safari


I like the idea in Bostock’s notebook https://observablehq.com/@mbostock/meme-generator where I have a dropdown list combined with a file button. But the file button is not working in Safari. Any idea why? This is the code in that notebook:

viewof url = {
  const form = html`<form>
  <select name=select>
    <option value="https://gist.githubusercontent.com/mbostock/1db888aa9f6518d86f625d0fe9db22b9/raw/0fe4a0af29c5de8d09fc2b1e9a1bccd50644c417/beastie-boys.jpg">Beastie Boys
    <option value="https://gist.githubusercontent.com/mbostock/1db888aa9f6518d86f625d0fe9db22b9/raw/0fe4a0af29c5de8d09fc2b1e9a1bccd50644c417/bohemian-rhapsody.jpg">Bohemian Rhapsody
    <option value="https://gist.githubusercontent.com/mbostock/1db888aa9f6518d86f625d0fe9db22b9/raw/0fe4a0af29c5de8d09fc2b1e9a1bccd50644c417/buy-a-boat-cat.jpg">Buy a Boat Cat
  <input name=file type=file accept=.png,.jpg,.gif,.webp>
  form.file.oninput = () => {
    form.select.value = "Other";
    form.value = URL.createObjectURL(form.file.files[0]);
  form.select.onchange = () => {
    if (form.select.value === "Other") {
    } else {
      form.value = form.select.value;
      form.dispatchEvent(new CustomEvent("input"));
  return form;

Hi. I don’t have access to a browser with Safari, but my guess is that the button selection view is a browser specific implementation of ‘form.select’. This interface arrears to me on Chrome for mobile devices, but appears just like a ‘normal’ dropdown in Chromium and Firefox on my desktop. I assume you’re seeing the scrolling selection at the base of your iPhone (I recall that being the dropdown interface?)?

The problem appears to be that Safari doesn’t support input events for file inputs. It does however support change events, so I’ve updated the notebook to use those instead.

1 Like

The thing is that the button is there. But it doesn’t work. I solved my problem with mutable variables :frowning:

1 Like

Thanks man