Drag Drop Files into Standard HTML File Input

drag drop files into standard html file input

The following works in Chrome and FF, but i've yet to find a solution that covers IE10+ as well:

// dragover and dragenter events need to have 'preventDefault' called// in order for the 'drop' event to register. // See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargetsdropContainer.ondragover = dropContainer.ondragenter = function(evt) {  evt.preventDefault();};
dropContainer.ondrop = function(evt) {  // pretty simple -- but not for IE :(  fileInput.files = evt.dataTransfer.files;
  // If you want to use some of the dropped files  const dT = new DataTransfer();  dT.items.add(evt.dataTransfer.files[0]);  dT.items.add(evt.dataTransfer.files[3]);  fileInput.files = dT.files;
  evt.preventDefault();};

<!DOCTYPE html><html><body><div id="dropContainer" style="border:1px solid black;height:100px;">   Drop Here</div>  Should update here:  <input type="file" id="fileInput" /></body></html>

Drag and drop input file

just drag your image into a input. if you need some information how to work with the result (link / title / src or something like that) of your droped image just visit this site.

function handleFileSelect(evt) {    evt.stopPropagation();    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    // files is a FileList of File objects. List some properties.    var output = [];    for (var i = 0, f; f = files[i]; i++) {      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',                  f.size, ' bytes, last modified: ',                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',                  '</li>');    }    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';  }
  function handleDragOver(evt) {    evt.stopPropagation();    evt.preventDefault();    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.  }
  // Setup the dnd listeners.  var dropZone = document.getElementById('drop_zone');  dropZone.addEventListener('dragover', handleDragOver, false);  dropZone.addEventListener('drop', handleFileSelect, false);

.example {    padding: 10px;    border: 1px solid #ccc;}
#drop_zone {    border: 2px dashed #bbb;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    padding: 25px;    text-align: center;    font: 20pt bold 'Vollkorn';    color: #bbb;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example">    <div id="drop_zone">Drop files here</div>    <output id="file_list2"></output>  </div>      <output id="list"></output>  <br>  <br>  <br>
<p> Easy solution </p>  <div class="intro-text">    <input class="" type="file" id="file-input" accept="image/*" capture="" name="files[]" multiple="">  </div>

Upload Image with input file button or drag and drop the file

NB: Note that There is no cross-browser way to upload dragged & dropped files without Ajax. Also note (and this could be the reason for the limitation) the security implications of trying to assign a value to a file upload input field: if it were possible to programmatically assign values thus, imagine something like:

$("input[type=file]").val("passwords.txt");

So we have to use AJAX. That said, you just have to create a new FormData instance and append to it the dataTransfer.files property from your drop event:

    function drag_drop(event) {
        event.preventDefault();
        $.each(dataTransfer.files, function(i, file) {
            uploadData.append( "userfile", file);
        });
    }

    var $form = document.querySelector('form'),
    ajaxData = new FormData($form);

    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: ajaxData,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false // Important for file uploads
    });

If your reason for preferring manual uploads is to have all your files uploaded alongside your form when submitted, consider creating a hidden input field and setting its value to the location of the uploaded files when AJAX successfully returns.

You might also want to set the multiple attribute in your file input field, given from your code, I see you processing several files.

Full tutorial

HTML Input type file to support only drag and drop but restrict file browse and upload

Maybe something like this would work ((click)="$event.preventDefault()"):

<input type="file" class="someCssClass" (drop)="onImageDrop($event)" 
   (click)="$event.preventDefault()" required>

If you want to make it a bit better for the user, make a function that shows an error/explanation at the same time it is cancelling the event.

Drag Drop Files into Standard HTML File Input