Add file input to WebView

[farazs]

Fixes #5219 which was moved to ProductPains. Allows file input in a webview. Previously attempting to use file input would do nothing in the webview. Now the default dialog is shown allowing you to pick Camera to take a picture or Photos/Gallery to select an existing photo.

The problem in fixing this before was that this was accomplished by using undocumented APIs for earlier versions of Android. However, for 5.0+ there is a documented API for this. Since there is no documented way to fix this for earlier versions of Android, it seems better to have a solution for 5.0+ than no solution at all.

Based on this example: https://github.com/GoogleChrome/chromium-webview-samples/tree/master/input-file-example/

The ActivityEventListener does not work if it is attached to the ThemedReactContext itself but needs to be added to the original ReactContext similar to how LifecycleEventListener is handled.

[yihanseattle]

works perfectly for me! just what we need.

[farazs]

Tested manually on: Samsung Galaxy S7 Edge, Samsung Galaxy S5, Nexus 6P emulator, LG v20

[farazs]

Fixes #11230

[prithsharma]

Any update or ETA on this?

[farazs]

Sadly no one has reviewed it yet.

[headlessme]

Would be great to see this merged. @jacobp100

[jacobp100]

Sorry, I don't have power to merge things! The code looks good, but I just have a few questions,

Is it possible to handle this use-case using #10946? I know that PR hasn't landed, but it is useful for other reviewers to know.

Does this work for things uploads than images?

What happens if a user is on an older version of Android?

[farazs]

To answer your questions:

1. No, I believe the changes to ThemedReactContext would still be necessary for this to work even with [WebView] Add props for overriding native component #10946
2. I don't believe so. I was unable to select an audio file for a file input with no accept attribute.
3. I cannot say for sure without testing on a real device but on a JellyBean AVD Nexus 5 (emulator), when clicking/tapping a file input, nothing happens. Same with KitKat Nexus 5 AVD. On Nexus 5 emulator with a later version of Android, it works.

[headlessme]

Anyone know who needs pinging to get this reviewed?

[jacobp100]

@headlessme @farazs I think the ThemedReactContext changes should be fine to go in.

If the ThemedReactContext changes did get merged, I believe you would be able to implement this with said PR (and even publish it as a module!). That would mean who ever merges this doesn't have to review things like device compatibility or consider uploading use cases for things other than images.

[farazs]

sounds good. I can update the PR to include only those changes.

I'm not sure how close that PR is to being merged though. Is it possible it becomes stale and does not end up being merged?

[jacobp100]

I'm working hard with the author to get it published soon!

[niztal]

Why doesn't anyone merge it? We need it ASAP

[monsty]

Any update ?

[farazs]

#10946 has still not been merged. So if this PR will not be merged as is, it's not possible to implement this using that until it is merged and released in a new RN version.

[andreipfeiffer]

I'm interested in this merge also.

[mantou132]

@farazs
this PR can support file multiple choice ?

[farazs]

@mantou132 I'm not sure what you mean by that, but you're welcome to try it out and see! :)

[mantou132]

multiple file & MIME type：

       if (fileChooserParams.getMode() == FileChooserParams.MODE_OPEN_MULTIPLE) {
          contentSelectionIntent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
        }
        ...
        String[] acceptTypes = fileChooserParams.getAcceptTypes();
        contentSelectionIntent.setType(acceptTypes[0].isEmpty() ? "*/*" : acceptTypes[0]);

Also do not need to set the title：
chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");

multiple file receive：

        if(resultCode == Activity.RESULT_OK) {
          if(data == null) {
            // If there is not data, then we may have taken a photo
            if(mCameraPhotoPath != null) {
              results = new Uri[]{Uri.parse(mCameraPhotoPath)};
            }
          } else {
            String dataString = data.getDataString();
            if (dataString != null) {
              results = new Uri[]{Uri.parse(dataString)};
            } else {
              if (data.getClipData() != null) {
                results = new Uri[data.getClipData().getItemCount()];
                for (int i = 0; i < data.getClipData().getItemCount(); i++) {
                  results[i] = data.getClipData().getItemAt(i).getUri();
                }
              } else {
                results = null;
              }
            }
          }
        }

https://stackoverflow.com/questions/42919913/multiple-file-upload-from-android-webview-kitkat-and-lower-android-versions

[JustPassingThrough]

It seems like #15016 was approved, any chance this might be merged anytime soon?

[Titozzz]

I need this too 😢 , any chance it's coming soon ?

[SaKKo]

I need this too T____T

[0x5e]

Need this too :-)

[hramos]

Please go ahead and and split this out into a separate package, now that the other PR has landed.

[dahjelle]

@farazs Now that #15016 is merged, is it possible to implement WebView file upload either ourselves or as an external package? I'm looking at it, but I haven't yet figured out yet if that'd work. Or is a RN fork still the best option?

[dahjelle]

Here's a sample of what I did to get Android WebView file upload working in my project, in case it is helpful to anyone else.

I suspect one could make an external package based off of that, but I've not dove in to that.

Hope it helps someone!

[spearmootz]

this is terrible! why would this be split up in a different package?

for the sake of argument, this package can become stale and not get any new features that get added to react-native.

@farazs could this work/be made as a higher order component?

[JustPassingThrough]

Still waiting for this, with an app which should've gone into production a long time ago.
@farazs or anyone else, what can be done to get this feature added?

[hramos]

WebView accounts for a good chunk of issues opened on the repo, but these issues don't seem to affect Facebook's own internal use cases. This is why I highly recommend that the community step in and provide a WebView module.

[farazs]

Sorry I have not had time to take a look at this. It doesn't seem like it will get merged into the WebView component itself though I'm not sure why. Are no further improvements going to be made to the react-native webview? Until it's actually pulled out into it's own community WebView module how are any updates going to be made?

Someone would have to put the time creating and owning the WebView module and I don't think I can be that person. If someone creates such a module I would be happy to port this PR over there.

[guguji5]

Hi @farazs, thanks for your share. Unfortunately it doesn't work to me.
I have modify the react native source code according to the changes of this PR . But the input type=file is missing in my webview.

[guguji5]

@yihanseattle the change of this PR works? could you share some experience?

[farazs]

@guguji5 I'm not sure what you mean. Even without support for , the issue is that nothing happens in the webview. Are you saying the element itself is not in your webview? That may be an issue with the page you are trying to load.

You would need to fork react native, apply these changes to that fork, and then use that fork when building your application. See https://facebook.github.io/react-native/docs/building-from-source.html

[farazs]

We are using these changes in production so they definitely do work for me. master may have diverged from this branch significantly so the changes might need to be altered slightly.

[guguji5]

@farazs yes. I can't see the element input type=file of my page in the android webview. it's a little weird.

[guguji5]

@farazs I modify the react native file in the node_module folder of my project according to this PR changes, and run react-native run-android . But it seems nothing changed.

[farazs]

@guguji5 Please see the link I posted. Editing the node_modules folder is not sufficient to get your project to build the source from there.

For further issues, your questions might be better suited to stackoverflow as it's not specific to this pull request but regarding building react-native from source for Android in general.

[guguji5]

@farazs ok .thank you very much.

[pratikbutani]

Hope this answer will help you.