We Keep Coding

Dropzone.js options - cannot get them to work

Based on Dropozone.js FAQ I have tried to display a message on successful upload.
Code from the header looks like:
<script>
$(document).ready(function() {
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, responseText) {
var responseText = "TaDa!";
file.previewTemplate.appendChild(document.createTextNode(responseText));
});
}
};
)};
</script>
And code from the html section:
<form action="/file-upload" class="dropzone" id="my-dropzone"></form>
Drag and drop upload works fine but I'm not getting desired message on success.

This is because dropzone initializes before the options are set, to avoid this just place the dropzone options outside the ready function.
<script>
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, responseText) {
var responseText = "TaDa!";
file.previewTemplate.appendChild(document.createTextNode(responseText));
});
}
};
$(document).ready(function() {
// Your other javascript
)};
</script>

I had this problem too and after trying the solution #wallek876 provided I was still unable to set options for the #Media_Dropzone object. finally I've found that Dropzone is unable to find elements with ID's in which contain underscores!! so basically renaming the element from #Media_Dropzone to #MediaDropzone and of-course implementing the accepted answer here solved my problem.

How to use jQuery to load codepress

I am using codepress in a CMS to edit files in the filesystem. Everything works nicely, however when trying to load the same page using jQuery load() function, codepress seems to break.
My javascript code looks like this which loads the php file with codpress, however codepress seems to not fire.
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#rightColWrap').fadeIn(150);
});
});
});
Digging into codepress.js I see this at the end of the file but I'm not understanding if there is something I could add to my initial on click event listner script to help codpress fire.
if(window.attachEvent) window.attachEvent('onload',CodePress.run);
else window.addEventListener('DOMContentLoaded',CodePress.run,false);
Here is the link to codepress on sourceforge
https://sourceforge.net/projects/codepress/

To be logic : when the data are loaded, we want to initialize CodePress.
So your code should look like :
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
CodePress.run();
$('#rightColWrap').fadeIn(150);
});
});
});
If this didn't work please provide error from the console.
Edit : corrected answer, seen Robson França's comment.
Last issue was that CodePress.run; should have been written CodePress.run();

The answer was that we needed to add parentheses to CodePress.run and after the fadeIn() call.
$('#content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#content').fadeOut(150, function(){
$('#content').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#content').fadeIn(150, function(){
CodePress.run();
});
});
});
});

jQuery File Upload hooked to button

I am attempting to use the jQuery File Upload Plugin here
The behavior I want is similar to the home page that loads - i.e - the ability to select multiple files - when selected I don't need the button to upload files individually (just remove with the cancel button individually) and remove all with the cancel button along the top bar
I am developing my site in c# mvc and the file gets uploaded to a ECM solution via CMIS Browser Bindings so I dont actually hit an MVC controller method. As I am using Browser Bindings I need to upload each file individually to the CMIS Endpoint. The code works fine doing an auto data submit for each file
So the working code I have is:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
add: function (e, data) {
$.each(data.files, function (index, file) {
data.url = 'mycmis_url';
data.type = 'POST';
data.submit();
});
},
done: function (e, data) {
alert("Done");
}
});
If I do have 3 files selected to upload I will get 3 'Done' alerts but the 3 files all upload successfully. However as mentioned the behavior I want is one Uppload All button that would trigger the upload for each of my selected files. I have the code below:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
autoUpload: false,
add: function (e, data) {
$.each(data.files, function (index, file) {
data.url = 'mycmis_url';
data.type = 'POST';
});
$("#uploadAllFilesBtn").unbind('click').on('click', function () { data.submit(); });
},
done: function (e, data) {
alert("Done");
}
});
So I have set the autoUpload property to false but if I select two files and then click my Upload All Files button as my uploadAllFiles button is outside my each loop if my first selected file is called foo.txt and my 2nd selected file is bar.txt it will only upload bar.txt.
Has anyone got any idea how I could have a button called upload all that would trigger a data.submit for each individual file?

