How To Assign Custom Css Class To Upload Button In Fineuploader?

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 eleme

Solution 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:

<divclass="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: '<divclass="qq-uploader">' +
              '<divclass="qq-upload-drop-area"><span>{dragZoneText}</span></div>' + 
              '<divclass="my-custom-class"><div>{uploadButtonText}</div></div>' +
              '<spanclass="qq-drop-processing"><span>{dropProcessingText}</span><spanclass="qq-drop-processing-spinner"></span></span>' +
              '<ulclass="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.