Uploader(container, options)

new Uploader(container, options)

FileUploader component controller

Parameters:
Name Type Description
container jQuery

Container element to generate component

options object

Options

Properties
Name Type Attributes Default Description
url object

File server urls

Properties
Name Type Description
send string

Send files url

remove string

Remove files url

isMultiple boolean <optional>

Use multiple files upload

useFolder boolean <optional>

Use directory upload. If ture, 'isMultiple' option will be ignored

listUI object

List area preset

Properties
Name Type Attributes Description
type object

List type ('simple' or 'table')

item string <optional>

To customize item contents when list type is 'simple'

columnList Array.<object> <optional>

To customize row contents when list type is 'table'

usageStatistics boolean <optional>
true

Send the hostname to google analytics. If you do not want to send the hostname, this option set to false.

Example
// Case 1: Using normal transfer & simple list
//
// <!-- HTML -->
// <div id="uploader">
//     <input type="file" name="userfile[]">
//     <div class="tui-js-file-uploader-list"></div>
// </div>
//
var FileUploader = tui.FileUploader; // require('tui-file-uploader');
var instance = new FileUploader($('#uploader'), {
    url: {
        send: 'http://localhost:3000/upload',
        remove: 'http://localhost:3000/remove'
    },
    isBatchTransfer: false,
    listUI: {
        type: 'simple'
    }
});

// Case 2: Using batch transfer & table list & make dropzone
//
// <!-- HTML -->
// <div id="uploader">
//     <input type="file" name="userfile[]">
//     <div class="tui-js-file-uploader-list tui-js-file-uploader-dropzone"></div>
//     <button type="submit">Upload</button>
// </div>
//
var FileUploader = tui.FileUploader; // require('tui-file-uploader');
var instance = new FileUploader($('#uploader'), {
    url: {
        send: 'http://localhost:3000/upload'
    },
    isBatchTransfer: true,
    listUI: {
        type: 'table'
    }
});

Methods

getCheckedList() → {object}

Get checked list items

Returns:
object -

Checked items

getTotalSize(items) → {string}

Get file's total size

Parameters:
Name Type Description
items object

File data list to get total size

Returns:
string -

Total size with unit

removeList(items)

Remove file list

Parameters:
Name Type Description
items object

Removed file's data

Events

check

Check event

Parameters:
Name Type Description
evt object

Check event data

Properties
Name Type Description
id string

File id

name string

File name

size string

File size

state boolean

Checked state

Example
FileUploader.on('check', function(evt) {
    console.log(evt.id + ' checked state is ' + evt.state);
});

checkAll

Check event

Parameters:
Name Type Description
evt object

Check event data

Properties
Name Type Description
filelist string

Checked file list

Example
FileUploader.on('checkAll', function(evt) {
    console.log(evt.filelist);
});

error

Error event

Parameters:
Name Type Description
evt Error

Error data

Properties
Name Type Description
status string

Error status

message string

Error message

Example
fileUploader.on('error', function(evt) {
    console.log(evt.status);
});

remove

Remove event

Parameters:
Name Type Description
evt object

Removed item's data (ex: {id: state})

Example
fileUploader.on('remove', function(evt) {
    console.log('state: ' + evt['fileId']);
});

success

Success event

Parameters:
Name Type Description
evt object

Server response data

Properties
Name Type Attributes Description
filelist Array

Uploaded file list

success number <optional>

Uploaded file count

failed number <optional>

Failed file count

count number <optional>

Total count

Example
fileUploader.on('success', function(evt) {
    console.log(evt.filelist);
});

update

Update event when using batch transfer

Parameters:
Name Type Description
evt object

Updated file list

Properties
Name Type Description
filelist Array

Updated file list

Example
fileUploader.on('update', function(evt) {
    console.log(evt.filelist);
});