Javascript file upload plugin with progress bar support. Works in all major browsers, including IE7+, Chrome, Firefox, Safari, and Opera. No dependencies - use it with or without jQuery.
Hi, I'm using the API to load images to my app, but drag and drop don’t work on FireFox and IE after image selection screen is opened. I tried to drag and drop an image for the component area but it is not allowed for the mentioned browsers.
Configuration used
new ss.SimpleUpload({
dropzone : 'cod-div', // HTML element used as upload button
button : 'cod-div', // HTML element used as upload button
url : _url, // URL of server-side upload handler
name : 'arquivo', // Parameter name of the uploaded file
multipart : true,
hoverClass : 'cod-div-hover',
multiple : true,
accept : 'image/*',
maxSize : 5120,
allowedExtensions : ['jpg', 'jpeg', 'png'],
onSubmit : function(filename, extension) {
// Create the elements of our progress bar
var progress = document.createElement('div'), // container for progress bar
bar = document.createElement('div'), // actual progress bar
fileSize = document.createElement('div'), // container for upload file size
wrapper = document.createElement('div'), // container for this progress bar
progressBox = document.getElementById('cod--upload-box'); // on page container for progress bars
// Assign each element its corresponding class
progress.className = 'cod--upload-progress';
bar.className = 'cod--upload-bar';
fileSize.className = 'cod--upload-size';
wrapper.className = 'cod--upload-wrapper';
// Assemble the progress bar and add it to the page
progress.appendChild(bar);
wrapper.innerHTML = '<div class="cod--upload-name">'+filename+'</div>'; // filename is passed to onSubmit()
wrapper.appendChild(progress);
wrapper.appendChild(fileSize);
progressBox.appendChild(wrapper); // just an element on the page to hold the progress bars
// Assign roles to the elements of the progress bar
this.setProgressBar(bar); // will serve as the actual progress bar
this.setFileSizeBox(fileSize); // display file size beside progress bar
this.setProgressContainer(wrapper); // designate the containing div to be removed after upload
},
onComplete : function(fileName, data){
var datajson = JSON.parse(data);
self._buildImagem(datajson);
}
});
Hi, I'm using the API to load images to my app, but drag and drop don’t work on FireFox and IE after image selection screen is opened. I tried to drag and drop an image for the component area but it is not allowed for the mentioned browsers.
Configuration used
new ss.SimpleUpload({ dropzone : 'cod-div', // HTML element used as upload button button : 'cod-div', // HTML element used as upload button url : _url, // URL of server-side upload handler name : 'arquivo', // Parameter name of the uploaded file multipart : true, hoverClass : 'cod-div-hover', multiple : true, accept : 'image/*', maxSize : 5120, allowedExtensions : ['jpg', 'jpeg', 'png'], onSubmit : function(filename, extension) { // Create the elements of our progress bar var progress = document.createElement('div'), // container for progress bar bar = document.createElement('div'), // actual progress bar fileSize = document.createElement('div'), // container for upload file size wrapper = document.createElement('div'), // container for this progress bar progressBox = document.getElementById('cod--upload-box'); // on page container for progress bars