Modify jQuery Mobile (jqm) file upload button

Question

I am looking to modify the Standard file upload button provided by JQuery Mobile to custom file upload button. (see below) Tried several ways to override the styling with not much success. Can someone please suggest how I can achieve this ?

Standard file upload button

Custom File Upload Buttom

<style>
div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 426px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
</style>


<script>
$(document).on('pageinit','#address_form',function (event){     
   $('#upload_button').parent('.ui-btn').css('width','334%');
})
</script>

<div data-role="page" id="address_form">
    <div data-role="content">
      <div class='container_12'>
        <div class='grid_12 fileinputs' >
        <input type="file"  class="file" style='opacity:0;' />
        <div class="fakefile" style='padding: 1.8%;' >
            <input id='upload_button' type="button" value="Upload" style='' />
        </div>
        </div>
      </div> 
   </div>
</div>

what you have tried? I dont think it is possible without using another code of jquery. — Richa, Dec 24 '13 at 05:34
I tried suggestion on this link, but had issues setting the button size to suit responsive web design. (I will add the code to my question) http://stackoverflow.com/questions/4532733/styling-input-type-file — kurrodu, Dec 24 '13 at 05:53
Have you tried adding a label for the upload field, then hiding the field? Clicking the label activates the field in Safari and Chrome. — Dave Everitt, Jan 25 '14 at 17:47

score -1 · Answer 1 · answered Feb 14 '14 at 16:01

I used this in a project recently, this should do you fine - cross browser too.

html

<div id="UGC_sign_up">
<form id="form" name="frmUpload" action="" enctype="multipart/form-data" method="post">
<input type="file" name="myFile" id="browse">
<!-- your button image below id image -->
<img id="image" src="upload.png" onclick="HandleFileButtonClick();" />
</form>
</div>

css You can position as you want but example I used below:

#UGC_sign_up{
display: none;
position: relative;
}
#form{
position:relative; display: block;
width:200px; height:200px;
}
#image{
position: absolute;
top: 10px; left:20px;
display: block;
width:200px; height:150px;
}

jquery for adding in the click event to the image from the file button

/* associate click of browse button to image */
function HandleFileButtonClick(){ /* this click event is in the image */
    document.frmUpload.myFile.click(); /* "myFile" is name field for the browse input button */
}

Warning - click() won't work in Chrome (or Safari - I believe) - the label solution described in the comments to the original question does work for Chrome - I haven't tried this with other browsers. — AndyS, Aug 02 '17 at 11:57

score -1 · Answer 2 · answered Nov 09 '15 at 00:34

The easiest AND PRETTIEST way to do this is by simply hiding the file input field and triggering a click on that field from another button that you can style exactly as you wish. Here's how I do it:

Basic HTML & Javascript Example

<input id="csv" type="file" style="display:none;" />
<a href="javascript:void(0);" onclick="document.getElementById('csv').click();">Select</a>

Basic HTML & jQuery Example

<input id="csv" type="file" style="display:none;" />
<a href="javascript:void(0);" onclick="$('#csv').click();">Select</a>

Again - not a jQuery Mobile solution - sorry – AndyS Jul 31 '17 at 21:03 — AndyS, Jul 31 '17 at 21:03

AndyS · Answer 3 · 2017-07-31T21:13:09.220

-1

I've had some success with this. I tried having a jQuery mobile button do a $('#id_of_file_input').click(), but this didn't work - I'm using Chrome.

So, I found that a label for a file input will accept a click as well.

So, here is a solution:

<input id="upload_media" class="hidden" type="file" onchange="index.handle_upload_media();"/>
<div class="btn-group" role="group">
    <label for="upload_media" type="button" class="btn btn-primary">
        <span class="glyphicon glyphicon-floppy-open"></span> Upload Media
    </label>
</div>

Notes: The input itself is hidden, but the label references it's id. For the button to look right, I had to but the button type and classes in the label - the mouse over works as well. My handler is the index.handle_upload_media()...

Hope this helps - Andy

edited Jul 31 '17 at 21:13

answered Jul 31 '17 at 21:00

AndyS

725
7
17

Not much detail in your solution though - nothing more than the other comments. – Jamie Paterson Aug 02 '17 at 10:30
I'm not sure what detail you expect - this is an answer to the question. It is a jQuery Mobile solution - as requested - unlike the other answers. Unlike the comment about a label - this also works as a jQuery Mobile button. I have a lot more detail on handling the upload - but that doesn't answer the question... – AndyS Aug 02 '17 at 11:41

Modify jQuery Mobile (jqm) file upload button

3 Answers3