Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Drag and drop js
jQuery(document).ready(function() {
var $ = jQuery;
Execute revealDropzone() every 1000 milliseconds
Identify all of the input fields - once all of them have been populated,
reveal the drop zone
If any of the text inputs becomes empty again, hide the drop zone again
setInterval(revealDropzone, 1000);
function revealDropzone(){
var inputValues = $('#image_form input[type=text]').map(function() {
return $(this).val();
for(var i=0;i<inputValues.length;i++){
if(inputValues[i] === ""){
// Hide the dropzone again if one of the fields becomes empty
$("#dropzone").css("visibility", "hidden");
return false;
$("#dropzone").css("visibility", "visible");
return true;
// The list of images we'll be creating via the drag and drop:
var $list = $('#images_list');
// Reference to the form
var $form = $('#_form');
// Utility functions:
// For adding a dropped file to the list:
function addItemToList(file) {
var name =;
// "pending" - The image name will be greyed out until the upload returns success
var $item = $('<li class="pending newitem" id="' + name + '">' + name + '</li>');
// The remove button will be disabled until the upload returns success
var $removeitem = $('<input id="remove_' + name + '" type="button" value="Remove" class="btn btn-mini btn-danger removebutton" disabled>');
// ^^ btn, btn-mini, and btn-danger are Bootstrap classes
// This click event is set so that the remove button executes removeItemFromList()
$'removeElement', $removeitem);
$'name', name)
$'file', file);
return $item;
// For removing a dropped file from the list:
function removeItemFromList(event) {
element = document.getElementById($([0].id.replace("remove_", "image_"));
// For creating hidden form elements based on the response that's
// returned when the images are posted:
function addFormElements(response){
// Split the response string ...
var mySplitResult = response.split(";");
for(i = 0; i < mySplitResult.length; i++){
// And create an input for each image
var input = document.createElement('INPUT');
input.type = "hidden";
// Input id and name are the image name prefixed with 'image_' = "image_"+mySplitResult[i]; = "image_"+mySplitResult[i];
input.value = mySplitResult[i];
// Each new input is appended to the form named 'image_form'
// This function is triggered when an event takes place in the dropzone area
var dropHandler = function(e) {
// Block default behavior on the drop zone element:
// Capture files that have been dragged into the drop zone
var files = e.originalEvent.dataTransfer.files;
// Create the formData object that will be submitted via XMLHttpRequest
var formData = new FormData();
var fileElements = [];
for (var i = 0; i < files.length; i++) {
if($list[0].innerText.indexOf(files[i].name) === -1){
// Append each file to the form, to an element named 'file':
formData.append('file', files[i]);
// Create for each file a form element to be displayed on the page:
// Using Django 1.3 - a form post through XMLHttpRequest still requires this token
var csrf_token = $('#csrfmiddlewaretoken').val()
formData.append('csrfmiddlewaretoken', csrf_token)
// Create an instance of XMLHttpRequest:
var xhr = new XMLHttpRequest();
// This posts back to the multi_image_upload_post() method we created in the (we haven't looked at that yet)
var post_url = "/admin/images/image/image_upload/";'POST', post_url);
xhr.onload = function () {
var i;
var text = this.responseText;
// If the image post was successful ...
if (xhr.status === 200) {
// ... add a hidden form element for each image so that the image names can be submitted with the main form post
for (i = 0; i < fileElements.length; i++) {
// The image is no longer pending upload, so remove that 'pending' class:
// Enable the "Remove" button for each image
// Images have been posted - the submit button can be enabled now
} else {
You should implement some better error handling than this,
but for now let's just apply a different class
to these elements so that the user knows something went wrong.
for (i = 0; i < fileElements.length; i++) {
// Upload failed, the image name appears bold red
// Enable the "Remove" button for each image
// console.log('Something went wrong:' + xhr.status + xhr.responseText);
// Here's where the form, with images attached, is actually posted:
$('.dropzone').bind("dragenter", function(e) {
}).bind("dragleave", function(e) {
}).bind("dragover", function(e) {
}).bind("drop", dropHandler);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment