New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File input support #5050

Closed
ghost opened this Issue Sep 21, 2012 · 10 comments

Comments

Projects
None yet
5 participants
@ghost

ghost commented Sep 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Sep 21, 2012

Contributor

+1

Contributor

frequent commented Sep 21, 2012

+1

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 21, 2012

Contributor

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.

Contributor

toddparker commented Sep 21, 2012

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 ghost assigned jaspermdegroot Sep 21, 2012

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Sep 21, 2012

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.

ghost commented Sep 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 21, 2012

Contributor

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.

Contributor

toddparker commented Sep 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 21, 2012

Contributor

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.

Contributor

toddparker commented Sep 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Sep 21, 2012

Contributor

👍

Contributor

MauriceG commented Sep 21, 2012

👍

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 12, 2012

Contributor

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.

Contributor

toddparker commented Oct 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@teo1978

teo1978 Jun 2, 2013

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

teo1978 commented Jun 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 3, 2013

Member

@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.

Member

jaspermdegroot commented Jun 3, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@teo1978

teo1978 Jun 3, 2013

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

teo1978 commented Jun 3, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 3, 2013

Member

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

Member

jaspermdegroot commented Jun 3, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment