search

cybermatatu / dnd-file-upload

Automatically exported from code.google.com/p/dnd-file-upload
0 stars 0 forks source link

Multiple dropzones problem #8

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Define two or more dropzones (just in diferent tabs or same, it doesn't 
matter)

What is the expected output? What do you see instead?
1. Each dropzone must have her own 'progress bar' and take her own 
'uploadStarted / uploadFinished / ...' actions.

  Both dropzones use the same 'uploadStarted / uploadFinished / ...' actions and 'progress bar'.

  How can I define diferent dropzones with diferent actions, diferent progessbars, etc, defining totally independent dropzones.

Thanks in advance,
  Sergio Ruiz

Original issue reported on code.google.com by sr...@brandeastudio.com on 23 Jun 2011 at 10:10

GoogleCodeExporter commented 9 years ago 
Hi

I've hitted the same issue, so i made some adjustions to get it work. See it at 
http://pastebin.com/YjsVstEH

Original comment by Sauronfr...@gmail.com on 24 Jun 2011 at 9:34

GoogleCodeExporter commented 9 years ago 
Hi,

  First of all, thanks for your response. I have used your code onto my 'js' file, but it neither works. Do you have any page/example with multiple dropzones working online?

  I don't know if my problem is on the 'js' definitions for the dropzones, each one with their own 'ids'.  I've pasted it below:

<script type="text/javascript">
$(function() {
$.fn.dropzone.uploadStarted = function(fileIndex, file){
    var infoDiv = $("<div></div>");
    infoDiv.attr("id", "file-dropzone-info" + fileIndex);
    infoDiv.html("upload started: " + file.fileName);

    var progressDiv = $("<div></div>");
    progressDiv.css({
        'background-color': 'orange',
        'height': '20px',
        'width': '0%'
    });
    progressDiv.attr("id", "file-dropzone-speed" + fileIndex);

    var fileDiv = $("<div></div>");
    fileDiv.addClass("file-dropzone-info");
    fileDiv.css({
        'border' : 'thin solid black',
        'margin' : '5px'
    });
    fileDiv.append(infoDiv);                
    fileDiv.append(progressDiv);                

    $("#file-dropzone-info").after(fileDiv);
};
$.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
    $("#file-dropzone-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
    $("#file-dropzone-speed" + fileIndex).css({
        'width': '100%',
        'background-color': 'green' 
    });
};
$.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, 
newProgress){
    $("#file-dropzone-speed" + fileIndex).css("width", newProgress + "%");
};
$.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
    var dive = $("#file-dropzone-speed" + fileIndex);

    dive.html( getReadableSpeedString(KBperSecond) );
};
$.fn.dropzone.newFilesDropped = function(){
    $(".file-dropzone-info").remove();
};
$("#file-dropzone").dropzone({
    url : '<?=site_url()?>/front/business/upload_file/<?=$empresa->id?>',
    printLogs : true,
    uploadRateRefreshTime : 500,
    numConcurrentUploads : 2
});

$.fn.dropzone.uploadStarted = function(fileIndex, file){
    var infoDiv = $("<div></div>");
    infoDiv.attr("id", "img-dropzone-info" + fileIndex);
    infoDiv.html("upload started: " + file.fileName);

    var progressDiv = $("<div></div>");
    progressDiv.css({
        'background-color': 'orange',
        'height': '20px',
        'width': '0%'
    });
    progressDiv.attr("id", "img-dropzone-speed" + fileIndex);

    var fileDiv = $("<div></div>");
    fileDiv.addClass("img-dropzone-info");
    fileDiv.css({
        'border' : 'thin solid black',
        'margin' : '5px'
    });
    fileDiv.append(infoDiv);                
    fileDiv.append(progressDiv);                

    $("#img-dropzone-info").after(fileDiv);
};
$.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
    $("#img-dropzone-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
    $("#img-dropzone-speed" + fileIndex).css({
        'width': '100%',
        'background-color': 'green' 
    });
};
$.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, 
newProgress){
    $("#img-dropzone-speed" + fileIndex).css("width", newProgress + "%");
};
$.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
    var dive = $("#img-dropzone-speed" + fileIndex);

    dive.html( getReadableSpeedString(KBperSecond) );
};
$.fn.dropzone.newFilesDropped = function(){
    $(".img-dropzone-info").remove();
};
$("#img-dropzone").dropzone({
    url : '<?=site_url()?>/front/business/upload_file/<?=$empresa->id?>',
    printLogs : true,
    uploadRateRefreshTime : 500,
    numConcurrentUploads : 2
});
});
</script>

Thanks in advance,
  Sergio Ruiz

Original comment by sr...@brandeastudio.com on 27 Jun 2011 at 9:00

GoogleCodeExporter commented 9 years ago 
Hi.
You can see it in working state at http://onepo.st/ ( needs to logged in within 
FaceBook ) Drop zones are title input and message input (though there is no 
progress bars because i do not need them there ).  

My DropZones definitions are 
$(document).ready(function(){
    var post_title = document.getElementById('post_title') !== null;
    var upload_photo_drop = document.getElementById('upload_photo_drop') !== null;
    if(post_title){
        $('#post_title').dropzone(
            {
                url : base_url+'/photos/dnd_upload/title', // upload url
                numConcurrentUploads : 1, // one concurrent upload
                printLogs : true, // print the logs to the console object (firebug) if available
                uploadRateRefreshTime : 500 // calculate and inform my event listener of a new upload speed every 500 ms

            }
        );
    }
    if(upload_photo_drop){
        $('#upload_photo_drop').dropzone(
            {
                url : base_url+'/photos/dnd_upload/message', // upload url
                numConcurrentUploads : 1, // one concurrent upload
                printLogs : true, // print the logs to the console object (firebug) if available
                uploadRateRefreshTime : 500 // calculate and inform my event listener of a new upload speed every 500 ms

            }
        );
    }
});

Also i think that your problem is that you have two instances for each 
function, that is not correct, second will override first one, just try to pass 
to your functions id of the dropzone as additional param ( it is cur_id in my 
example, it is present after drop() function fires so after that point you may 
path it to any function ) and based on it do what is needed in one function.

Original comment by Sauronfr...@gmail.com on 27 Jun 2011 at 2:59

GoogleCodeExporter commented 9 years ago 
Hi Sau,

  I supposed the problem was around the redefinition of functions, for the aditional actions on 'dropzones'. I think I've understood it better, now it's time to prove it on code ;D

Thanks a lot for your help!!! (I'll post my solution, if I make it works xD)
  Sergio Ruiz

Original comment by sr...@brandeastudio.com on 27 Jun 2011 at 3:29

GoogleCodeExporter commented 9 years ago 
Hi!

  Here is the code to use multiple dropzones, on the same page  ;D

  I just left the definition of progress bar clean's function for future attempts, because I have found that 'drag & drop' doesn't works in IE (&$%@@!!!). Unfortunately, the world still depends on IE and my implementation have to consider that.

  Somebody have found the way to make it work on IE? Even using an input file, plus the dropzone, it's a enough elegant solution for me.

  Well, here you have the attached files: the 'dnd-file-upload' js modified and the definitions I've used on html/php. I hope it will be usefull in the future for someone! ;D

Thanks a lot Sauron for your help!!!
  Sergio Ruiz

Original comment by sr...@brandeastudio.com on 29 Jun 2011 at 12:55

Attachments:

GoogleCodeExporter commented 9 years ago 
very very unlimited thanks for multiple dropzones.

Original comment by imtiazma...@gmail.com on 23 Sep 2011 at 9:07