Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

FileUp CDN


    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.rawgit.com/shabuninil/fileup/master/src/fileup.min.css" rel="stylesheet">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.rawgit.com/shabuninil/fileup/master/src/fileup.min.js"></script>
                        

Examples

Simple upload

Select file

    <div class="btn btn-success fileup-btn">
        Select file
        <input type="file" id="upload-1">
    </div>

    <div id="upload-1-queue""></div>


    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-1',
            queueID: 'upload-1-queue',
            onSuccess: function(response, file_number, file) {
                Snarl.addNotification({
                    title: 'Upload success',
                    text: file.name,
                    icon: '<i class="fa fa-check"></i>'
                });
            },
            onError: function(event, file, file_number) {
                Snarl.addNotification({
                    title: 'Upload error',
                    text: file.name,
                    icon: '<i class="fa fa-times"></i>'
                });
            }
        });
    </script>


Multiple upload

Select files

    <div id="multiple">
        <div class="btn btn-success fileup-btn">
            Select files
            <input type="file" id="upload-2" multiple>
        </div>

        <button onclick="$.fileup('upload-2', 'upload', '*')"
                class="btn btn-link" type="button" style="display: none">
            Upload all
        </button>
        <button onclick="$.fileup('upload-2', 'remove', '*')"
                class="btn btn-link" type="button" style="display: none">
            Remove all
        </button>

        <div id="upload-2-queue"></div>
    </div>

    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-2',
            dropzoneID: 'upload-2-dropzone',
            queueID: 'upload-2-queue',
            lang: 'ru',
            onSelect: function(file) {
                $('#multiple button').show();
            },
            onRemove: function(file, total) {
                if (file === '*' || total === 1) {
                    $('#multiple button').hide();
                }
            },
            onSuccess: function(response, file_number, file) {
                Snarl.addNotification({
                    title: 'Upload success',
                    text: file.name,
                    icon: '<i class="fa fa-check"></i>'
                });
            },
            onError: function(event, file, file_number) {
                Snarl.addNotification({
                    title: 'Upload error',
                    text: file.name,
                    icon: '<i class="fa fa-times"></i>'
                });
            }
        });
    </script>


Upload images

Select images

    <div class="btn btn-success fileup-btn">
        Select images
        <input type="file" id="upload-3" multiple accept="image/*">
    </div>

    <div id="upload-3-queue"></div>


    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-3',
            queueID: 'upload-3-queue',
            autostart: true
        });
    </script>


Dropzone

Dropzone

    <input type="file" id="upload-4" multiple style="display: none">

    <div id="upload-4-dropzone">
        Dropzone
    </div>

    <div id="upload-4-queue"></div>

    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-4',
            queueID: 'upload-4-queue',
            dropzoneID: 'upload-4-dropzone'
        })
            .success(function(response, file_number, file) {
                Snarl.addNotification({
                    title: 'Upload success',
                    text: file.name,
                    icon: '<i class="fa fa-check"></i>'
                });
            })
            .error(function(event, file, file_number) {
                Snarl.addNotification({
                    title: 'Upload error',
                    text: file.name,
                    icon: '<i class="fa fa-times"></i>'
                });
            })
            .dragEnter(function(event) {
                $(event.target).addClass('over');
            })
            .dragLeave(function(event) {
                $(event.target).removeClass('over');
            })
            .dragEnd(function(event) {
                $(event.target).removeClass('over');
            });

    </script>


Uploaded

Select files

    <div class="btn btn-success fileup-btn">
        Select files
        <input type="file" id="upload-5" multiple>
    </div>

    <div id="upload-5-queue"></div>

    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-5',
            queueID: 'upload-5-queue',
            files: [
                {
                    id: 1,
                    name: 'Cat.jpg', // required
                    size: '254361',  // required
                    previewUrl: 'img/preview/cat.jpg',
                    downloadUrl: 'img/cat.jpg',
                    customParam: '123'
                },
                {
                    id: 2,
                    name: 'Flower.jpg', // required
                    size: '924160',     // required
                    previewUrl: 'img/preview/flower.jpg',
                    downloadUrl: 'img/flower.jpg',
                    customParam: '456'
                },
                {
                    name: 'FileUp.zip', // required
                    size: '23040',      // required
                    downloadUrl: 'https://github.com/shabuninil/fileup/archive/master.zip'
                }
            ]
        });
    </script>


