RealUploader Class

The main uploader class accept two options as parameters: the DOM element where to show the uploader and the configuration options

                var uploader = new RealUploader(DOMElement, config);

Main Parameters

Name Type Description Default
DOMElement String | HTMLElement The DOM element where to show the uploader. Can be either a HTMLElement object or string query selector Mandatory
Css class selector:
                                <div class="myElementClass"></div>
<div class="myElementClass"></div>
var uploader = new RealUploader(".myElementClass");
Get the html element as parameter:
                                <div id="elementID"></div>
var element = document.getElementById("elementID");
var uploader = new RealUploader(element);
config Object Configuration of the RealUploader set by the user. See the following list for the full list. Show
Name Type Description Default
accept String Accept attribute to set on the the file input, will be used in combination with the allowExtension setting null
allowedExtensions Array Array of allowed upload extension, can be set also in php script []
allowDelete boolean Allow user to delete file after upload. NOTE: should also be enabled from server side for security reason false
autoStart boolean If true upload will start immediately after drop of files or select of files false
async boolean Set the XMlHttpRequest async for the upload true
bandwidthUpdateInterval number Set the interval that refresh the bandwidth calculation, 0 to disable 1000
checkFileExists boolean Do not ask user for file exits if false, if true ask user to override or not the file false
chunkSize number Default 1Mb, if supported send file to server by chunks, not at once 1048576
data Object|Function|String User data to send to the server with the file upload in POST request. On server side a variable with the object key is expected. Example data: {mykey: myvalue} on PHP we will have $_POST['mykey'] {}
dropClass String|Object|Function Set the class of dom element when the files are drag over 'ax-drop'
dropArea String|HTMLElement Set the DOM element where to bind the drag event. If it is provided the self string then the dropArea will be bind to the uploader container null
enable boolean Start the uploader state. If set to false, it will not be possible to upload files until an external call to the enable method will be called true
editFilename boolean Enabled file name edit before upload with double click false
exifRead boolean Enables exif read from JPEG file, it will attach the information to the file object false
fileTemplate HTML Customize the HTML for the file template, to be used by keeping the class names. This will allow the users to change easy the html and preview. The default value is hardcoded inside the code. See the following for the default value.

By preserving the class names of the element the uploader will be able to identify the template. All the template elements are optional, so this will allow the user to remove elements.

<a class="ax-prev-container">
    <img style="cursor: pointer;" class="ax-preview" src="" alt="">
<div class="ax-details">
    <div class="ax-file-name"></div>
    <div class="ax-file-size"></div>
<div class="ax-progress-data">
    <div class="ax-progress">
        <div class="loader ax-progress-bar"></div>
        <div class="ax-progress-info"></div>
    <div class="ax-progress-stat"></div>
<div class="ax-toolbar">
    <a class="ax-upload ax-button">
        <span class="ax-upload-icon ax-icon"></span>
        <span class="ax-btn-text"></span>
    <a class="ax-remove ax-button">
        <span class="ax-clear-icon ax-icon"></span>
        <span class="ax-btn-text"></span>
    <a class="ax-delete ax-button ax-disabled">
        <span class="ax-delete-icon ax-icon"></span>
        <span class="ax-btn-text"></span>
    <a class="ax-info ax-button">
        <span class="ax-info-icon ax-icon"></span>
        <span class="ax-btn-text"></span>
hideUploadButton boolean Hides the main upload button, to be used on autoStart to true or when the upload is trigger by external function false
language String Set the language of the string for button, labels... By default it is detected the browser language. The format should be en_UK, it_IT, sq_AL ... 'auto'
mainTemplate HTML Set the main template html for the base buttons: Add Files, Upload All, Remove All. This will allow the users to change easy the html. The default value is hardcoded for more see the Custom Main Template page Default value:
<div class="ax-main-container">
    <h5 class="ax-main-title">Select Files or Drag&amp;Drop Files</h5>
    <div class="ax-main-buttons">
        <a title="Add files" class="ax-browse-c ax-button">
            <span class="ax-browse-icon ax-icon"></span>
            <span class="ax-browse-text ax-text">Add files</span>
            <input type="file" class="ax-browse" multiple />
        <a title="Upload all files" class="ax-upload-all ax-button">
            <span class="ax-upload-icon ax-icon"></span>
            <span class="ax-upload-text ax-text">Start upload</span>
        <a title="Remove all" class="ax-clear ax-button">
            <span class="ax-clear-icon ax-icon"></span>
            <span class="ax-clear-text ax-text">Remove all</span>
    <div class="ax-file-list"></div>
