9 Replies Latest reply on Jan 16, 2014 2:09 AM by Bart Fukkink

    Input type="File" not working on Android

    Bart Fukkink

      While working on our application to create a method of the user uploading files, we ran into a problem. The input type file is not working on Android devices.

       

      To reproduce this:

       

      1. Create a new application.

      2. Add a model (attributes dont really matter).

      3. Open the new.erb file of the model.

      4. Add

      <input type="file" />
      

      to the form.

      5. Run the application.

       

      You will get a lovely "Choose file" button. And when opening this on the simulator, a dialog box opens that allows me to choose a file. Our Ipad3 gives us the option to select a file from several diffrent sources. But when trying to use it on Android devices (Samsung Galaxy Tab 10.2 (Android 4.0.3) and Nexus S (Android 4.1.2) ) the button does not respond to any input. After checking the LogCat I did not find any new information about this issue.

       

      Could anyone advice me on how to implement this form button?

       

      Update: Also, after some testing around with diffrent options, the FileReader API seems to be not implemented. Is there any chance this new API will be implemented soon?

        • Input type="File" not working on Android
          Bart Fukkink

          Is there anyone who could shed some more light on this matter? It is long enough without a reaction from anyone in my opinion.

          • Re: Input type="File" not working on Android
            Robert Galvin

            Bart

             

            Are you using Motorola Webkit (app_type:rhoelements) or Stock Webkit ? I do not beleive RhoElements supports that type? For RhoElements you can use the FileTransfer API . For Rhodes/stock webkit you can use our AsyncHTTP.upload_file API.

            1 of 1 people found this helpful
              • Re: Input type="File" not working on Android
                Bart Fukkink

                Robert,

                 

                Sorry for the late response.

                 

                We are using the stock RhoElements.

                And that AsyncHttp.upload_file API looks really good. But I think you agree with me that its uses become quite limited when you dont have the option, as a user, to select a file.

                 

                Are there any other front-end options (html - javascript) tools that you could suggest to use to let the user select a file?

                 

                Kind regards,

                Bart.

              • Re: Input type="File" not working on Android

                Google does not recommend to get users access to file system directly. Thats possible reason.

                Did you tried to add 'sdcard' capability to app's build.yml

                Even if the above advances do not work you may design you own GUI to list and select files using common ruby:

                Dir and File is fully workable

                 

                http://ruby-doc.org/core-1.9.3/File.html

                http://ruby-doc.org/core-1.9.3/Dir.html

                  • Re: Input type="File" not working on Android
                    Bart Fukkink

                    Hello Alexey,

                     

                    Sorry for the late response, I got caught up in other activities.

                    I have now added the "sdcard" capability to the application, sadly to no avail. Nothing changed at all.

                     

                    And we have considered making our own gui in combination with the File and Dir ruby methods, but it currently takes up to much time to make it, just for Android, since iOS and the Windows version are working just fine.

                     

                    Thank you for the response, sadly it didnt help me fix the problem.

                  • Re: Input type="File" not working on Android

                    taking picture with camera or choosing file is not supported in the same way it is working in normal web application if you are using rhoelements, you must explicitly used

                    Camera API, check this link it helped me understood how to implement it,

                    http://docs.rhomobile.com/imageupload-tutorial

                    You can implement the Camera API either in javascript or Ruby controller. But I suggest implement the camera API in the javascript,so no need for rendering a new page instead doing it asynchronously unlike calling a Ruby Controller to execute the Camera API, thus will require you to render a new page.

                    eg.:

                    function selectPicture(useCamera){
                          if(useCamera){
                            Rho.Camera.take_picture(getPicCallback);
                          }else{
                            Rho.Camera.choose_picture(getPicCallback);
                          }
                        }
                       //this ajax call pass the filename of the selected picture to the ruby controller
                        function getPicCallback(opt){
                          $.ajax({
                            url : "urlToRubyController",
                            data : {
                              filename : opt.image_uri
                            },
                            type: "post",
                            success : function(data) {
                              //sample
                            }
                          });
                        }
                    

                    In addition, I believe Camera API is better than how the normal browser implements file chooser since it doesn't require you to use file input, you could just use any normal button/link to.Then with combination of AsyncHttp.file_upload(http://docs.rhomobile.com/rhodesapi/asynchttp-api/), you could upload the file in this way(this is in the ruby controller called by the javascript),

                     

                    #this is required to fetch the file from the relative path provided
                    filepath = Rho::RhoApplication::get_blob_path(filename)
                    
                        Rho::AsyncHttp.upload_file(
                    
                        :url => url,
                    
                        :headers => headers,
                    
                        :callback => callback,
                    
                        :callback_param => callback_params,
                    
                        :multipart => [
                    
                          {
                    
                          :filename =>filepath,
                    
                          :name => "photo"
                    
                          },
                    
                           #additional single parameter
                    
                          {
                    
                          :body => "rhoconnect-token",
                    
                         :name => "token",
                    
                         :content_type => "plain/text"
                    
                          }
                    
                        ]
                    
                       )
                    
                    • Re: Input type="File" not working on Android
                      ag@miu.mx

                      I've put together a working solution based on various code snippets. Feel free to use it.

                       

                      Add this to GoogleWebView.java (after line 53/"mChromeClient = new RhoWebChromeClient(activity, this);"):

                       

                      /** Credits to:

                               ** * Robert Hahn & Fujix from http://stackoverflow.com/questions/10953957/webview-android-4-0-file-upload

                               ** * user741148, Bill the Lizard, Jbane, hifarrer, Michel Oliver, Yaakov, stalepretzel, Rupert Rawnsley & Pargna from http://stackoverflow.com/questions/5907369/file-upload-in-webview    

                               ** * m0 from http://m0s-programming.blogspot.in/2011/02/file-upload-in-through-webview-on.html             

                               ** **/

                              mWebView.setWebViewClient(mWebViewClient);

                              mWebView.setWebChromeClient(mChromeClient);

                       

                      After that, replace RhoWebChromeClient.java's include snippet (all the "include" directives right at the beginning) With this snippet:

                       

                      import android.app.Activity;   

                      import android.content.Intent;

                      import android.view.Window;             

                      import android.webkit.GeolocationPermissions;

                      import android.webkit.JsPromptResult;

                      import android.webkit.JsResult;

                      import android.webkit.WebChromeClient;

                      import android.webkit.WebStorage;

                      import android.webkit.WebView;               

                      import android.webkit.ValueCallback;             

                      import android.net.Uri;

                       

                      import com.rhomobile.rhodes.Logger;

                      import com.rhomobile.rhodes.RhodesActivity;

                      import com.rhomobile.rhodes.extmanager.IRhoExtension;

                      import com.rhomobile.rhodes.extmanager.IRhoWebViewConfig;

                      import com.rhomobile.rhodes.extmanager.RhoExtManager;


                       

                      Finally, add this to RhoWebChromeClient.java (right before the last curly bracket):

                       

                       

                          /** Credits to:

                           ** * Robert Hahn & Fujix from http://stackoverflow.com/questions/10953957/webview-android-4-0-file-upload

                           ** * user741148, Bill the Lizard, Jbane, hifarrer, Michel Oliver, Yaakov, stalepretzel, Rupert Rawnsley & Pargna from http://stackoverflow.com/questions/5907369/file-upload-in-webview    

                           ** * m0 from http://m0s-programming.blogspot.in/2011/02/file-upload-in-through-webview-on.html             

                           ** **/

                                   

                          // The undocumented magic method override

                          // Eclipse will swear at you if you try to put @Override here

                           // For Android 4.1+

                          public void openFileChooser( ValueCallback<Uri> uploadMsg, String acceptType, String capture )

                          { 

                              ((RhodesActivity)mActivity).mUploadMessage = uploadMsg; 

                              Intent i = new Intent(Intent.ACTION_GET_CONTENT); 

                              i.addCategory(Intent.CATEGORY_OPENABLE); 

                              i.setType("image/*"); 

                              mActivity.startActivityForResult( Intent.createChooser( i, "File Chooser" ), ((RhodesActivity)mActivity).FILECHOOSER_RESULTCODE ); 

                          }

                          // For Android 3.0 - 4.1              

                          public void openFileChooser( ValueCallback<Uri> uploadMsg, String acceptType)

                          {                              

                              openFileChooser( uploadMsg, "", "" );

                          }

                          // For Android < 3.0

                          public void openFileChooser( ValueCallback<Uri> uploadMsg )

                          {

                              openFileChooser( uploadMsg, "", "" );

                          }


                       

                      Please post/vote if it helped. Thanks & have an awesome day.