CODEWITHSUNDEEP
javascriptjqueryajaxjquery-file-upload
Dog
Dog

Reputation: 663

blueimp jquery upload : drag and drop submitting all file fields

i'm having a small problem implementing Blueimp's Jquery Upload.

i have a form which includes several different file fields for uploading.

    <div id="file1">
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=1">         
    <div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=1">Drop files here</div>
    <div class="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <input type="text" name="pic1"  id="pic1" value="">
</div>
<div id="file2">
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=2">         
    <div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=2">Drop files here</div>
    <div class="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <input type="text" name="pic2"  id="pic2" value="">
</div>

<script>
$(function () {
$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            var fileName = file.name;
            var pic = file.pic;
           $('#pic'+pic).val(fileName);
         });
    },
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('.progress').show();
    $('.progress .bar').css(
        'width',
        progress + '%'
    );

}
});
});
</script>

when a user uses the browse button to choose a file it submits it correctly to the upload file handler script jQueryFileUpload.php, including the reference number of the file field...

once the handler script does its stuff with image manipulation it passes the file name and the relevant file number back to the javascript function and the file name is added to a text field... each file upload has its own text field (pic1, pic2 etc).

this all works great.

my problem is that if the user drags and drops a file onto the dropzone, ALL of the file fields get submitted with the dropped file.

if i use the browse button i see in firebug a single ajax call to the upload handler page. if i drag and drop i see multiple calls:

jQueryFileUpload.php?pic=1
jQueryFileUpload.php?pic=2

and all the text fileds get filled in with file name.

how can i specify which dropzone to trigger? or, worst case, how can i disable drag and drop entirely?

for the latter i tried adding 

$(document).bind('drop dragover', function (e) {
e.preventDefault();
});

as per the documentation, but this didn't seem to have any effect.. dropped files were still uploaded...

Upvotes: 1

Views: 3192

Answers (1)

Stiliyan
Stiliyan

Reputation: 1174

To disable the drag and drop entirely, set the dropZone option to an empty jQuery collection in your fileupload() call:

$('.fileupload').fileupload({
    dropZone: $(),
    ...
});

To create multiple dropzones, each with their own drag and drop context, iterate over the .fileupload inputs, and call fileupload() on each one, passing it as its own dropzone:

$('.fileupload').each(function () {
    $(this).fileupload({
        dropZone: $(this)
    });
});

Upvotes: 5

Related Questions