WP wp-media.js – Bulk Upload
Please Note:
This post is a work in progress and is mainly documentation on things I have discovered / learned while working on a project. There are probably better ways of doing some of this.
Some uploader settings
- dropzone :
This is the container element where the user will be dropping files. This triggers the drop files here when files are dragged over the element. - container :
To confirm - browser :
To confirm - error :
Error handler e.g. function(e){ } - success :
This fires when a file has been uploaded (it fires for each file that has been added). - added :
This fires as each file is added to the drop zone (it fires for each file added). - progress :
This fires while the file is being uploaded, (it fires for each file that has been added). - complete :
I’ve never seen this fire so far so I’m not sure what triggers it. - refresh :
I think this fires if the instance is refreshed but I haven’t confirmed.
uploader: {
dropzone: $('.dragzone'), // The dropzone container
container: $('.dragzone'),
browser: 'browse_button',
error: function(e) { // if there is an error during upload this should fire.
console.log(e);
console.log('error');
},
success: function(e) { // once a file is uploaded this should fire.
//console.log(e);
//console.log('success');
fileTemplate(e);
noItemsUp++; // update the number of items uploaded.
prevProgress = Math.floor(progressBar);
progressBar = Math.floor(percent * noItemsUp);
animateProgress();
$('#importFiles').prop('disabled', false);
},
added: function(e) { // this fires when a file is added.
noItems++; // add 1 to the number of items being uploaded
percent = 100 / noItems; // work out the new percentage per item...
prevProgress = progressBar; // This is needed so the animated counter can work
progressBar = percent * noItemsUp; // This is the new progress the bar needs to move to.
animateProgress();
},
progress: function(e) { // this fires while the file is being uploaded.
//console.log(e);
//console.log('progress');
},
complete: function(e) { // ?
//console.log(e);
//console.log('complete');
},
refresh: function(e) { // ?
//console.log(e);
//console.log('refresh');
}
}