Theme 2


    <link href="css/fileup.theme2.min.css" rel="stylesheet" type="text/css"/>

    <div class="fileup-theme2">
        <div id="upload-6-queue" class="fileup-queue"></div>

        <div class="btn btn-default fileup-btn">
            <input type="file" id="upload-6" multiple>
        </div>
    </div>


    <script>
        $.fileup({
            url: '/file/upload',
            inputID: 'upload-6',
            queueID: 'upload-6-queue',
            files: [
                {
                    id: 1,
                    name: 'Cat.jpg', // required
                    size: '254361',  // required
                    previewUrl: 'img/preview/cat.jpg',
                    downloadUrl: 'img/cat.jpg',
                    customParam: '123'
                },
                {
                    id: 2,
                    name: 'Flower.jpg', // required
                    size: '924160',     // required
                    previewUrl: 'img/preview/flower.jpg',
                    downloadUrl: 'img/flower.jpg',
                    customParam: '456'
                },
                {
                    name: 'FileUp.zip', // required
                    size: '23040',      // required
                    downloadUrl: 'https://github.com/shabuninil/fileup/archive/master.zip'
                }
            ]
        });
    </script>


Options

Name type default description
url string window.location.pathname + window.location.search The address to which the files will be downloaded
inputID string Item ID <input type="file"/>
queueID string The identifier of the element in which the information about the downloaded files will be placed
dropzoneID string The identifier of the element that should work as a dropzone
fieldName string filedata The name of the variable in which the file should be loaded
files array [] Array of installed format
extraFields object {} Additional variables. Which should be loaded along with the file
lang string en Interface language (en/ru)
sizeLimit integer 0 Limiting the size of uploaded files
filesLimit integer 0 Limit the number of simultaneously selected files
method string post Http method used when uploading files
timeout integer Timeout Limitation
autostart boolean false A sign of automatic file download when it is selected
templateFile string * HTML code used to generate and display information about a file

Default content option "templateFile"


<div id="fileup-[INPUT_ID]-[FILE_NUM]" class="fileup-file [TYPE]">
    <div class="fileup-preview">
        <img src="[PREVIEW_SRC]" alt="[NAME]"/>
    </div>
    <div class="fileup-container">
        <div class="fileup-description">
            <span class="fileup-name">[NAME]</span> (<span class="fileup-size">[SIZE_HUMAN]</span>)
        </div>
        <div class="fileup-controls">
            <span class="fileup-remove" onclick="$.fileup('[INPUT_ID]', 'remove', '[FILE_NUM]');" title="[REMOVE]"></span>
            <span class="fileup-upload" onclick="$.fileup('[INPUT_ID]', 'upload', '[FILE_NUM]');">[UPLOAD]</span>
            <span class="fileup-abort" onclick="$.fileup('[INPUT_ID]', 'abort, '[FILE_NUM]');" style="display:none">[ABORT]</span>
        </div>
        <div class="fileup-result"></div>
        <div class="fileup-progress">
            <div class="fileup-progress-bar"></div>
        </div>
    </div>
    <div class="fileup-clear"></div>
</div>
                        

Methods

$.fileup('input_id', 'remove', 'file_num or *');

Deleting all or specified files from the download queue

$.fileup('input_id', 'upload', 'file_num or *');

Loading all or specified files from the queue

$.fileup('input_id', 'abort', 'file_num or *');

Stop downloading all or specified files from the queue

Events

Event name Params Description
onSelect file This event occurs when a file is selected
onRemove fil_number, total, file This event occurs when a file is deleted from the queue
onBeforeStart file_number, xhr, file This event occurs before the start of the download
onStart file_number, file This event occurs at the beginning of the file download
onProgress file_number, ProgressEvent, file This event occurs when the browser receives the next data packet
onSuccess file_number, response, file This event occurs when the download is complete
onError event, file, file_number, response This event occurs when an error occurs while loading a file
onAbort file_number, file This event occurs when you cancel a file download
onTimeout file_number, file This event occurs when a timeout occurs
onFinish file_number, file This event occurs when the file is uploaded
onDragEnter event This event occurs when a file is added to the dropzone
onDragOver event This event occurs when the file is dragged over the dropzone
onDragLeave event This event occurs when the file is taken out of the dropzone
onDragEnd event This event occurs when the user finishes dragging the file over the dropzone
onStartSystem file_number, file This event occurs at the beginning of the file download and is needed to correctly manage the interface
onSuccessSystem file_number, file This event occurs when the download is complete and you need to correctly control the interface
onErrorSystem event, file, file_number This event occurs when there is a file download error and you need to correctly control the interface
onAbortSystem file_number, file This event occurs when the file download is canceled and you need to correctly control the interface
onTimeoutSystem file_number, file This event occurs when the timeout occurs and you need to correctly control the interface

Browser compatibility

FileUp works in most major browsers. Some details:

  • IE: 9.
  • Microsoft Edge: 12+
  • Safari: 4+
  • Firefox: 4+
  • Chrome 14+
  • Opera: 15+