| 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="">
</a>
<div class="ax-details">
<div class="ax-file-name"></div>
<div class="ax-file-size"></div>
</div>
<div class="ax-progress-data">
<div class="ax-progress">
<div class="loader ax-progress-bar"></div>
<div class="ax-progress-info"></div>
</div>
<div class="ax-progress-stat"></div>
</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>
<a class="ax-remove ax-button">
<span class="ax-clear-icon ax-icon"></span>
<span class="ax-btn-text"></span>
</a>
<a class="ax-delete ax-button ax-disabled">
<span class="ax-delete-icon ax-icon"></span>
<span class="ax-btn-text"></span>
</a>
<a class="ax-info ax-button">
<span class="ax-info-icon ax-icon"></span>
<span class="ax-btn-text"></span>
</a>
</div>
|
| 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&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>
<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>
<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>
</a>
</div>
<div class="ax-file-list"></div>
</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 |