Android Code Snippet Upload files with WebView

Code requires Android 5+

1. Set a custom WebViewChromeClient. It is implemented with inline Java code.

2. The ShowFile_Chooser event is raised when the user clicks on a "browse" button.

3. You need to get the file URI with FileProvider and call SendResult.
Example based on ContentChooser.

Sub ShowFile_Chooser (FilePathCallback As Object, FileChooserParams As Object)
   cc.Initialize("CC")
   cc.Show("*/*", "Choose File")
   Wait For CC_Result (Success As Boolean, Dir As String, FileName As String)
   Dim jo As JavaObject = Me
   If Success Then
       Log(FileName)
       File.Copy(Dir, FileName, Provider.SharedFolder, "TempFile")
       jo.RunMethod("SendResult", Array(Provider.GetFileUri("TempFile"), FilePathCallback))
   Else
       jo.RunMethod("SendResult", Array(Null, FilePathCallback))
   End If
End Sub

Project is attached. Don't miss the manifest editor entries that are required for FileProvider.

Example of requesting the Geolocation permission: https://www.b4x.com/android/forum/threads/webviewextra-2-2-enable-geolocation.114147/post-712994

 

[Erel]

It will not work with WebViewExtras as it replaces the WebChromeClient.

 

[Erel]

You cannot use both. You can see how I've implemented the custom WebChromeClient and add more features to it.

 

[theunis]

hi there, when I run the example the https://b4x.com:51041/websocket_with_fileupload/index.html doesnt display - any other url is fine and displays - I just need to know if it is a setting I need to change before I try an adapt this to see if it will work for my project.

many thanks
T

 

[Erel]

Your device probably doesn't recognize the certificate.

 

[rosippc64a]

Hi Erel,
maybe file download is also possible?

 

[DonManfred]

maybe file download is also possible?

you should use the overrideurl event and download the file using okhttputils2.
Search the forum. There are examples.

 

[rosippc64a]

Hi DonManfred,
that was only a rhetorical question I know and can use the okhttputils2, but my download link goes to a download php what needs an authentication what can made only a browser (webview e.g.) and the login data is stored in php session variables what unknown by okhttputils2.

 

[JohnC]

I tired using this example (but to a custom URL), and I get a "The page at "[custom url]... File Type is not allowed" error when I click on an image to upload.

But if I navigate to this same exact page using my regular chrome browser and try to upload the same exact file, it will work fine.

Any ideas?

 

[Erel]

Does it work with the url from the example?

 

[JohnC]

Yes, it does work, but I do not have access to the webpage's source to see what it is doing.

For example, the webpage I am accessing doesn't have a "submit" button - it will upload the image as soon as it is selected.

But were is this "file type is not allowed" message being generated from? Is it from the webpage at the selected URL or is it being generated locally from the app?

 

[Erel]

But were is this "file type is not allowed" message being generated from?

From the web page.

 

[JohnC]

But then why does the same webpage accept the same exact file from the chrome browser on my phone, but rejects that same exact file using this webview project?

 

[Erel]

Impossible to say without learning the exact parameters that are required by this page.

 

[tuhatinhvn]

can we upload multi files if webview support it?
i saw current is only single file ??

       File.Copy(Dir, FileName, Starter.Provider.SharedFolder, "TempFile")
       jo.RunMethod("SendResult", Array(Starter.Provider.GetFileUri("TempFile"), FilePathCallback))

 

[Erel]

The example can only handle a single file.

 

[JohnC]

OK, I spent a LOT of time obtaining the source code for the webpage that gave me an error and I had a hard time reducing the PHP code in it to the bare minimal because I don't know PHP very well, but I now have a simple example that demonstrates my problem with this webview example.

This demo webpage works fine if you use the chrome browser to upload an image file. But if you try to use the sample code in the OP to upload the same exact file, you will get a "File type is not allowed!" error.

To run the demo webpage:
1) Copy the files fileupload.php and jquery.min.js into any directory of a website.
2) Navigate to the fileupload.php page using a chrome browser
3) Click the "browse" button and upload the attached "ASLogo.jpg".
4) The attached webpage will display the uploaded image on the webpage (the image is uploaded into memory, so no file permissions are needed)
5) Now run the sample webview code in the OP (with the .LoadURL set to the page of the attached demo webpage).
6) Click the browse button and select the attached "ASLogo.jpg"
7) You will get a "File type is not allowed!" error.

Any help to find out why this webview example doesn't work with the attached webpage but does work with a chrome browser would be greatly appreciated.

 

[Brandsum]

you will get a "File type is not allowed!" error.

This error is coming from the JavaScript instead of php. What happening is after choosing the file a JavaScript function is extracting the extension from the file name and checking if its end with jpeg, jpg or png. If its not then the error message is coming. Check line 32 of fileupload.php and add this following line after that line to check what file name your webpage is receiving,

alert(this.files[0].name);

 

[JohnC]

The alert displays "TempFile", which obviously is not a valid filename.

This error happens with both <24 API and >24 API.

I see where Erel is using "TempFile" in his example, and I will see why its not "FileName"...

 

[JohnC]

OK, the problem seems to be this...

Erel's code assume the website will not check the extension of the filename (because his code always uploads the file with the name "TempFile"

So, I could manually extract the extension from the file name by looking to the right of the ".", but then all files will be uploaded as "tempfile.xxx" where the xxx is the extension of the file selected by the user.

What would be better is if I can upload the file using it's actual filename, but I am not sure what the universal way to do this, so I posted a question here:

https://www.b4x.com/android/forum/threads/get-name-of-file-from-contentchooser-result.108120/