Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Input Type File Not Working on Android

Environment

Mobile development type Hybrid (Cordova app)
Mobile OS Android
Mobile OS version 4.4 KitKat and above

Description

Using <input type="file"> doesn't work on some Android devices. In most of the cases, when the Choose File button is tapped there is no response from the web view and the user cannot select a file from the device.

Steps to Reproduce

  1. Create a Cordova application.
  2. Insert the <input type="file"> element in the <body> of the index.html file.
  3. Build and deploy the project to an Android 4.4 or higher device.
  4. Try to interact with the Choose File button.

Cause

This is an external issue in the Google Chromium web view. More information about this is available here:

Solution

No verified solution available. Check the suggested workarounds instead.

Suggested Workarounds

Workaround #1

Replace the default web view in your application with Crosswalk which provides a fix for the <input type="file"> problem. You can find more about Crosswalk here.

  1. Open your project in Code (formerly AppBuilder).
  2. Make sure that it targets Cordova 4.0 or higher. If it doesn't, you will need to migrate it.
  3. Change the Android web view to Crosswalk.
  4. Build and deploy your AppBuilder project on Android device in order to verify that the change resolves the issue.

Workaround #2

Use a third-party Cordova plugin to handle the file upload on Android. Such plugin can be found here and to import in your AppBuilder project, you can follow these steps.

Workaround #3

If you want to upload an image from the device gallery or take a photo with the device camera, you can also use the Cordova Camera plugin integrated in Telerik Platform.

  1. Enable the Camera plugin from the Plugins page of your project.
  2. In your application, replace the <input type="file"> element with a call to the Camera plugin API. For example:
navigator.camera.getPicture(function(){
    // On Success logic
    that._onPhotoURISuccess.apply(that,arguments);
}, function(){
    // On Failure logic
    cameraApp._onFail.apply(that,arguments);
}, {
    quality: 50,
    destinationType: cameraApp._destinationType.FILE_URI,
    sourceType: PHOTOLIBRARY
});

IMPORTANT: Plugin APIs can be accessed after the deviceready event has fired. Otherwise, their JavaScript objects might be undefined.

To learn more about working with the Camera, check the Telerik Platform Camera sample app and the complete documentation for the Cordova Camera API.

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.