React-native-web: File upload

[tykane33]

Wish there was a larger community to ask questions etc. so I am sure this is not the best place for this.
I looking to get a file upload setup through RNW, I see this on the twitter app but have not come up with good way to do this. I need to be able to cover, images (camera roll would be nice), pdfs, keynotes etc.
I am currently building a large application and am 90% of the way there, but this one is killing me on the right approach.

[RangerMauve]

@tykane33 Find existing ReactDOM and ReactNative implementations of components that do what you want, then wrap over them with RN/RNW components that have the same interface, but use platform-specific code.

Take advantage of the fact that RN lets you use .android.js and .ios.js file extensions for native, and use regular .js for web.

[tykane33]

@RangerMauve thanks, that was only thing I could think of as well. So I guess I will be going with that approach. That is the underlying beauty of RNW after all

[RangerMauve]

@tykane33 We found that File IO is one of the areas that has the most variety between platforms, so having platform specific code helped the overall experience.

[necolas]

Yeah don't be concerned about dropping down to platform-specific code (i.e., ReactDOM or straight-up DOM) for these kinds of needs. The web still has pretty poor media upload APIs and UIs that prevent bringing something like the CameraRoll API to web at the moment (AFAICT).

[bengyles]

@tykane33
Did you end up finding a solution for this? I also have an image picker in android and ios but I have no idea how to get it done on the web inside react native. I did split it up in platform specific code in separate files but I'm currently just hiding the upload button on the web version. Is there a way you can still use in there? Any tips would be very much appreciated.

[rsaccon]

use a RNW button or Touchable onPress event, to trigger a click event on a hidden Fileupload button (as done in a pure web app). That is how I approached it for web-native.

[bengyles]

After another deep search I found this package and however it isn't updated in a while it definitely works! I hope this can be of some use for other developers looking to solve this issue.

[bengyles]

There was an issue building the project when testing it on native because it also includes react native in the package.json? so I ended adding it as a component and now it works.