How to be able to select file when using React Native Web?

Question

We are building an app that’s using react native but we are not releasing a native version for the first release. We are still using web (using react-native-web for this).

However, I am stuck with file upload functionality because to use a react native component, we need to be doing native permissions (but we are not deploying it natively so there’s no such thing in browsers). But at the same time, I am not able to use a simple <input type=“file” /> since the UI is built on react native-specific tags (e.g. <View> / <Image>, etc.)

Is there a solution to this?

Answer 1

here is a suggestion that would work for you!

seeing that in react-native-web you can specify platform specific files, if you can create a separate upload file component something like 'fileUploader.web.js' and you can combine that with this package https://github.com/react-dropzone/react-dropzone

<Dropzone ref="_dp" onDrop={uploadPhotos}>
    <Text>TEXT HERE</Text> // you can remove this completely
</Dropzone>

you can actually style the dropzone to be completely invisible and trigger file picker with :

this.refs._dp.open()

Keep in mind this only handles the web platform, you will need to create a fileUploader for the other platforms