How to assign custom css class to upload button in fineuploader?

Question

I have below code to initialize the fineuploader. i want to assign my custom class to upload button. I tried mentioning subelement button: 'my-custom-class' under classes element(as shown below) but issue is button is not displayed. i am not sure what i am missing here?

$("#my-file-uploader").fineUploader({
request: {
        endpoint: 'my endPoint'
    }
classes: {
   success: 'alert alert-success',
   fail: 'alert alert-error',
   button: 'my-custom-class'
}

});

Update:-

I also tried but then button click does not work

$("#my-file-uploader").fineUploader({
request: {
        endpoint: 'my endPoint'
    }
 classes: {
   success: 'alert alert-success',
   fail: 'alert alert-error',
  button: 'my-custom-class''
},
template: '<div class="qq-uploader">' +
 '<div class="my-custom-class'"><div>my upload</div></div>'  +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>'

Update 2:-

I tried approach 1 as suggested by Ray in first answer it works. But i see two issues here:-

Issue 1:- if i use any predefined jquery ui class for upload button like ui-button , it does not work.Though it works with any other custom class.

Issue 2:- If i need to use use multiple custom class for upload button, say button: 'my-custom-class1 my-custom-class2'. Is it achievable? If yes how will i initialize the fineUploader in that case?

   $("#my-fine-uploader").fineUploader({
    button: $(".my-custom-class1 .my-custom-class2")
});

Answer 1

There are a couple ways to customize your upload button (though the first approach is currently preferred):

Option 1: Contribute your own upload button via the button option

This is currently the preferred, and easiest way to customize the upload button.

First, create an empty element/container. In your case, it looks like you want to use a div, just with a specific CSS class:

<div class="my-custom-class"><div>Select a file</div></div>

Then, tell Fine Uploader that you want it to use this container element as your upload button. It will take care of embedding an opaque <input type="file"> element as a child of this container, and will track it as it would the default upload button:

$("#my-fine-uploader").fineUploader({
    button: $(".my-custom-class")
});

You can read more about the button option on the Fine Uploader documentation site.

Option 2: Override the template option

This is another possible way to customize the upload button, but it is not currently recommended. Templating in Fine Uploader is a bit inconvenient currently, but we intend to change that once feature #867 is completed. It looks like you already attempted to do this, but did not execute it correctly. If you really want to do it this way anyway, you can adjust the template option like so:

$("#my-file-uploader").fineUploader({
    template: '<div class="qq-uploader">' +
              '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' + 
              '<div class="my-custom-class"><div>{uploadButtonText}</div></div>' +
              '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
              '<ul class="qq-upload-list"></ul>' +
              '</div>',    
    classes: {
        button: 'my-custom-class'
    }
});

You can read more about styling Fine Uploader and overriding the default templates on the Fine Uploader documentation site.