Options

There are a lot more stuff than what’s describe below, please see the source code for more options.

Multi-select or single-select

If you don't want the user to be able to select more than one file, you can change the dialog mode to single select by setting the multiple option to false:

var fileUploader = new qq.FileUploader({
    multiple: false
});

Templates

You can customize the templates that is used in the upload control via the template and fileTemplate options:

var fileUploader = new qq.FileUploader({
    template: '<some markup>',
    fileTemplate: '<some markup>'
});

If you change the templates and the CSS names you must change the class names option.

template

If you want the template to be in the markup you can create a script-tag and put the markup there, then you can load the markup via JavaScript. Example:

Markup:

<script id="file-uploader-template" type="text/x-file-uploader">
    <your markup>
</script>

JavaScript (in this example we are using jQuery):

var fileUploader = new qq.FileUploader({
    template: $("#file-uploader-template").html()
});

The default template is:

template: '<div class="qq-uploader">' +
              '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
              '<div class="qq-upload-button">Upload a file</div>' +
              '<ul class="qq-upload-list"></ul>' +
          '</div>'

fileTemplate

The default fileTemplate is:

fileTemplate: '<li>' +
                  '<span class="qq-upload-file"></span>' +
                  '<span class="qq-upload-spinner"></span>' +
                  '<span class="qq-upload-size"></span>' +
                  '<a class="qq-upload-cancel" href="#">Cancel</a>' +
                  '<span class="qq-upload-failed-text">Failed</span>' +
               '</li>'

CSS class names

To change the naming of the classes that is used in the templates:

var fileUploader = new qq.FileUploader({
    classes: {
                   button: 'my-button', 
                   ...
            }
});

The classes that you must include in you classes option are:

• button
• drop
• dropActive
• list
• file
• spinner
• size
• cancel
• success
• fail

Please see the source code for more information