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


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


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)


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.


Loading fileBuffer object

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

... and initializing (with onEmpty event)

<script type="text/javascript">
    XHR: 'submit.php',
    formData: {anyVariable: 'anyValue', ...}
    onEmpty: function() {alert('All files uploaded!');}

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.