A XHR uploader written in ECMAScript 6.
Creating a Uploader instance.
options: Object. The configuration object that pass to the Uploader. Default options are:
const defaultOption = { // upload server's url url: null, // upload url params object params: {}, // extra upload data data: null, // the core XHR object xhr: new XMLHttpRequest(), // current upload status status: 'pending', // Uploader callback list callbackList: [], // additional HTTP headers headers: {}, // files that added in the Uploader files: [], // upload file's type limit: '*', // an object that contain all the form data formData: {}, // decide whether use multiple files upload or not multiple: false, // decide whether the Uploader will automatically // upload or not when user has selected a file auto: false, // upload request method method: 'POST', // whether the Uploader will listen to the upload progress or not. progressEvent: true };
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload', formData: { data: 'form data' }, multiple: true });
Add file to the upload queue.
- key: String.
- file: Blob/File. Will append to the
FormData. - filename: String. The file's name.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var fileInput = document.getElementById('file'); fileInput.addEventListener('change', function () { if (fileInput.files.length) { for (var i in fileInput.files) { var file = fileInput.files[i]; if (fileInput.files.hasOwnProperty(i)) { fileUploader.addFile('file' + i, file, file.name); } } console.log(fileUploader.files); } });
Add additional data to the form data.
- key: String.
- value: String.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); fileUploader.addData('name', 'value'); console.log(fileUploader.formData);
Starting upload.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var fileInput = document.getElementById('file'); fileInput.addEventListener('change', function () { if (fileInput.files.length) { for (var i in fileInput.files) { var file = fileInput.files[i]; if (fileInput.files.hasOwnProperty(i)) { fileUploader.addFile('file' + i, file, file.name); } } fileUploader.start(); } });
Abort the upload request.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var fileInput = document.getElementById('file'); var cancel = document.getElementById('cancel'); fileInput.addEventListener('change', function () { if (fileInput.files.length) { for (var i in fileInput.files) { var file = fileInput.files[i]; if (fileInput.files.hasOwnProperty(i)) { fileUploader.addFile('file' + i, file, file.name); } } fileUploader.start(); } }); cancel.addEventListener('click', function (event) { event.preventDefault(); if (fileUploader.status === 'uploading') { fileUploader.abort(); } });
An easier way to initialize the Uploader, it will bind to an element, and when the element was clicked, it will prompt the user to select a file to upload, once the use has selected a file, it will automatically start uploading, without any further configuration.
- element: DOM element. The element that use to bind click event.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var uploadBtn = document.getElementById('select-file'); fileUploader.bind(uploadBtn);
Reset the Uploader status, it will clear the upload queue and all the form data.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var fileInput = document.getElementById('file'); var resetBtn = document.getElementById('reset'); var startBtn = document.getElementById('start'); fileInput.addEventListener('change', function () { if (fileInput.files.length) { for (var i in fileInput.files) { var file = fileInput.files[i]; if (fileInput.files.hasOwnProperty(i)) { fileUploader.addFile('file' + i, file, file.name); } } } }); startBtn.addEventListener('click', function (event) { event.preventDefault(); fileUploader.start(); }); resetBtn.addEventListener('click', function (event) { event.preventDefault(); fileUploader.reset(); });
Bind an event listener.
- type: String. The event's name.
- callback: Function. The function that will be called when the event is fired.
- context: Object. Optional. Custom context that will pass to the callback.
- once: Boolean. Optional. When set to
true, the callback will only excuted once.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); var uploadBtn = document.getElementById('select-file'); fileUploader.bind(uploadBtn); fileUploader.on('upload.start', function () { console.log('upload started.'); });
Manually emit an event.
- type: String. The event's name.
- arg: Additional arguments that will pass to the
.onmethod.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); fileUploader.on('customEvent', function () { console.log(arguments); }); fileUploader.emit('customEvent', 'one', 'two', 'three');
Add a custom HTTP header to the upload request.
- name: String.
- value: String.
- Uploader instance.
var fileUploader = new Uploader({ url: '/upload' }); fileUploader.setHeader('custom', 'value');
will emit when the XHR is success.
will emit when the XHR is error.
will emit when the XHR is on progress.
will emit when the XHR is abort.
will emit when the uploader starting upload.
will emit when uploading files.
will emit when uploading files error.
will emit when abort upload files.
will emit when the uploading is success.
will emit when adding files to the upload queue.
will emit when the added file's extname is not match the limit option.
will emit when adding form data.
Clone this project, and run npm i, after installation finished, run gulp.
MIT