{% extends "_templates/base.html" %}
{% block content %}
{% markdown %}
## Styling FineUploader

### Templates

The `template` option contains default elements with default classes that make up the uploader as a whole in the DOM.  For example,
the first default element in `template` is a `div` with a class of `qq-uploader`.  This is the parent element of the uploader.
The default drop area, button, and file list elements are also, by default, contained in this option.  You can use this option to
add additional elements, modify default template elements, etc.  There is also a `fileTemplate` option which contains
default elements that make up one file item in the file list.

Here is the default `template` option:

```javascript
template: '<div class="qq-uploader">' +
    ((!this._options.dragAndDrop || !this._options.dragAndDrop.disableDefaultDropzone) ? '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' : '') +
    (!this._options.button ? '<div class="qq-upload-button"><div>{uploadButtonText}</div></div>' : '') +
    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
    (!this._options.listElement ? '<ul class="qq-upload-list"></ul>' : '') +
    '</div>'
```

...and the default `fileTemplate` options:

```javascript
fileTemplate: '<li>' +
    '<div class="qq-progress-bar"></div>' +
    '<span class="qq-upload-spinner"></span>' +
    '<span class="qq-upload-finished"></span>' +
    (this._options.editFilename && this._options.editFilename.enabled ? '<span class="qq-edit-filename-icon"></span>' : '') +
    '<span class="qq-upload-file"></span>' +
    '(this._options.editFilename && this._options.editFilename.enabled ? '<input class="qq-edit-filename" tabindex="0" type="text">' : '')' +
    '<span class="qq-upload-size"></span>' +
    '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
    '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
    '<a class="qq-upload-delete" href="#">{deleteButtonText}</a>' +
    '<span class="qq-upload-status-text">{statusText}</span>' +
    '</li>'
```

### Classes

Finally, a `classes` option allows you to change the default class names for these elements.  Be sure the values in `classes`
match the class names used in the corresponding template elements (where appropriate).  The following `classes` option properties
exist in FineUploader mode (with default values in parentheses):

* `button` (qq-upload-button)
* `drop` (qq-upload-drop-area)
* `dropActive` (qq-upload-drop-area-active)
* `dropDisabled` (qq-upload-drop-area-disable)
* `list` (qq-upload-list)
* `progressBar` (qq-progress-bar)
* `file` (qq-upload-file)
* `spinner` (qq-upload-spinner)
* `finished` (qq-upload-finished)
* `retrying` (qq-upload-retrying)
* `retryable` (qq-upload-retryable)
* `size` (qq-upload-size)
* `cancel` (qq-upload-cancel)
* `deleteButton` (qq-upload-delete)
* `retry` (qq-upload-retry)
* `statusText` (qq-upload-status-text)
* `editFilenameInput` (qq-edit-filename)
* `success` (qq-upload-success)
* `fail` (qq-upload-fail)
* `editable` (qq-editable)
* `editNameIcon` (qq-edit-filename-icon)
* `successIcon` (`null`)
* `failIcon` (`null`)
* `dropProcessing` (qq-drop-processing)
* `dropProcessingSpinner` (qq-drop-processing-spinner)

**Note:** If you change any of these class names _be sure_ that you also adjust the associated class name in the template.

### Dialogs
* `showMessage: function(message) {...}` - You may want to change the default alert dialog implementation and messages
as you see fit.  This is possible by overriding the `showMessage` function option.  The default `showMessage` function
simply invokes `alert` with the message text.  One instance in which this is used is when the user attempts to select an
invalid file for upload.  There are general message types with default text that can be overriden as well.
* `showConfirm: function(message, okCallback, cancelCallback) {...}` - This function is used to display a confirm dialog.  One
such feature that optionally uses this is the `deleteFile` feature.  The default implementation uses `window.confirm`, but you
may override this with something a bit nicer, if you choose.  The okCallback will be executed if the user clicks "ok" and the
`cancelCallback` if the user clicks "cancel".  The `cancelCallback` is optional, but the `okCallback` is required.
* `showPrompt: function(message, defaultValue) {...}` - This function is used to prompt the user for a value.  Note that **this
is a promissory callback**, meaning it requires a [`qq.Promise`](api/promise.html) to be returned.  The `qq.Promise` documentation
includes a simple example that overrides this default implementation using bootbox.  The default implementation here simply
uses `window.prompt`.
{% endmarkdown %}
{% endblock %}