Menu
I have looked at many scripts for uploading images to the server with AJAX with drag and drop. The scripts I found are not jQuery, are quite large and don't do exactly what I want.
In the future it should upload an image with jQuery, AJAX and PHP.
My question
In many of the example I've looked at e.dataTransfer.files work. In my case it don't. Do I need to bind it somehow?
I want jQuery as much as possible.
JsFiddle
Play around as much as you like...
http://jsfiddle.net/AMjEz/
Code
<html>
<head>
<style type="text/css">
#dropzone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#dropzone').on({
dragenter: function(e) {
$(this).css('background-color', 'lightBlue');
},
dragleave: function(e) {
$(this).css('background-color', 'white');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
console.log(e.dataTransfer.files);
}
});
});
</script>
</head>
<body>
<div id="dropzone">
Drop files here
</div>
</body>
</html>
788
HTML Drag and Drop (DnD) is a feature of HTML5. It is a powerful user interface concept which is used to copy, reorder and delete items with the help of mouse. You can hold the mouse button down over an element and drag it to another location. If you want to drop the element there, just release the mouse button.
Drag and drop file uploads happen when you drag one or more files from an underlying platform's file manager and drop them onto a web page for upload. A preview of the image indicates the upload has begun. Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of code.
The image link is inserted in the HTML page using <img> src attribute. Whenever we are going to insert the image, we have to enable draggable=”true”. Also, enable ondragstart=”drag(event)” so that this image can be draggable along with setting the image width and height.
I wrote an extension for my application.
// Custom file drop extension
$.fn.extend({
filedrop: function (options) {
var defaults = {
callback : null
}
options = $.extend(defaults, options)
return this.each(function() {
var files = []
var $this = $(this)
// Stop default browser actions
$this.bind('dragover dragleave', function(event) {
event.stopPropagation()
event.preventDefault()
})
// Catch drop event
$this.bind('drop', function(event) {
// Stop default browser actions
event.stopPropagation()
event.preventDefault()
// Get all files that are dropped
files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files
// Convert uploaded file to data URL and pass trought callback
if(options.callback) {
var reader = new FileReader()
reader.onload = function(event) {
options.callback(event.target.result)
}
reader.readAsDataURL(files[0])
}
return false
})
})
}
})
And we can use it like this
// Event listener filedropper
$('.dropbox').filedrop({
callback : function(fileEncryptedData) {
// a callback?
}
})
If you want to drop multiple files, you should write a for loop around the FileReader like so:
...
if(options.callback) {
for (i = 0; i < files.length; i++) {
var reader = new FileReader()
reader.onload = function(event) {
options.callback(event.target.result)
}
reader.readAsDataURL(files[0])
}
}
...
JSFiddle: http://jsfiddle.net/646xe1m2/
188
I found out that it's a bug in jQuery.1.8. This row should be before $('.dropzone').
$.event.props.push('dataTransfer');
Final HTML code
<html>
<head>
<style type="text/css">
.dropzone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var filename = '';
var image_data = '';
$.event.props.push('dataTransfer');
$('.dropzone').on({
dragenter: function(e) {
$(this).css('background-color', 'lightBlue');
},
dragleave: function(e) {
$(this).css('background-color', 'white');
},
drop: function(e) {
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0];
var fileReader = new FileReader();
var this_obj = $(this);
fileReader.onload = (function(file) {
return function(event) {
// Preview
filename = file.name;
image_data = event.target.result;
$(this_obj).next().html('<a href="#" class="upload-file">Upload file</a>');
$(this_obj).html('<img style="max-width: 200px; max-height: 200px;" src="' + event.target.result + '">');
};
})(file);
fileReader.readAsDataURL(file);
}
});
// Upload file
$(".upload-file").live("click", function(e){
e.preventDefault();
var this_obj = $(this);
var image_data = $(this_obj).parent().prev().find('img').attr('src');
$.post(
'send_image.php',
{
data: image_data,
filename: filename
}, function(response){
$(this_obj).parent().prev().html(response);
$(this_obj).remove();
}
);
//console.log('ok');
});
});
</script>
</head>
<body>
<!-- Multiple dropzones -->
<div class="dropzone">
Drop files here
</div>
<div id="meta"></div>
<div class="dropzone">
Drop files here
</div>
<div id="meta"></div>
</body>
</html>
PHP code in send_image.php
<?php
$raw_data = $_POST['data'];
file_put_contents(
'image123.jpg',
base64_decode(
str_replace('data:image/jpeg;base64,', '', $raw_data)
)
);
?>
<br>
<?php echo '<img style="max-width: 200px; max-height: 200px;" src="' . 'image123.jpg' . '">'; ?>
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