Menu
Starting from blueimp's minimal/basic setup plugin, I managed to work out the following multi-dropzone uploader. The script works fine: it correctly detects the dropzone where the mouse drops the file, it correctly uploads the file to the server and it correctly send to the server the right ID to identify the dropzone chosen. At the end of the upload the script loads from the server the thumbnail and it displays it as a preview in the corresponding dropzone (It loads back the preview for two reasons: because I did not understand how to use the plugin template (!) and because in this way the script has time to display the progress bar).
And here comes the problem. Everything works apart the progress bar.
I would like to:
I'm not able to make this progress bar work at all. Once I managed to see the bar working but it worked only the first time the user dropped the image into the dropzone. If I dropped a new image into the same drop zone the bar was not displayed more.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<style>
.bar { background: blue;}
.progress { height: 18px; background: red;}
.box {
background: palegreen;
width: 200px;
height: 200px;
line-height: 50px;
text-align: center;
font-weight: bold;
margin: 40px;
}
.boxhover {
background: lawngreen;
}
</style>
</head>
<body>
<div id="id_1" class="box">
<div class="progress"></div>
<div class="image"></div>
</div>
<div id="id_2" class="box">
<div class="progress"></div>
<div class="image"></div>
</div>
<div id="id_3" class="box">
<div class="progress"></div>
<div class="image"></div>
</div>
<script>
$(function () {
$('.box').each(function(){
var $this = $(this);
$this.fileupload({
dataType: 'json',
url: 'server/php/index.php',
dropZone: $this,
formData: {'id': $this.attr('id')},
dragover: function (e, data) {
$this.addClass( 'boxhover' );
},
always: function (e, data) {
$this.removeClass( 'boxhover' );
},
start: function (e, data) {
$('.progress', '#'+ $this.attr('id')).addClass( 'bar' );
},
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .bar').css( 'width', progress + '%');
},
done: function (e, data) {
//$('<p/>').text($this.attr('id')).appendTo(document.body);
$('.progress', '#'+ $this.attr('id')).fadeOut("slow", function(){
$('.progress', '#'+ $this.attr('id')).removeClass( 'bar' );
});
$.each(data.files, function (index, file) {
//console.log(file, file.thumbnail_url);
//console.log('Added file: ' + file.name);
$('.image', '#'+ $this.attr('id')).html('<img src="server/php/files/thumbnail/' + file.name + '">');
});
}
});
});
$('.box').on('dragleave', function(e){
$(this).removeClass( 'boxhover' );
});
});
</script>
</body>
</html>
The PHP file is the blueimp's one found here.
996
SOLVED.
I worked out by myself. I'm pretty sure this is not the most elegant way to do it but it works. Here's the full working code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<style>
.bar {
position: absolute;
height: 18px;
background: blue;
width: 0%;
top: 50%;
}
.box {
position: relative;
background: palegreen;
width: 200px;
min-height: 200px;
margin: 40px;
}
.boxhover {
background: lawngreen;
}
.image { text-align: center; }
</style>
</head>
<body>
<div id="id_1" class="box">
<div class="progress">
</div>
<div class="image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis posuere sapien dictum rhoncus. Pellentesque aliquet posuere dui, vel tristique arcu auctor sit amet. Phasellus eget justo consequat, tincidunt arcu id, mattis felis. Duis interdum lectus consectetur nisi ullamcorper, id.</p>
</div>
<div id="id_2" class="box">
<div class="progress">
</div>
<div class="image"></div>
</div>
<div id="id_3" class="box">
<div class="progress">
</div>
<div class="image"></div>
</div>
<script>
$(function () {
$('.box').each(function(){
var $this = $(this);
$this.fileupload({
dataType: 'json',
url: 'server/php/index.php',
dropZone: $this,
formData: {'id': $this.attr('id')},
dragover: function (e, data) {
$this.addClass( 'boxhover' );
$('#'+ $this.attr('id') + ' .progress').html('<div class="bar"></div>');
},
always: function (e, data) {
$this.removeClass( 'boxhover' );
},
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#'+ $this.attr('id') + ' .progress .bar').css( 'width', progress + '%');
},
done: function (e, data) {
$('#'+ $this.attr('id') + ' .progress .bar').fadeOut("slow");
$('#'+ $this.attr('id') + ' .progress').html('');
$.each(data.files, function (index, file) {
$('#'+ $this.attr('id') + ' .image').html('<img src="server/php/files/thumbnail/' + file.name + '">');
});
}
});
});
$('.box').on('dragleave', function(e){
$(this).removeClass( 'boxhover' );
});
});
</script>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With