Custom button with UploadiFive plugin

Question

I'm trying to customize the button of 'Select File' using UploadiFive plugin and all works fine, but only a portion of the area of the button is able to open the Load Dialog.

Only the Upper area works. If the button has 35px height, only the upper 15px do the work. What's wrong?

CSS:

.uploadifive-button {
padding:5px 20px;
background-color:#1F87C4;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #1A6EA1;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
text-decoration:none;
text-align:center;
margin:0 auto;
}
.uploadifive-button:hover {
    background-color:#1A70A3;
    border:1px solid #165E8A;
}

and Javascript:

$('#file_upload').uploadifive({
        'auto'              : true,
        'buttonText'        : 'Upload Image',
        'hideButton'        : true,
        'wmode'             : 'transparent',
        'formData'          : {
                               'timestamp'  : timestamp,
                               'token'      : salt,
                               'dest'       : $('div#dest').html(),
                               'obj'        : $('div#obj').html()
                             },
        'queueID'           : 'queue',
        'removeCompleted'   : true,
        'uploadScript'      : '/upload_image_objet.php',
        'onUploadComplete'  : function(file, data) {update(data);}
    });

Michele · Answer 1 · 2019-11-19T11:26:52.597

This is the solution.

$( document ).ready(function() {


    $('#file_upload').uploadifive({
    'buttonText'        : 'Seleziona file',
    'uploadScript' : 'uploadifive.php',
});



$("#uploadifive-file_upload").removeClass('uploadifive-button');
$("#uploadifive-file_upload").removeAttr('style');
$("#uploadifive-file_upload").addClass('btn btn-warning m-btn m-btn--icon');

});

Last row is class of Bootstrap 4 button style.

Important: set position relative to button after remove "style" otherwise not work!!!

score 0 · Accepted Answer · answered Mar 18 '14 at 18:00

Finally I could guess, inspecting with Firebug, that another input tag was being placed in the DOM. So, the solution is modifying the new input style adding the new 'width' and 'height'.

it cost me many hours to discover.

I hope this can help anyone else.

Here is the code that Firebug shows:

<input id="file_upload" class="uploadifive-button" name="file_upload" type="file" style="display: none;"/>

Custom button with UploadiFive plugin

2 Answers2