Incorporating code from your later question:
$('#uploadFile').fileupload({
replaceFileInput: false,
singleFileUploads: true,
add: function(event, data) {
data.url = 'myUrl';
data.type = 'POST';
data.context = $('<tr>'
+ '<td><strong>Selected File : </strong>' + data.files[0].name + '</td>'
+ '<td> </td>'
+ '<td><button type="button" class="removeBtn btn btn-default">'
+ '<span class="glyphicon glyphicon-remove-circle"></span>'
+ 'Remove File</button></td>'
+ '</tr>')
.appendTo('#files')
.data('data', data);
}
});
$('#files').on('click', '.removeBtn', function() {
$(this).closest('tr').remove();
});
$('#uploadAllFiles').click(function() {
var jqXHRs = [];
$('#files').find('tr').each(function() {
jqXHRs.push($(this).data('data').submit());
});
$.when.apply($, jqXHRs).done(function() {
alert('done');
});
});
Note:
Since you have singleFileUploads set to true, the data.files array will always contain exactly one file.
The data is attached to the <tr> element using jQuery's .data() function.
For the "Remove" buttons, the code is using event delegation, which was suggested by #Ekansh's answer to your other question.

Dynamically use bleuimp jquery file upload

I am using the blueimp JQuery fileupload, however I would like to use it dynamically. I've got about 5 elements on my webpage and each of them should call the javascript function (auto upload) when a file was selected. Below is the basic version of bleuimp JQuery file upload. Instead of using a div called #fileupload, I have 5 divs with ids #fileupload1 to #fileupload5.
I would like to get the javascript code working for all 5 #fileupload id's using a single javascript block. So basically I am looking to use the code below but for all 5 elements. Is there a way to do that and if so does someone have an example for me? Thanks for any help.
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
alert('DONE');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});

I found a solution. Maybe not the best one but so far it works for me.
$('.dp-upload-container').each(function () {
// Code from $(function() { }); here using different ID's and classes dynamically.
});

jQuery File Upload - how to recognise when all files have uploaded

I'm using the jQuery File Upload plugin.
I would like to be able to trigger an event when all selected files have finished uploading. So far I have an event for doing an action when a file(s) is selected for uploading and when each particular file finishes uploading - is there a way to detect that all selected files have finished uploading?
The actual app is here http://repinzle-demo.herokuapp.com/upload
My input field looks like this:
<div id="fine-uploader-basic" class="btn btn-success" style="position: relative; overflow: hidden; direction: ltr;">
My script code looks like this:
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) { // when files are selected this lists the files to be uploaded
$.each(data.files, function (index, file) {
$('<p/>').text("Uploading ... "+file.name).appendTo("#fileList");
});
data.submit();
},
done: function (e, data) { // when a file gets uploaded this lists the name
$.each(data.files, function (index, file) {
$('<p/>').text("Upload complete ..."+file.name).appendTo("#fileList");
});
}
});
});
</script>
I am handling the request with a Play Framework (Java) controller that looks like this:
publi
c static void doUpload(File[] files) throws IOException{
List<ImageToUpload> imagesdata = new ArrayList<ImageToUpload>();
//ImageToUpload has information about images that are going to be uploaded, name size etc.
for(int i=0;i<files.length;i++){
Upload upload = new Upload(files[i]);
upload.doit(); //uploads pictures to Amazon S3
Picture pic = new Picture(files[i].getName());
pic.save(); // saves metadata to a MongoDB instance
imagesdata.add(new ImageToUpload(files[i].getName()));
}
renderJSON(imagesdata);
}

I think you are looking for 'stop' event:
$('#fileupload').bind('fileuploadstop', function (e) {/* ... */})
as said in the plugin documentation:
Callback for uploads stop, equivalent to the global ajaxStop event
(but for file upload requests only).
You can also specify the function on plugin creation passing it as parameter
$('#fileupload').fileupload({
stop: function (e) {}, // .bind('fileuploadstop', func);
});

Here's the solution you want:
$('#fileupload').on('fileuploaddone', function(e, data) {
var activeUploads = $('#fileupload').fileupload('active');
if (activeUploads == 1) {
console.info("All uploads done");
}
});
I was with this problem also, fixed 3 years ago.