fileBuffer.js

fileBuffer is simple library for uploading multiple files one-by-one. No extra framework required. Download minified version

Properties

Property	Description	Default value
string URI	Upload submit URL	/
string requestField_File	Form element - uploaded file	file
string requestField_Filename	Form element - uploaded filename	name
object fromData	Additional data added to the form with submited file	empty object
function onSuccess	onSuccess event	null
function onAddFile	onAddFile event	null
function onProgress	onProgress event	null
function onUploadStart	onUploadStart event	null
function onEmpty	onEmpty event	null
Array files	Array contains file objects in buffer and its uqId (unique ID) values. Set by readFiles method.	empty Array
object File currentFile	Contains currently uploaded file. Set by nextFile method.	null
object XMLHttpRequest XHR	Currently used HTTP Request object. Set by initialize method.	null

Methods

Property	Description
void initialize(object Settings)	Initialize fileBuffer. Settings contains properties and its values to set.
boolean readFiles(object FileList)	Add files to fileBuffer. Return true if success, false if empty list passed. FileList object can be received by HTML file input tag or via dataTransfer object.
int addFile(int uqId, object File)
object File nextFile()
void initXHR()
void upload()
void progress(event e)

Events

Event	Fired when	Description
void onSuccess(int uqId, string Response)	Uploading of single file finished	uqId contains unique ID, Response contains string returned by XML HTTP Request.
void onAddFile(int uqId, object File File)	Added files to buffer by readFiles method (fired for every file)	uqId contains unique ID, File contains currently added file.
void onProgress(int uqId, object Progress)	Changed uploading progress state	uqId contains unique ID, Progress object has following properties: float percent (percent completed), int loaded (currently uploaded bytes), int total (total size of current file). Returning of upload progress must be supported by a browser.
void onUploadStart(int uqId, object File File)	Uploading of single file starts	uqId contains unique ID, File contains currently uploaded file.
void onEmpty()	All files uploaded	Nothing to describe ;)

Red marked properties and methods are for internal use of fileBuffer class.

Usage

Loading fileBuffer object


  <script src="path/to/filebuffer.min.js" type="text/javascript"></script>

... and initializing (with onEmpty event)


  <script type="text/javascript">

  fileBuffer.initialize({

      XHR: 'submit.php',

      formData: {anyVariable: 'anyValue', ...}

      onEmpty: function() {alert('All files uploaded!');}

  });

  </script>

Now attach fileBuffer to <input type="file"> element:


  <input name="file" type="file" onchange="if(fileBuffer.readFiles(this.files)) {fileBuffer.upload(); this.value='';}">

When you select any files (input onchange event), fileBuffer tries to read them. Once succesfully added, file uploading begins and input field is cleared.