We help IT Professionals succeed at work.

html5 drag and drop - how to upload the file with rest of form

Mark Steggles
on
Hello,

I have html5 drag and drop working so that the user can drag an image from the computer onto the web page and the image gets saved in a variable.

I want to then upload that image with the rest of the form.. can I attach the image to input type file? Or how can I do this?

Thanks
Comment
Watch Question

Top Expert 2013

Commented:
Need to see the code.



Cd&

Mark StegglesWeb Developer
Top Expert 2006

Author

Commented:
html:

<div id="create_hangout_photo">
      	  <a class="button orange" id="create_hangout_add_photo" href="#">Select picture</a>          <input type="file" name="hangout[photo]" id="hangout_photo">
      	  <p style="display: none;"><span id="create_hangout_photo_entry"></span> (<a id="cancel_photo" href="#">cancel</a>)</p>
      	</div>

Open in new window


javascript:

$(function() {
  // drag and drop file for photo
  var dropbox;
  
  dropbox = document.getElementById("create_hangout_photo");
  dropbox.addEventListener("dragenter", dragenter, false);
  dropbox.addEventListener("dragover", dragover, false);
  dropbox.addEventListener("drop", drop, false);
  
  function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).addClass('hover');
  }
  
  function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).addClass('hover');
  }
  
  function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).removeClass('hover');
  
    var dt = e.dataTransfer;
    var files = dt.files;
  
    handleFiles(files);
  }
});
function handleFiles(files) {
  $('#create_hangout_photo_entry').text(files[0].name);
  $('#create_hangout_add_photo, #hangout_photo').hide();
  $('#create_hangout_photo p').show();
  $('#hangout_photo').val('');
  alert($('#hangout_photo').val());
  
  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }
  
    var reader = new FileReader();
  
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', theFile.name, '"/>'].join('');
        document.getElementById('x_selected-venue-wrapper').insertBefore(span, null);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
  
}

Open in new window



css:

#create_hangout_photo {
  background-color: #eee;
  border-radius: 5px;
  height: 30px;
  margin-bottom: 15px;
  padding: 10px;
  position: relative;
}
#create_hangout_photo.hover {
  background-color: #ddd;
}
#create_hangout_photo p {
  display: block;
  line-height: 30px;
  text-align: center;
}
#create_hangout_add_photo {
	padding-left:43px;
	position:absolute;
	left:204px;
	top:10px;
}
#create_hangout_add_photo:before {
	background:url(/graphics/sprite.png) no-repeat -436px -511px;
	content:'';
	height:14px;
	position:absolute;
	left:12px;
	top:6px;
	width:19px;
}
#hangout_photo {
	cursor:pointer;
	font-size:15px;
	height: 30px;
	opacity:0;
	position:absolute;
	left:204px;
	top:10px;
	width: 150px;
}

Open in new window

Top Expert 2013

Commented:
I don't see a form.  All I see is an input.  You have to have a form to upload a file.  Even though you dragged it on the page, the browser is still going to get it from the hd for upload. You can't upload a variable as a file. It actually has to be a file.

The upload has nothing to do with the drag and drop except you can supply the url.


Cd&
Mark StegglesWeb Developer
Top Expert 2006

Author

Commented:
I do have a form on the page.. I just gave you what I thought was the relevant code. The input type file is there if the user doesnt want to drag and drop.

So how can I upload the file that has been dropped onto the form? Can I set the val of the input type form to the uploaded image?
Top Expert 2013

Commented:
You can put the url in the value of the input, but I think the user is still going to be prompted to supply or confirm the name of the file.  Think about it from a security point of view.  If you could just stick a filename in without user confirmation, web sites could steal files from users.  I don't think drag and drop is going to change the security model, because the drag and drop could be simulated with scripting.


Cd&
Web Developer
Top Expert 2006
Commented:
Turns out you can upload a dropped photo via ajax using xhr2 http://www.sitepoint.com/html5-ajax-file-upload/

Our solution was to just let the user drop photo onto a large file input with its opacity set to 0
Mark StegglesWeb Developer
Top Expert 2006

Author

Commented:
Other answers were not satisfactory