/*

* jQuery File Upload Test

* https://github.com/blueimp/JavaScript-Load-Image

*

* Copyright 2010, Sebastian Tschan

* https://blueimp.net

*

* Licensed under the MIT license:

* https://opensource.org/licenses/MIT

*/

/* global beforeEach, afterEach, describe, it */

/* eslint-disable new-cap */

(function (expect, $) {

'use strict';

var canCreateBlob = !!window.dataURLtoBlob;

// 80x60px GIF image (color black, base64 data):

var b64DataGIF =

'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +

'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +

'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7';

var imageUrlGIF = 'data:image/gif;base64,' + b64DataGIF;

var blobGIF = canCreateBlob && window.dataURLtoBlob(imageUrlGIF);

// 2x1px JPEG (color white, with the Exif orientation flag set to 6 and the

// IPTC ObjectName (2:5) set to 'objectname'):

var b64DataJPEG =

'/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAASUkqAAgAAAABABIBAwABAAAA' +

'BgASAAAAAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAgUACm9iamVj' +

'dG5hbWUA/9sAQwABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB' +

'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB/9sAQwEBAQEBAQEBAQEBAQEBAQEB' +

'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB' +

'/8AAEQgAAQACAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYH' +

'CAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGh' +

'CCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldY' +

'WVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1' +

'tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8B' +

'AAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAEC' +

'dwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBka' +

'JicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWG' +

'h4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ' +

'2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/v4ooooA/9k=';

var imageUrlJPEG = 'data:image/jpeg;base64,' + b64DataJPEG;

var blobJPEG = canCreateBlob && window.dataURLtoBlob(imageUrlJPEG);

var fileGIF, fileJPEG, files, items, eventObject;

var uploadURL = '../server/php/';

/**

* Creates a fileupload form and adds it to the DOM

*

* @returns {object} jQuery node

*/

function createFileuploadForm() {

return $('<form><input type="file" name="files[]" multiple></form>')

.prop({

action: uploadURL,

method: 'POST',

enctype: 'multipart/form-data'

})

.css({ display: 'none' })

.appendTo(document.body);

}

/**

* Deletes all files from the upload server

*

* @param {Array} files Response files list

* @param {Function} callback Callback function

*/

function deleteFiles(files, callback) {

$.when(

files.map(function (file) {

return $.ajax({

type: file.deleteType,

url: file.deleteUrl

});

})

).always(function () {

callback();

});

}

beforeEach(function () {

fileGIF = new File([blobGIF], 'example.gif', { type: 'image/gif' });

fileJPEG = new File([blobJPEG], 'example.jpg', { type: 'image/jpeg' });

files = [fileGIF, fileJPEG];

items = [

{

getAsFile: function () {

return files[0];

}

},

{

getAsFile: function () {

return files[1];

}

}

];

eventObject = {

originalEvent: {

dataTransfer: { files: files, types: ['Files'] },

clipboardData: { items: items }

}

};

});

afterEach(function (done) {

$.getJSON(uploadURL).then(function (result) {

deleteFiles(result.files, done);

});

});

describe('Initialization', function () {

var form;

beforeEach(function () {

form = createFileuploadForm();

});

afterEach(function () {

form.remove();

});

it('widget', function () {

form.fileupload();

expect(form.data('blueimp-fileupload')).to.be.an('object');

});

it('file input', function () {

form.fileupload();

expect(form.fileupload('option', 'fileInput').length).to.equal(1);

});

it('drop zone', function () {

form.fileupload();

expect(form.fileupload('option', 'dropZone').length).to.equal(1);

});

it('paste zone', function () {

form.fileupload({ pasteZone: document });

expect(form.fileupload('option', 'pasteZone').length).to.equal(1);

});

it('data attributes', function () {

form.attr('data-url', 'https://example.org');

form.fileupload();

expect(form.fileupload('option', 'url')).to.equal('https://example.org');

expect(form.data('blueimp-fileupload')).to.be.an('object');

});

it('event listeners', function () {

var eventsData = {};

form.fileupload({

autoUpload: false,

pasteZone: document,

dragover: function () {

eventsData.dragover = true;

},

dragenter: function () {

eventsData.dragenter = true;

},

dragleave: function () {

eventsData.dragleave = true;

},

drop: function (e, data) {

eventsData.drop = data;

},

paste: function (e, data) {

eventsData.paste = data;

},

change: function () {

eventsData.change = true;

}

});

form

.fileupload('option', 'fileInput')

.trigger($.Event('change', eventObject));

expect(eventsData.change).to.equal(true);

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragover', eventObject))

.trigger($.Event('dragenter', eventObject))

.trigger($.Event('dragleave', eventObject))

.trigger($.Event('drop', eventObject));

expect(eventsData.dragover).to.equal(true);

expect(eventsData.dragenter).to.equal(true);

expect(eventsData.dragleave).to.equal(true);

expect(eventsData.drop.files).to.deep.equal(files);

form

.fileupload('option', 'pasteZone')

.trigger($.Event('paste', eventObject));

expect(eventsData.paste.files).to.deep.equal(files);

});

});

describe('API', function () {

var form;

beforeEach(function () {

form = createFileuploadForm().fileupload({

dataType: 'json',

autoUpload: false

});

});

afterEach(function () {

form.remove();

});

it('destroy', function () {

var eventsData = {};

form.fileupload('option', {

pasteZone: document,

dragover: function () {

eventsData.dragover = true;

},

dragenter: function () {

eventsData.dragenter = true;

},

dragleave: function () {

eventsData.dragleave = true;

},

drop: function (e, data) {

eventsData.drop = data;

},

paste: function (e, data) {

eventsData.paste = data;

},

change: function () {

eventsData.change = true;

}

});

var fileInput = form.fileupload('option', 'fileInput');

var dropZone = form.fileupload('option', 'dropZone');

var pasteZone = form.fileupload('option', 'pasteZone');

form.fileupload('destroy');

expect(form.data('blueimp-fileupload')).to.equal();

fileInput.trigger($.Event('change', eventObject));

expect(eventsData.change).to.equal();

dropZone

.trigger($.Event('dragover', eventObject))

.trigger($.Event('dragenter', eventObject))

.trigger($.Event('dragleave', eventObject))

.trigger($.Event('drop', eventObject));

expect(eventsData.dragover).to.equal();

expect(eventsData.dragenter).to.equal();

expect(eventsData.dragleave).to.equal();

expect(eventsData.drop).to.equal();

pasteZone.trigger($.Event('paste', eventObject));

expect(eventsData.paste).to.equal();

});

it('disable', function () {

var eventsData = {};

form.fileupload('option', {

pasteZone: document,

dragover: function () {

eventsData.dragover = true;

},

dragenter: function () {

eventsData.dragenter = true;

},

dragleave: function () {

eventsData.dragleave = true;

},

drop: function (e, data) {

eventsData.drop = data;

},

paste: function (e, data) {

eventsData.paste = data;

},

change: function () {

eventsData.change = true;

}

});

form.fileupload('disable');

form

.fileupload('option', 'fileInput')

.trigger($.Event('change', eventObject));

expect(eventsData.change).to.equal();

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragover', eventObject))

.trigger($.Event('dragenter', eventObject))

.trigger($.Event('dragleave', eventObject))

.trigger($.Event('drop', eventObject));

expect(eventsData.dragover).to.equal();

expect(eventsData.dragenter).to.equal();

expect(eventsData.dragleave).to.equal();

expect(eventsData.drop).to.equal();

form

.fileupload('option', 'pasteZone')

.trigger($.Event('paste', eventObject));

expect(eventsData.paste).to.equal();

});

it('enable', function () {

var eventsData = {};

form.fileupload('option', {

pasteZone: document,

dragover: function () {

eventsData.dragover = true;

},

dragenter: function () {

eventsData.dragenter = true;

},

dragleave: function () {

eventsData.dragleave = true;

},

drop: function (e, data) {

eventsData.drop = data;

},

paste: function (e, data) {

eventsData.paste = data;

},

change: function () {

eventsData.change = true;

}

});

form.fileupload('disable');

form.fileupload('enable');

form

.fileupload('option', 'fileInput')

.trigger($.Event('change', eventObject));

expect(eventsData.change).to.equal(true);

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragover', eventObject))

.trigger($.Event('dragenter', eventObject))

.trigger($.Event('dragleave', eventObject))

.trigger($.Event('drop', eventObject));

expect(eventsData.dragover).to.equal(true);

expect(eventsData.dragenter).to.equal(true);

expect(eventsData.dragleave).to.equal(true);

expect(eventsData.drop.files).to.deep.equal(files);

form

.fileupload('option', 'pasteZone')

.trigger($.Event('paste', eventObject));

expect(eventsData.paste.files).to.deep.equal(files);

});

it('option', function () {

var eventsData = {};

form.fileupload('option', 'drop', function (e, data) {

eventsData.drop = data;

});

var dropZone = form

.fileupload('option', 'dropZone')

.trigger($.Event('drop', eventObject));

expect(eventsData.drop.files).to.deep.equal(files);

delete eventsData.drop;

form.fileupload('option', 'dropZone', null);

dropZone.trigger($.Event('drop', eventObject));

expect(eventsData.drop).to.equal();

form.fileupload('option', {

dropZone: dropZone

});

dropZone.trigger($.Event('drop', eventObject));

expect(eventsData.drop.files).to.deep.equal(files);

});

it('add', function () {

var eventData = [];

form.fileupload('option', 'add', function (e, data) {

eventData.push(data);

});

form.fileupload('add', { files: files });

expect(eventData.length).to.equal(2);

expect(eventData[0].files[0]).to.equal(files[0]);

expect(eventData[1].files[0]).to.equal(files[1]);

});

it('send', function (done) {

this.slow(200);

form.fileupload('send', { files: files }).complete(function (result) {

var uploadedFiles = result.responseJSON.files;

expect(uploadedFiles.length).to.equal(2);

expect(uploadedFiles[0].type).to.equal(files[0].type);

expect(uploadedFiles[0].error).to.equal();

expect(uploadedFiles[1].type).to.equal(files[1].type);

expect(uploadedFiles[1].error).to.equal();

done();

});

});

});

describe('Callbacks', function () {

var form;

beforeEach(function () {

form = createFileuploadForm().fileupload({ dataType: 'json' });

});

afterEach(function () {

form.remove();

});

it('add', function () {

var eventData = [];

form.fileupload('option', 'add', function (e, data) {

eventData.push(data);

});

form.fileupload('add', { files: files });

expect(eventData.length).to.equal(2);

expect(eventData[0].files[0]).to.equal(files[0]);

expect(eventData[1].files[0]).to.equal(files[1]);

});

it('submit', function (done) {

this.slow(200);

var eventData = [];

form.fileupload('option', {

submit: function (e, data) {

eventData.push(data);

},

stop: function () {

if (eventData.length < 2) return;

expect(eventData[0].files[0]).to.equal(files[0]);

expect(eventData[1].files[0]).to.equal(files[1]);

done();

}

});

form.fileupload('add', { files: files });

});

it('send', function (done) {

this.slow(200);

var eventData = [];

form.fileupload('option', {

send: function (e, data) {

eventData.push(data);

},

stop: function () {

expect(eventData.length).to.equal(1);

expect(eventData[0].files).to.deep.equal(files);

done();

}

});

form.fileupload('send', { files: files });

});

it('done', function (done) {

this.slow(200);

var eventData = [];

form.fileupload('option', {

done: function (e, data) {

eventData.push(data);

},

stop: function () {

if (eventData.length < 2) return;

expect(eventData[0].result.files.length).to.equal(1);

expect(eventData[1].result.files.length).to.equal(1);

done();

}

});

form.fileupload('add', { files: files });

});

it('fail', function (done) {

this.slow(200);

var eventData = [];

form.fileupload('option', {

url: uploadURL + '404',

fail: function (e, data) {

eventData.push(data);

},

stop: function () {

if (eventData.length < 2) return;

expect(eventData[0].result).to.equal();

expect(eventData[1].result).to.equal();

done();

}

});

form.fileupload('add', { files: files });

});

it('always', function (done) {

this.slow(200);

var eventData = [];

form.fileupload('option', {

always: function (e, data) {

eventData.push(data);

},

stop: function () {

if (eventData.length < 2) {

expect(eventData[0].result).to.equal();

form.fileupload('add', { files: [fileGIF] });

return;

}

expect(eventData[1].result.files.length).to.equal(1);

done();

}

});

form.fileupload('add', { files: [fileGIF], url: uploadURL + '404' });

});

it('progress', function (done) {

this.slow(200);

var loaded;

var total;

form.fileupload('option', {

progress: function (e, data) {

loaded = data.loaded;

total = data.total;

expect(loaded).to.be.at.most(total);

},

stop: function () {

expect(loaded).to.equal(total);

done();

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('progressall', function (done) {

this.slow(200);

var loaded;

var total;

var completed = 0;

form.fileupload('option', {

progressall: function (e, data) {

loaded = data.loaded;

total = data.total;

expect(loaded).to.be.at.most(total);

},

always: function () {

completed++;

},

stop: function () {

if (completed < 2) return;

expect(loaded).to.equal(total);

done();

}

});

form.fileupload('add', { files: files });

});

it('start', function (done) {

this.slow(200);

var started;

form.fileupload('option', {

start: function () {

started = true;

},

stop: function () {

expect(started).to.equal(true);

done();

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('stop', function (done) {

this.slow(200);

form.fileupload('option', {

stop: function () {

done();

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('dragover', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

dragover: function () {

eventsData.dragover = true;

}

});

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragover', eventObject));

expect(eventsData.dragover).to.equal(true);

});

it('dragenter', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

dragenter: function () {

eventsData.dragenter = true;

}

});

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragenter', eventObject));

expect(eventsData.dragenter).to.equal(true);

});

it('dragleave', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

dragleave: function () {

eventsData.dragleave = true;

}

});

form

.fileupload('option', 'dropZone')

.trigger($.Event('dragleave', eventObject));

expect(eventsData.dragleave).to.equal(true);

});

it('drop', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

drop: function (e, data) {

eventsData.drop = data;

}

});

form

.fileupload('option', 'dropZone')

.trigger($.Event('drop', eventObject));

expect(eventsData.drop.files).to.deep.equal(files);

});

it('paste', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

pasteZone: document,

paste: function (e, data) {

eventsData.paste = data;

}

});

form

.fileupload('option', 'pasteZone')

.trigger($.Event('paste', eventObject));

expect(eventsData.paste.files).to.deep.equal(files);

});

it('change', function () {

var eventsData = {};

form.fileupload('option', {

autoUpload: false,

change: function () {

eventsData.change = true;

}

});

form

.fileupload('option', 'fileInput')

.trigger($.Event('change', eventObject));

expect(eventsData.change).to.equal(true);

});

});

describe('Options', function () {

var form;

beforeEach(function () {

form = createFileuploadForm();

});

afterEach(function () {

form.remove();

});

it('paramName', function (done) {

form.fileupload({

send: function (e, data) {

expect(data.paramName[0]).to.equal(

form.fileupload('option', 'fileInput').prop('name')

);

done();

return false;

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('url', function (done) {

form.fileupload({

send: function (e, data) {

expect(data.url).to.equal(form.prop('action'));

done();

return false;

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('type', function (done) {

form.fileupload({

type: 'PUT',

send: function (e, data) {

expect(data.type).to.equal('PUT');

done();

return false;

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('replaceFileInput', function () {

form.fileupload();

var fileInput = form.fileupload('option', 'fileInput');

fileInput.trigger($.Event('change', eventObject));

expect(form.fileupload('option', 'fileInput')[0]).to.not.equal(

fileInput[0]

);

form.fileupload('option', 'replaceFileInput', false);

fileInput = form.fileupload('option', 'fileInput');

fileInput.trigger($.Event('change', eventObject));

expect(form.fileupload('option', 'fileInput')[0]).to.equal(fileInput[0]);

});

it('forceIframeTransport', function (done) {

form.fileupload({

forceIframeTransport: 'PUT',

send: function (e, data) {

expect(data.dataType.substr(0, 6)).to.equal('iframe');

done();

return false;

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('singleFileUploads', function (done) {

form.fileupload({

singleFileUploads: false,

send: function (e, data) {

expect(data.files).to.deep.equal(files);

done();

return false;

}

});

form.fileupload('add', { files: files });

});

it('limitMultiFileUploads', function (done) {

var completed = 0;

form.fileupload({

singleFileUploads: false,

limitMultiFileUploads: 2,

send: function (e, data) {

expect(data.files).to.deep.equal(files);

completed++;

if (completed < 2) return;

done();

return false;

}

});

form.fileupload('add', { files: files.concat(files) });

});

it('limitMultiFileUploadSize', function (done) {

var completed = 0;

form.fileupload({

singleFileUploads: false,

limitMultiFileUploadSize: files[0].size + files[1].size,

limitMultiFileUploadSizeOverhead: 0,

send: function (e, data) {

expect(data.files).to.deep.equal(files);

completed++;

if (completed < 2) return;

done();

return false;

}

});

form.fileupload('add', { files: files.concat(files) });

});

it('sequentialUploads', function (done) {

this.slow(400);

var completed = 0;

var events = [];

form.fileupload({

sequentialUploads: true,

dataType: 'json',

send: function () {

events.push('send');

},

always: function () {

events.push('complete');

completed++;

},

stop: function () {

if (completed === 4) {

expect(events.join(',')).to.equal(

[

'send',

'complete',

'send',

'complete',

'send',

'complete',

'send',

'complete'

].join(',')

);

done();

}

}

});

form.fileupload('add', { files: files.concat(files) });

});

it('limitConcurrentUploads', function (done) {

this.slow(800);

var completed = 0;

var loadCount = 0;

form.fileupload({

limitConcurrentUploads: 2,

dataType: 'json',

send: function () {

loadCount++;

expect(loadCount).to.be.at.most(2);

},

always: function () {

completed++;

loadCount--;

},

stop: function () {

if (completed === 8) {

done();

}

}

});

form.fileupload('add', {

files: files.concat(files).concat(files).concat(files)

});

});

it('multipart', function (done) {

form.fileupload({

multipart: false,

send: function (e, data) {

expect(data.contentType).to.equal(fileGIF.type);

expect(data.headers['Content-Disposition']).to.equal(

'attachment; filename="' + fileGIF.name + '"'

);

done();

return false;

}

});

form.fileupload('add', { files: [fileGIF] });

});

it('uniqueFilenames', function (done) {

form.fileupload({

uniqueFilenames: {},

send: function (e, data) {

var formFiles = data.data.getAll('files[]');

expect(formFiles[0].name).to.equal(fileGIF.name);

expect(formFiles[1].name).to.equal(

fileGIF.name.replace('.gif', ' (1).gif')

);

expect(formFiles[2].name).to.equal(

fileGIF.name.replace('.gif', ' (2).gif')

);

done();

return false;

}

});

form.fileupload('send', { files: [fileGIF, fileGIF, fileGIF] });

});

it('maxChunkSize', function (done) {

this.slow(400);

var events = [];

form.fileupload({

maxChunkSize: 32,

dataType: 'json',

chunkbeforesend: function () {

events.push('chunkbeforesend');

},

chunksend: function () {

events.push('chunksend');

},

chunkdone: function () {

events.push('chunkdone');

},

done: function (e, data) {

var uploadedFile = data.result.files[0];

expect(uploadedFile.type).to.equal(fileGIF.type);

expect(uploadedFile.size).to.equal(fileGIF.size);

},

stop: function () {

expect(events.join(',')).to.equal(

[

'chunkbeforesend',

'chunksend',

'chunkdone',

'chunkbeforesend',

'chunksend',

'chunkdone',

'chunkbeforesend',

'chunksend',

'chunkdone',

'chunkbeforesend',

'chunksend',

'chunkdone'

].join(',')

);

done();

}

});

form.fileupload('send', { files: [fileGIF] });

});

it('acceptFileTypes', function (done) {

var processData;

form.fileupload({

acceptFileTypes: /^image\/gif$/,

singleFileUploads: false,

processalways: function (e, data) {

processData = data;

},

processstop: function () {

expect(processData.files[0].error).to.equal();

expect(processData.files[1].error).to.equal(

form.fileupload('option').i18n('acceptFileTypes')

);

done();

}

});

form.fileupload('add', { files: files });

});

it('maxFileSize', function (done) {

var processData;

form.fileupload({

maxFileSize: 200,

singleFileUploads: false,

processalways: function (e, data) {

processData = data;

},

processstop: function () {

expect(processData.files[0].error).to.equal();

expect(processData.files[1].error).to.equal(

form.fileupload('option').i18n('maxFileSize')

);

done();

}

});

form.fileupload('add', { files: files });

});

it('minFileSize', function (done) {

var processData;

form.fileupload({

minFileSize: 200,

singleFileUploads: false,

processalways: function (e, data) {

processData = data;

},

processstop: function () {

expect(processData.files[0].error).to.equal(

form.fileupload('option').i18n('minFileSize')

);

expect(processData.files[1].error).to.equal();

done();

}

});

form.fileupload('add', { files: files });

});

it('maxNumberOfFiles', function (done) {

var processData;

form.fileupload({

maxNumberOfFiles: 2,

getNumberOfFiles: function () {

return 2;

},

singleFileUploads: false,

processalways: function (e, data) {

processData = data;

},

processstop: function () {

expect(processData.files[0].error).to.equal(

form.fileupload('option').i18n('maxNumberOfFiles')

);

expect(processData.files[1].error).to.equal(

form.fileupload('option').i18n('maxNumberOfFiles')

);

done();

}

});

form.fileupload('add', { files: files });

});

});

})(this.chai.expect, this.jQuery);