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

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

Callback events