Choose image / camera from HTML Site and Upload it

MIT App Inventor Help
1

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>
2

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)