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);}
    });
Was it helpful?

Solution 2

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;"/>

OTHER TIPS

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!!!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top