Real Uploader has several listeners for almost every type of event. Callback functions
can be bind at start up using the listeners
option of the uploader or during run time using the
The complete list of listeners
<div id="targetElement"></div>
<script type="text/javascript">
var uploader = new RealUploader("#targetElement", {
md5Calculate: true,
url: "../examples/upload.php",
listeners: {
start: function() {
console.log("Upload All pressed");
},
startFile: function(file) {
console.log("Upload file start: " +file.name);
},
finish: function() {
console.log("All files have been uploaded");
},
finishFile: function(file, msg) {
console.log("Upload file start: " +file.name);
},
error: function(msg) {
console.log("There was an error general error: "+ msg);
},
errorFile: function(file, info, name) {
console.log("There was an error uploading this file: " +info);
},
beforeUpload: function(fileListArray) {
//if return false then upload will be stopped
console.log("Before upload triggered");
return true;
},
beforeUploadFile: function(file, name) {
//if return false this file will not be uploaded
console.log("Before upload "+name+" triggered");
return true;
},
/**
*
* @param file File Object (JS object class)
* @param template String in HTML format
*/
beforeRenderFile: function(file, template) {
//this events runs before file template is attached to the DOM
//useful if dom template html manipulation is needed
console.log("beforeRenderFile render triggered");
},
/**
*
* @param file File Object (JS object class)
* @param domObject JS object to access the DOM elements
* domObject.container is the main container
*/
afterRendererFile: function(file, domObject) {
//if return false this file will not be uploaded
console.log("afterRendererFile triggered");
},
init: function() {
console.log("Real Uploader has been initialized");
},
progress: function(totalBytes) {
console.log("Total bytes uploading: " + totalBytes);
},
progressFile: function(file, percent) {
console.log("Progress called for " + file.name+ "-"+percent);
},
beforePreview: function(file) {
console.log("Doing preview of file "+file.name);
//return false to stop preview
return true;
},
preview: function(file) {
console.log("Preview of file done successfully "+file.name);
},
select: function(fileListArray) {
//runs on files select/or drag and drop
console.log("Number of selected files "+fileListArray.length);
},
chunkUpload: function(file, name, size, chunk, xhr) {
console.log("Chunk uploaded "+file.name);
},
exifDone: function(file, exifObject) {
console.log("Exif read ", exifObject);
},
md5Done: function(file, md5) {
console.log("MD5 of file ", file.name, "is", md5);
},
beforeImageResize: function(file) {
console.log("Starting image resizing", file.name);
//if return false the resize will be cancelled
//this event will run only for images
return true;
},
imageResize: function(file, blob) {
console.log("Image Resize done", file.name);
},
validateFile: function(name, ext, size) {
//this callback is particular, this is used
//of user custom file validation
//validation is passed if returns false/0/null/undefined
//if returns something different from the above the
//file will not be added for upload and that will be
//used as error message
return false;
}
}
});
</script>
<script type="text/javascript">
uploader.on('select', function(){
console.log("This is another callback added to the select event ");
});
</script>
Open the console of your browser to see the result