0

I'm developing a facebook chatbot that sends template message to users. The template uses facebook messenger SDK and opens a webview of my react app website, and the website has <input type="file" /> in it.

When I clicked the Choose File button and then select an image file, the input didn't show the selected file and the onChange event was not called.

<input
  onChange={handleOnChange}
  type="file"
  accept="image/png, .jpeg, .jpg, image/gif"
  capture={false}
/>

The problem only happens in some of android phones. :(

gigigimay
  • 11
  • 2

2 Answers2

0

I encountered the same issue when opening my website from messenger app. What happened is that the event is getting lost with the rendering of your component. To solve it I used e.persist() to save the event data. My callback is also async:

const handleOnChange = async e => {
  e.persist();
  /*Rest of the logic */
};

<input
  onChange={handleOnChange}
  type="file"
  accept="image/png, .jpeg, .jpg, image/gif"
  capture={false}
/>
idan goldshtein
  • 1
  • 1
0

Same problem for me, cannot believe that it only happened on some Android browser. In my case it is VueJS.

      input(
        ref="file",
        type="file",
        accept="image/*",
        @change="select($event)"
      )
mihnsen
  • 385
  • 3
  • 8