- JavaScript API -

A Javascript API is available to get notified about transfer events. All available events are defined in table below. A custom event parameter is passed within each callback and event.detail includes information about file and transfer.

CustomEvent object (event)  includes:

event.type: The name of the event (Event column below)
event.detail : Information about file and transfer

Events
Event Description and event.detail example
onJSInitialized It is called on file uploader initialization.
{"version":"1.2","ui":"jbatchupload-template","addons":[]}
onNewFileAccepted It is called after a file has been successfully added to queue. It means all checks (when enabled) have been passed (blacklist, whitelist, maxsize ...). "path" includes relative file path when recursive folder support is enabled. "altname" is file name uploaded, it can be different from "name" when template parameter is enabled.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}}
onFileRemovedFromQueue It is called after a file has been removed from queue. "source" can be "ui" (when end-user removed file from UI) and "monitor" (when file is removed from UI after transfer).
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}, "source":"ui"}
onAllFilesRemovedFromQueue It is called after queue is cleared (remove all action in UI).
{}
onInfoStarted It is called on HEAD request for resume (when enabled) to check if file already exists remotely. "retryAttempt" is the number of HEAD call attempts when failure occurs.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}, "retryAttempt":0}
onInfoEnded It is called once HEAD request ended. "status" is 200 when remote file exists and 404 when not.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"},"status":200, "remoteSize":"122938", "retryAttempt":0}
onUploadStarted It is called when HTTP POST/PUT chunk upload started. "startByte" and "endByte"provides range for bytes to transfer.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"},  "startByte":0, "endByte":122938, "retryAttempt":0}
onUploadTimeout It is called after all retry attempts.
{"tfile":{"name":"test.png", "path":"", "size":122938,"type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}, "startByte":0, "endByte":122938, "retryAttempt":5} 
onUploadCancelled It is called when transfer is aborted.
{"tfile":{"name":"test.zip", "path":"", "size":6286748, "type":"application/x-zip-compressed", "lastModifiedDate":"2013-11-26T17:55:34.244Z", "isFile":true, "file":{}, "altname":"test.zip"}, "startByte":0, "endByte":5242880, "retryAttempt":0}
onUploadCompleting It called after 100% upload reached from client-side.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{},"altname":"test.png"}, "startByte":0, "endByte":122938, "retryAttempt":0}
onUploadCompleted It is called after each chunk transfer, full=true means final chunk.
{"tfile":{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}, "startByte":0, "endByte":122938, "full":true, "retryAttempt":0}
onUploadFailed It is called after all retry attempts.
{"tfile":{"name":"test.png", "path":"", "size":122938,"type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}, "startByte":0, "endByte":122938, "status":0, "retryAttempt":5}
onTransferAborted It is called when overall transfer is cancelled. "tfiles" is an array of successful transfers before abort.
{"tfiles":[{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname": "test.png"}]}
onTransferDone It is called when overall transfer is done successfully. "tfiles" is an array of tfile transferred.
{"tfiles":[{"name":"test.png", "path":"", "size":122938, "type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}]}
onFinalPostStarted It is called on final POST request after transfer (when "post" parameter is enabled). "tfiles" is an array of tfile transferred.
{"tfiles":[{"name":"test.png", "path":"", "size":122938,"type":"image/png", "lastModifiedDate":"2016-06-05T12:27:46.674Z", "isFile":true, "file":{}, "altname":"test.png"}]}
onFinalPostEnded It is called once final POST request ended:
{"status":200}


HTML and JavaScript example

Hereafter the code you need to copy/paste in your HTML source to use file uploader. "jfucontainer" DIV is the place where the uploader will be displayed. You can include it anywhere in your HTML page. function oneForAllCallback registers to all events and display event detail in JavaScript console.

<html>
<head>
<meta charset="UTF-8"/>
 <link type="text/css" rel="stylesheet" href="css/style.css" />
 <link rel="prefetch" href="img/icons.png"/>
</head>
<body>

<div id="jfucontainer" style="width:500px;">
  <!-- UI will be inserted here automatically -->
</div>

<br/>

<script type="text/javascript" src="js/fileupload.min.js"></script>
<!-- Start your code here -->
<script>
       // Setup some parameters
       var params = {
           /* Regular parameters */
           url : "http://yourserver.com/upload/process.php",
           paramfile : "uploadfile",
           maxfilesize : 1048576 * 500,
           maxfiles : 50,
           maxsize : 1048576 * 1000,
           chunksize : 1048576 * 50,
           resume : true,
           retry : 5,
           retrydelay : 2,
           folderdepth : -1,
           resetprogressbar : true,
           policy : "ignore",
           overwritepolicy : "prompt",
           /* Extra parameters */
           param1 : "todo",
           value1 : "upload",      
           param2 : "relativefilename",
           value2 : "true",         
           param3 : "emptydirectory",
           value3 : "true",
           param4 : "encodeheaders",
           value4 : "false",            
           loglevel : 1
       };

       // Create your instance of JFileUpload.
       // "jfucontainer" is DIV identifier where you want it to be displayed.
       var jfu = new JFU("jfucontainer", params);

       // Register some listeners from JavaScript API.
       function oneForAllCallback(source, event) {
           var eventStr = JSON.stringify(event.detail);
           console.log("Event: " + eventStr);
       }

       // List of all JSAPI callback available under jfu.JSAPI array.
       for (var l = 0; l < jfu.JSAPI.length; l++) {
           jfu.addEventListener(jfu.JSAPI[l], oneForAllCallback);
       }

       // Initialize
       if (jfu.allFeaturesSupport() === true) {
           // Display now
           jfu.initialize();
       }
       else {
          // Browser not supported
          var jfucontainer = document.getElementById("jfucontainer");
          jfucontainer.innerHTML = "<h2>Browser not supported</h2>";
       }
</script>
<!-- End your code here -->
<br/>

</body>
</html>