- 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
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>
|
|