logo

/File Uploader|v3.1.3

Class

new Uploader(container, options)uploader.jsline 82

FileUploader component controller

PARAMETERS
NameTypeDescription

container

jQuery

Container element to generate component

options

object

Options

PROPERTIES
NameTypeDescription

url

object

File server urls

PROPERTIES
NameTypeDescription

send

string

Send files url

remove

string

Remove files url

isMultiple

[ boolean ]

Use multiple files upload

useFolder

[ boolean ]

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

listUI

object

List area preset

PROPERTIES
NameTypeDescription

type

object

List type ('simple' or 'table')

item

[ string ]

To customize item contents when list type is 'simple'

columnList

[ Array ]

To customize row contents when list type is 'table'

usageStatistics

boolean = true

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

EXAMPLES
// 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'
    }
});

Instance Methods

getCheckedList()uploader.jsline 430

Get checked list items

RETURNS:
{

object

} - Checked items

getTotalSize(items)uploader.jsline 453

Get file's total size

PARAMETERS
NameTypeDescription

items

object

File data list to get total size

RETURNS:
{

string

} - Total size with unit

removeList(items)uploader.jsline 438

Remove file list

PARAMETERS
NameTypeDescription

items

object

Removed file's data

Events

checkuploader.jsline 275

Check event

PROPERTIES
NameTypeDescription

id

string

File id

name

string

File name

size

string

File size

state

boolean

Checked state

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

checkAlluploader.jsline 288

Check event

PROPERTIES
NameTypeDescription

filelist

string

Checked file list

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

erroruploader.jsline 465

Error event

PROPERTIES
NameTypeDescription

status

string

Error status

message

string

Error message

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

removeuploader.jsline 465

Remove event

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

successuploader.jsline 465

Success event

PROPERTIES
NameTypeDescription

filelist

Array

Uploaded file list

success

[ number ]

Uploaded file count

failed

[ number ]

Failed file count

count

[ number ]

Total count

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

updateuploader.jsline 465

Update event when using batch transfer

PROPERTIES
NameTypeDescription

filelist

Array

Updated file list

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