Upload files through a file input form element or a placeholder area.


Upload files through a file input form element or a placeholder area.


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.


In this example we are using a simple button which opens up the file select window.

Drop area

This example shows how to realize a drop area with the option to select the file from a file window.


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


    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '',
        multiple: true,

        beforeSend: function (environment) {
            console.log('beforeSend', arguments);

            // The environment object can still be modified here.
            // var {data, method, headers, xhr, responseType} = environment;

        beforeAll: function () {
            console.log('beforeAll', arguments);
        load: function () {
            console.log('load', arguments);
        error: function () {
            console.log('error', arguments);
        complete: function () {
            console.log('complete', arguments);

        loadStart: function (e) {
            console.log('loadStart', arguments);

            bar.max = e.total;
            bar.value = e.loaded;

        progress: function (e) {
            console.log('progress', arguments);

            bar.max = e.total;
            bar.value = e.loaded;

        loadEnd: function (e) {
            console.log('loadEnd', arguments);

            bar.max = e.total;
            bar.value = e.loaded;

        completeAll: function () {
            console.log('completeAll', arguments);

            setTimeout(function () {
                bar.setAttribute('hidden', 'hidden');
            }, 1000);

            alert('Upload Completed');



Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

urlString''The request url.
multipleBooleanfalseAllow multiple files to be uploaded.
nameStringfiles[]The name parameter.
typeStringPOSTThe request type.
paramsObject{}Additional parameters.
allowStringfalseFile name filter. (eg. *.png)
mimeStringfalseFile MIME type filter. (eg. image/*)
concurrentNumber1Number of files that will be uploaded simultaneously.
typeString``The expected response type
methodStringPOSTThe request method
msg-invalid-mimeStringInvalid File Type: %sInvalid MIME type message.
msg-invalid-nameStringInvalid File Name: %sInvalid name message.
cls-dragoverStringuk-dragoverFile name filter.
abortFunctionnullThe abort callback.
before-allFunctionnullThe beforeAll callback.
before-sendFunctionnullThe beforeSend callback.
completeFunctionnullThe complete callback.
complete-allFunctionnullThe completeAll callback.
errorFunctionnullThe error callback.
loadFunctionnullThe load callback.
load-endFunctionnullThe loadEnd callback.
load-startFunctionnullThe loadStart callback.
progressFunctionnullThe progress callback.
failFunctionalertThe fail callback. If name or MIME type are invalid.


Learn more about JavaScript components.


UIkit.upload(element, options);


The following events will be triggered on elements with this component attached:

uploadFires before files are being uploaded.