# Upload

Allow users to upload files through a file input form element or a placeholder area.

## Usage

This JavaScript component utilizes the latest XMLHttpRequest Level 2 specification and provides the ability of uploading files via ajax including tracking of the upload progress. The component provides two ways of uploading files: `select` and `drop`. While the `select` request can only be applied to `<input type="file">` elements, you can basically use any element with `drop`, which enables you to simply drag and drop files from your desktop into the specified element to upload them. Note that this component does not handle your file uploads on the server.

The Upload component always needs to be implemented individually according to your requirements. In our example case we used the Placeholder and the Form file component, applying both the `drop` and `select` requests. Additionally we used the Progress component to illustrate the uploading progress.

### Example

Attach binaries by dropping them here or selecting one.
0%

### Markup

    <div id="upload-drop" class="uk-placeholder">
        Info text... <a class="uk-form-file">Select a file<input id="upload-select" type="file"></a>.
    </div>

    <div id="progressbar" class="uk-progress uk-hidden">
        <div class="uk-progress-bar" style="width: 0%;">...</div>
    </div>

### JavaScript

To create `select` and `drop` upload listeners you need to instantiate each upload class with the target element and options, which defines callbacks and useful settings.

    <script>

        $(function(){

            var progressbar = $("#progressbar"),
                bar         = progressbar.find('.uk-progress-bar'),
                settings    = {

                action: '/', // upload url

                allow : '*.(jpg|jpeg|gif|png)', // allow only images

                loadstart: function() {
                    bar.css("width", "0%").text("0%");
                    progressbar.removeClass("uk-hidden");
                },

                progress: function(percent) {
                    percent = Math.ceil(percent);
                    bar.css("width", percent+"%").text(percent+"%");
                },

                allcomplete: function(response) {

                    bar.css("width", "100%").text("100%");

                    setTimeout(function(){
                        progressbar.addClass("uk-hidden");
                    }, 250);

                    alert("Upload Completed")
                }
            };

            var select = UIkit.uploadSelect($("#upload-select"), settings),
                drop   = UIkit.uploadDrop($("#upload-drop"), settings);
        });

    </script>

## JavaScript options

Option | Possible value | Default | Description
--- | --- | --- | ---
`action` | string | '' | Target url for the upload
`single` | boolean | true | Send each file one by one
`param` | string | files[] | Post query name
`params` | JSON Object | {} | Additional request parameters
`allow` | string | *.* | File filter
`filelimit` | integer | false | Limit the number of files to upload
`type` | (text | json) | text | Response type from server

### Callback events

Name | Parameter
--- | ---
`before` | settings, files
`beforeAll` | files
`beforeSend` | xhr
`progress` | percent
`complete` | response, xhr
`allcomplete` | response, xhr
`notallowed` | file, settings
`loadstart` | event
`load` | event
`loadend` | event
`error` | event
`abort` | event
`readystatechange` | event