"Meme Generator" notebook in Safari

1

Hi!

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
    <option>Other
  </select>
  <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") {
      form.file.click();
    } else {
      form.value = form.select.value;
      form.dispatchEvent(new CustomEvent("input"));
    }
  };
  form.select.onchange();
  return form;
}
2

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?)?

3

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
4

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

1 Like
5

Thanks man