maxFiles number Set the maximum file of number allow to upload at the same session. Recommended to keep this settings low when uploading big files 9999
maxConnections number Set the maximum number of parallel uploads. By default most of browser will allow 6 parallel connections. Limit to three will allow a faster file upload. 3
maxFileSize number|String Set the maximum file size for file upload. Can be set as String with format 10M, 200K, 4G to set the unit or as number 1123123 for indicating bytes. 10485760
minFileSize number|String Set the minimum file size for file upload. Can be set as String with format 10M, 200K, 4G to set the unit or as number 1123123 for indicating bytes. 0
md5Calculate boolean Calculate the MD5 hash of the file using WebWorkers, can slow down or hang the browser on big files, use with care. false
overrideFile boolean If set to false the files on the server will not be override. The file will be renamed if already exits. If set to true the file user will be prompt to override the file. false
thumbHeight number Set the maximum height of the image thumbnail to generate on server 0
thumbWidth number Set the maximum height of the image to thumbnail on server 0
thumbPostfix String Set the postfix of the generated re-sized image, Filename_thumb.ext '_thumb'
thumbPath String Set the path where to upload the re-sized image ''
thumbFormat String Set the thumbnail export format, by default same as original image. Possible values jpg, png, gif. ''
url URL Set the server side script that handles the upload 'upload.php'
uploadDir boolean Experimental feature for uploading an entire folder. Works only on Google Chrome false
removeOnSuccess boolean If true the file will be removed from the list when the upload is successful false
removeOnError boolean If true the file will be removed from the list when the upload fails false
remotePath String|function Set the remote path where to upload the file on server. If this path is set on the server script then this value will be ignored. The folder will be created automatically if does not exists ''
resizeImage Object Resize the image settings before uploading on server. This will create a new file and can work both with the server size. Uses WebWorkers and Canvas. See the following sub-table for the options:
maxWidth number Maximum width for the resize 0
maxHeight number Maximum height for the resize 0
outputQuality number Set the output quality. Possible values from 0 to 1 1
scaleMethod number Select the scale method to use for the image resize. Current available values 0 for nearest neighbour, 1 for Hamming 2 for Lancoz 2, 3 for Lancoz 3 3
outputFormat String Select the output format can be png/jpg. By default output format is the same as original image. 'auto'
keepExif boolean Remove the exif info on re-sized if true. false will make a copy false
keepAspectRatio boolean Keep the aspect ratio on resize. By default is true, so the image will be fit in the given dimension. If false the image will be scaled exactely to the given dimension. true
allowOverResize boolean If the maxWidth/maxHeight is over the real image false
unsharpAmount number 0-500 set the sharpness level of resize 0
unsharpThreshold number 0-100 set the sharpness threshold 0
alpha boolean Use alpha channel. Default = false false
previews boolean If true the system will make the preview of the image and a light box Set to false to avoid memory problems on multiple image selection true
previewFileSize number Set a limit to the image preview, for big images the browser can cause memory problems and slowness 10485760
listeners Object Main listeners handles. This is an object containing all listeners events See the following table:
start(ArrayfilesPending) filesPending array of files ready to be uploaded Runs on upload start when upload all is pressed
startFile(Object fileObj) file file object uploading Runs on upload start of the single file
finish(Array fileNames, Array fileList) fileNames array of the file names uploaded
fileList array of files object uploaded
Runs when all files finish uploading
finishFile(Object file, String msg) file file uploaded
msg any message from server
Runs on upload finish success for the single file
error(String errorMsg) errorMsg error string Runs on error raise for any file
errorFile(Object file, String name) file file that raise error
name name of the file
Runs on error upload for single file
beforeUpload(Array fileList) fileList array of files object uploaded Runs before upload all, if return false then upload is stopped
beforeUploadFile(Object file, String name) file file to be uploaded
name name of the file
Runs before the upload of the single if returns false upload will be stopped for the single file
init() No parameters Runs on plugin initialization
progress(Int totalBytes) totalBytes total bytes uploaded Runs on progress action of upload all. Not recommended to use
progressFile(Object file, Int percent) file file to be uploaded
percent percent of upload of file
Runs on file elaboration progress, upload/md5 calc/resize. This callback will be called for a maximum of 100 times (1 for every percent progress)
beforePreview(Object file) file file to be uploaded Runs before preview, if return false stops preview
preview(Object file) file file to be uploaded Runs after preview has been done
select(Array fileList) fileList array of files selected on the select event Runs after file select, returns selected file as parameter of callback
chunkUpload(Object file, String name, Blob chunk, XmlHttpRequest xhr) file file being uploaded
name file name
xhr xhr object that makes the request
Event that runs on a chunk upload
exifDone(Object file, Object exif) file file being uploaded
exif exif data object with key - value
Runs once the exifDone has been calculated
md5Done(Object file, String md5) file file being uploaded
md5 current md5 calculated from this file
Event that fires when the md5 has been calculated
beforeImageResize(Object file) file file object which is making preview Runs before the resize takes place
imageResize(Object file, Blob result) file file object which is making preview
result blob preview of the file
Runs on image resize done
dragEnter(Event e, HTMLElement element) e native drag enter event
element element where drag enter ocours
Event that runs when the user drags and enter the drag and drop area
dragLeave(Event e, HTMLElement element) e native drag enter event
element element where drag enter ocours
Event that runs when the user leaves the drag and drop area
drop(Event e, HTMLElement element) e native drag enter event
element element where drag enter ocours
Runs when the user drop files in the drag and drop area. For getting the droped files use e.dataTransfer.files
dragOver(Event e, HTMLElement element) e native drag enter event
element element where drag enter occurs
Event that runs on dragging over the drop area. Use with caution for performance issues.
afterRenderFile(Object file, Object elements) file The file object of real uploader
elements List of DOM elements composing the file DOM as follows:
  • elements.container main DIV container
  • elements.nameContainer file name container
  • elements.sizeContainer size container
  • elements.uploadButton upload button container
  • elements.uploadButtonText upload button text container
  • elements.removeButton remove button container
  • elements.removeButtonText remove button text container
  • elements.deleteButton delete button container
  • elements.deleteButtonText upload button text container
  • elements.infoButton info delete container
  • elements.infoButtonText info button text container
  • elements.previewImage img element of preview
  • elements.previewContainer wrapper of img element
  • elements.progressBar
  • elements.progressInfo
  • elements.progressStat
Runs after the file has been DOM element has been attached to the DOM
beforeRenderFile(Object file, String template) file The file object of real uploader
template the user template string in html format or the default one
Runs before attaching the file HTML to the dom. Useful to manipulate the template. To change the template it must return it.
validateFile Function User defined callback to run on file validation, with custom condition. If this function return false then the file will not be added to the list null