File input support

[ghost]

At the moment I am using http://fineuploader.com/ to support file uploads in desktop browsers.

Will jQuery mobile support file input out of the box?

[frequent]

+1

[toddparker]

I think we need to give this a look now that it's better supported. It may not be something we will attempt to style because these are locked down for security reasons.

[ghost]

The button is styleable though?

I wonder how that would work on mobiles and tablets since they don't allow uploading files from the browsers.

Fineuploader doesn't work on mobile browsers.

[toddparker]

From our experience on desktop, file uploads aren't stylable really at all and I'd expect mobiel to be the same. They are a black box, probably for security reasons. The only hack we've found that works is to place the native file input over a custom styled widget and make it invisible so you're essentially clickjacking. Probably too ugly to do here and you miss out on the whatever native capabilities are present. For example, iOS6 shows little thumbails of selected photos.

[toddparker]

I just tested what would happen if I added file inputs to our standard class enhancements and so far so good. Looks good on iOS6, Chrome, Safari, and Android 4+ (need to check 2-3). If you want to active styles for these now, just tack them into the initSelector. Demo here:
http://jsbin.com/ikolun/4
http://jsbin.com/ikolun/4/edit

Just add this script override between core and mobile refs in your head:

    <script>
$( document ).bind( "mobileinit", function(){
   $.mobile.textinput.prototype.options.initSelector = "input[type='file']";
});
  </script>

We need to do more testing before adding this by default, but we'll try to land this for 1.3.

[MauriceG]

👍

[toddparker]

Alright, I tested in a wide variety of browsers and devices and it's surprisingly consistent. The input around the button gets styled, but the button seems off limits. Looks nice on the browsers above plus iOS6, Android 2.3, WP7.5 (file inputs render but don't seem to do anything when tapped), BB Playbook and more. Landing now.

[teo1978]

I don't get it: from the above discussion it looks like file upload fields are supposed to be styled by default, but I see them identical to without jqm on Android. Do I need to do the init thing above? If so I don't understand the last comment

[jaspermdegroot]

@matteosistisette

All browsers use different styles and many of those can't be overridden. That's why the only thing the jQuery Mobile framework does is wrapping the input in a div which we give some border and corner styling.
Your markup should look like this:

<label for="file-1">File:</label>
<input type="file" name="file-1" id="file-1" value="">

If that doesn't please provide info about the jQuery Mobile version and Android version that you are using.

[teo1978]

Turns out I wan't using the latest version of jqm because the "getting started" guide is out of date and links to 1.2 and I took for granted that was the latest version.
I'll try 1.3

[jaspermdegroot]

@matteosistisette - Can you paste a link to the "getting started" guide that you were looking at so we can update that? Thanks!