File input on android (permissions issue? manifest issue? webview issue?)

[sterile bloom]

Hello, i've seen a lot of questions about "how do I do X on android", but i havent' seen whether this is something we should already do or not.

If I have

input {
    id: "profile-photo-upload",
    r#type: "file",
    accept: "image/*",
    style: "display: none;",
    required: true,
    onchange: user_submit_image,
}

on linux, this opens the file picker, great! I naively thought that because we're using a web renderer, maybe this will work on android like it does on a web browser.

So i made my beautiful input form only to discover... it doesn't. But, im hoping that maybe this is a permissions thing? Do I need to edit a manifest.xml or something? I'm a bit new to this, both in general and in the case of doing it for a dioxus app, so any advice would be great 🥺

Really hoping I didn't just open up a giant rabbit hole.. ><

Picture for attention 😛

[sterile bloom]

also, android webview in theory SHOULD work with something like this right?
https://auto-animate.formkit.com/
just noticed my animations aren't working on my phone hm 🙁

[sterile bloom]

im guessing waiting until #contributors message lands is probably the best idea, im just hoping that after enabling that permission this stuff will... just work? or is that too much? maybe i do need some java code to make the file browser appear..

[sterile bloom]

I tried adding my own android manifest xml, but my app screen was just white and my log was crashing on startup, so im not sure if i did anything wrong

<?xml version="1.0" encoding="utf-8" ?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    
    <application
        android:hasCode="true"
        android:supportsRtl="true"
        android:icon="@mipmap/ic_launcher"
        android:extractNativeLibs="true"
        android:allowNativeHeapPointerTagging="false"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:networkSecurityConfig="@xml/network_security_config">
        
        <activity
            android:configChanges="orientation|screenLayout|screenSize|keyboardHidden"
            android:exported="true"
            android:label="@string/app_name"
            android:name="dev.dioxus.main.MainActivity">
            
            <meta-data android:name="android.app.lib_name" android:value="dioxusmain" />
            <meta-data android:name="android.app.func_name" android:value="ANativeActivity_onCreate" />
            
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

And the only mechinism i have for uploading files is this

// Hidden file input
input {
    id: "profile-photo-upload",
    r#type: "file",
    accept: "image/*",
    style: "display: none;",
    required: true,
    onchange: user_submit_image,
}

// Styled label that triggers the photo upload
label {
    r#for: "profile-photo-upload",
    class: "btn btn-secondary",
    if image_loading() {
        span { class: "loading loading-spinner" }
    }
    else if profile().picture.is_some() {
        "Change picture"
    }
    else {
        "Upload image"
    }
}

File input on android (permissions issue? manifest issue? webview issue?)

i guess im asking myself

1. Does webview / dioxus support file input out of the box on android?
2. Are permissions required to do so?
3. Should I just ignore this for now and move on, or should i invest time into working around it

[orchid ore]

I guess the way forward here would be to research how this works for the Android webview in general. And perhaps even create a toy native android app to play around with. And then once we've worked that out, we could look into applying the same approach to wry/dioxus.

[sterile bloom]

oh... so you're telling me i AM in uncharted territory? I dont have to upload files this way if there's an easier way forwards using java or something if thats how others have done it? Or is this still bleeding edge

i was kind of hoping that PR might help me out in some way

[orchid ore]

I mean, just because I don't know how this works doesn't mean that nobody does.

[sterile bloom]

im really surprised how difficult it is to research this, there's a few answers on stack overflow but i dont know if i'd trust them

https://stackoverflow.com/questions/34891352/android-choose-file-button-in-webview

along with this medium article with a quiet reception

https://medium.com/@astokum/how-to-enable-and-set-up-file-upload-feature-in-webview-android-development-9566f4ceadef

However there is a pattern, webView.setWebChromeClient seems to be the insertion point, although its unclear if you need to override onShowFileChooser or openFileChooser, and how to do any of this.

Is this something you think i could do in my application, or should is this something dioxus handles and therefore i should be trying to contribute it in there, sorry for just throwing this at you haha

[sterile bloom]

i appreciate the honesty 🙂

currently going through dioxus source code to see if there's anywhere remotely similar to what im seeing on the subject online

[orchid ore]

You may also want to look in the wry crate source code. That crate provides the webview abstraction that dioxus uses.

[sterile bloom]

that might give me a lead, maybe there's github issues there on the subject

wry is all platforms, right?

This issue is curious
https://github.com/tauri-apps/wry/issues/1349
it seems to suggest that while there might be a bug (i find the issue a bit unclear), it is already supported in some way

makes me wonder what's going on for us. When I tried adding the permission with a custom AndroidManifest.xml i just got a white screen, so i guess if i look into fixing that maybe it'll just work? ( 🙏 )

[sterile bloom]

Something interesting is happening when i work on the AndroidManifest.xml - this is the only thing I've added:

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

After deleting target and running a fresh android build via dx serve --android --device, the app loads like normal (although the file input still fails to work). Hitting r and rebuilding works fine as well.

But if i then ctrl-c and then re-serve the application, my app fails to open and crashes on startup immediately every time

its weird how it goes from dev.dioxus.myapp to com.example.myapp

Shutting down VM
FATAL EXCEPTION: main
Process: com.example.MyApp, PID: 15846
java.lang.UnsatisfiedLinkError: dlopen failed: library "libssl.so" not found: needed by /data/app/~~OMwIt_kDyJoCyeMYGZLlgQ==/com.example.MyApp-EcU68x0M_421ESXbluQVrw==/lib/arm64/libdioxusmain.so in namespace clns-99)

I fixed this with in Cargo.toml

# Fixes android builds when re-served with a custom AndroidManifest.xml
[target.'cfg(target_os = "android")'.dependencies]
openssl = { version = "0.10", features = ["vendored"] }

although its weird that I could only find this in the 0.6 documentation and not in 0.7