Choose image / camera from HTML Site and Upload it

Hi,

I have a php/html site which is called from a WebView in my app

At this site, there is a function to select / take an image

  <div class="modal-body">
  	<div class="form-group">
        <label for="fbild">Bildupload aus Galerie:</label>
        <input class="form-control" type="file" id="fbild" name="fbild" capture="user" accept="image/*,video/*">
    </div>
    <div class="form-group">
        <label for="fbild2">Bildupload mit Kamera aufnehmen:</label>
        <input class="form-control" type="file" id="fbild2" name="fbild2"  capture="environment" accept="image/*;capture=camera">
        <input type="hidden" name="fid" id="fid" value="">
    </div>
  </div>

But, I do click both and nothing happens, I think this is due that an popup is opening... any Ideas how this can be solved?

I tried already CustomWebView, but found nothing that solves the problem

This is working, I can cancel and the popub is closing, but upload is not working:

<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">Abbrechen</button>
        <input type="submit" class="btn btn-primary" name="fensterfotos" id="fensterfotos" value="Bild hochladen">
      </div>

You need the webviewextra extension to provide upload/download functionality in your webviewer

Test if your site works to take a picture using the device's default browser

It might be that the webviewer needs more to do this:

I asked Brave:

##########################

Open Camera in WebView

To open the camera from an Android WebView to take a picture, you need to implement a custom WebChromeClient and handle the file upload request properly.

Key Steps:

  • Set a WebChromeClient with onShowFileChooser() overridden to handle the camera and gallery options.
  • Request permissions for CAMERA and WRITE_EXTERNAL_STORAGE in AndroidManifest.xml.
  • Use Intent.ACTION_IMAGE_CAPTURE to launch the camera, specifying a file path via MediaStore.EXTRA_OUTPUT.
  • In onActivityResult(), retrieve the captured image and pass it back to the WebView using the ValueCallback.

Example Implementation:

webView.setWebChromeClient(new WebChromeClient() {
    private ValueCallback<Uri> mUploadMessage;
    private final static int FILECHOOSER_RESULTCODE = 1;

    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        if (mUploadMessage != null) {
            mUploadMessage.onReceiveValue(null);
        }
        mUploadMessage = filePathCallback;

        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
            File photoFile = createImageFile();
            if (photoFile != null) {
                Uri photoURI = FileProvider.getUriForFile(this, "com.example.fileprovider", photoFile);
                takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, photoURI);
                startActivityForResult(takePictureIntent, FILECHOOSER_RESULTCODE);
            }
        }
        return true;
    }
});
  • Handle result in onActivityResult() to send the captured image back to the WebView.

This approach enables users to take a photo directly from the WebView using the device camera.

############################

The workaround, whilst not ideal, is to take a picture with the device, then request the image upload through the website. The filepicker generated will open up your storage so you can browse to the file (/DCIM/Camera)

1 Like

BTW:

With the WebViewextra I can open the Gallery of the device, select an image and upload it

But open the camera is not working...

With the CustumWebView Extension, it is working to open the camera, but NOW the Gallery is not opening any more....

Dear Tim,

thank you!

But how and where can I implement this?

An extension is required, or I need to further develop webviewextra to handle this.

1 Like

This would be absolutely great if you find the time !

In the FileUploadedNeeded event, use a choose notifier to select either pick file or take picture, then handle the response in the afterChoose event.

This is how I have done it:

It is working, BUT:

  • you can only choose once if Gallery or Camera, so you can not switch between them
  • when I choose Gallery, I have to push the HTML5 Button a second time to open the gallery
1 Like