drag drop files into standard html file input

Question

These days we can drag  amp  drop files into a special container and upload them with XHR 2  Many at a time  With live progress bars etc  Very cool stuff  Example here   But sometimes we don t want that much coolness  What I d like is to drag  amp  drop files -- many at a time -- into a standard HTML file input   lt input type file multiple gt    Is that possible  Is there some way to  fill  the file input with the right filenames     from the file drop   Full filepaths aren t available for file system security reasons    Why  Because I d like to submit a normal form  For all browsers and all devices  The drag  amp  drop is just progressive enhancement to enhance  amp  simplify UX  The standard form with standard file input    multiple attribute  will be there  I d like to add the HTML5 enhancement   edit I know in some browsers you can sometimes  almost always  drop files into the file input itself  I know Chrome usually does this  but sometimes it fails and then loads the file in the current page  a big fail if you re filling out a form   I want to fool-  amp  browserproof it

User · Answer

For a CSS only solution   lt div class  quot file-area quot  gt       lt input type  quot file quot  gt       lt div class  quot file-dummy quot  gt           lt span class  quot default quot  gt Click to select a file  or drag it here lt  span gt           lt span class  quot success quot  gt Great  your file is selected lt  span gt       lt  div gt   lt  div gt    file-area       width  100       position  relative      font-size  18px     file-area input type file        position  absolute      width  100       height  100       top  0      left  0      right  0      bottom  0      opacity  0      cursor  pointer     file-area  file-dummy       width  100       padding  50px 30px      border  2px dashed  ccc      background-color   fff      text-align  center      transition  background 0 3s ease-in-out     file-area  file-dummy  success       display  none     file-area hover  file-dummy       border  2px dashed  1abc9c     file-area input type file  valid    file-dummy       border-color   1abc9c     file-area input type file  valid    file-dummy  success       display  inline-block     file-area input type file  valid    file-dummy  default       display  none     Adapted from https   codepen io Scribblerockerz pen qdWzJw

User · Answer

What you could do  is display a file-input and overlay it with your transparent drop-area  being careful to use a name like file 1    Be sure to have the enctype  multipart form-data  inside your FORM tag    Then have the drop-area handle the extra files by dynamically creating more file inputs for files 2  number of files  be sure to use the same base name  populating the value-attribute appropriately   Lastly  front-end  submit the form     All that s required to handle this method is to alter your procedure to handle an array of files

User · Answer

This is an improvement  bugfix  and modification of the example that William Entriken gave here  There were some issues with it  For example the normal button from  lt input type  quot file quot    gt  didn t do anything  in case the user wanted to upload the file that way   Notice  I am making a webapp that only I use  so this is only tested  and refined  for Firefox  I am sure though that this code is of value even if you develop for the crossbrowser situation   x000D   x000D  function readFile e      var files    if  e target files        files e target files     else       files e dataTransfer files       if  files length  0        alert  What you dropped is not a file         return        var file files 0     document getElementById  fileDragName   value   file name   document getElementById  fileDragSize   value   file size   document getElementById  fileDragType   value   file type   reader   new FileReader      reader onload   function e        document getElementById  fileDragData   value   e target result        reader readAsDataURL file     function getTheFile e      e target style borderColor   ccc     readFile e     x000D   lt input type  file  onchange  readFile event   gt   lt input id  fileDragName  gt   lt input id  fileDragSize  gt   lt input id  fileDragType  gt   lt input id  fileDragData  gt   lt div style  width 200px  height 200px  border  10px dashed  ccc       ondragover  this style borderColor   0c0  return false               ondragleave  this style borderColor   ccc               ondrop  getTheFile event   return false           gt  lt  div gt  x000D   x000D   x000D

User · Answer

Easy and simple  You don t need create a new FormData or do an Ajax to send image  You can put dragged files in your input field   dropzone ondrop   function  e        e preventDefault        input files   e dataTransfer files      x000D   x000D  var  dropzone   document querySelector   dropzone    var input   document getElementById  file-upload      dropzone ondragover   function  e       e preventDefault       this classList add  dragover        dropzone ondragleave   function  e         e preventDefault        this classList remove  dragover        dropzone ondrop   function  e        e preventDefault        this classList remove  dragover        input files   e dataTransfer files    x000D   dropzone     padding  10px    border  1px dashed black     dropzone dragover     background-color  rgba 0  0  0   3     x000D   lt div class  dropzone  gt Drop here lt  div gt   lt input type  file  id  file-upload  style  display none   gt  x000D   x000D   x000D

User · Answer

x000D   x000D    ----------App js---------------------   x000D    document  ready function     x000D      var holder   document getElementById  holder    x000D      holder ondragover   function      this className    hover   return false     x000D      holder ondrop   function  e    x000D        this className    hidden   x000D        e preventDefault    x000D        var file   e dataTransfer files 0   x000D        var reader   new FileReader    x000D        reader onload   function  event    x000D            document getElementById  image droped   className  visible  x000D                image droped   attr  src   event target result   x000D          x000D        reader readAsDataURL file   x000D         x000D      x000D   holder default   x000D      width 500px   x000D      height 150px   x000D      border  3px dashed  ccc  x000D    x000D   x000D   holder hover    x000D      width 400px   x000D      height 150px   x000D      border  3px dashed  0c0  important   x000D    x000D   x000D   hidden   x000D      visibility  hidden  x000D    x000D   x000D   visible   x000D      visibility  visible  x000D    x000D   lt  DOCTYPE html gt  x000D   x000D   lt html gt  x000D       lt head gt  x000D           lt title gt  HTML 5  lt  title gt  x000D           lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 6 4 jquery js  gt  lt  script gt  x000D       lt  head gt  x000D       lt body gt  x000D         lt form method  post  action  http   example com   gt  x000D           lt div id  holder  style    id  holder  class  holder default  gt  x000D             lt img src    id  image droped  width  200  style  border  3px dashed  7A97FC   class   hidden   gt  x000D           lt  div gt  x000D         lt  form gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is what I came out with    Using Jquery and Html  This will add it to the insert files     x000D   x000D  var dropzone       dropzone   x000D   x000D   x000D  dropzone on  drag dragstart dragend dragover dragenter dragleave drop   function e    x000D      e preventDefault    x000D      e stopPropagation    x000D       x000D   x000D  dropzone on  dragover dragenter   function     x000D        this  addClass  is-dragover    x000D       x000D  dropzone on  dragleave dragend drop   function     x000D        this  removeClass  is-dragover    x000D         x000D     x000D  dropzone on  drop  function e    x000D   var files   e originalEvent dataTransfer files  x000D      Now select your file upload field  x000D         input field file   prop  files  files  x000D        x000D  input   margin  15px 10px  important   x000D   x000D   dropzone   x000D   padding  50px  x000D   border  2px dashed  060  x000D    x000D   x000D   dropzone is-dragover   x000D    background-color   e6ecef  x000D    x000D   x000D   dragover   x000D   bg-color  red  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   lt div class    draggable  true  style  padding  20px  gt  x000D    lt div id  dropzone  class  dropzone  gt  x000D    Drop Your File Here x000D    lt  div gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

For anyone who s looking to do this in 2018  I ve got a much better and simpler solution then all the old stuff posted here  You can make a nice looking drag  amp  drop box with just vanilla HTML  JavaScript and CSS    Only works in Chrome so far   Let s start with the HTML    lt div gt   lt input type  file  name  file  id  file  class  file  gt   lt span id  value  gt  lt  span gt   lt  div gt    Then we ll get to the styling        file           width  400px          height  50px          background   171717          padding  4px          border  1px dashed  333          position  relative          cursor  pointer              file  before           content              position  absolute          background   171717          font-size  20px          top  50           left  50           transform  translate -50   -50            width  100           height  100               file  after           content   Drag  amp  Drop           position  absolute          color   808080          font-size  20px          top  50           left  50           transform  translate -50   -50            After you ve done this it already looks fine  But I imagine you d like to see what file you actaully uploaded  so we re going to do some JavaScript  Remember that pfp-value span  That s where we ll print out the file name   let file   document getElementById  file    file addEventListener  change   function         if file  amp  amp  file value            let val   file files 0  name          document getElementById  value   innerHTML    Selected    val              And that s it

User · Answer

Few years later  I ve built this library to do drop files into any HTML element   You can use it like  const Droppable   require  droppable     const droppable   new Droppable       element  document querySelector   my-droppable-element       droppable onFilesDropped  files    gt        console log  Files were dropped    files           Clean up when you re done  droppable destroy

User · Answer

I made a solution for this    x000D   x000D    function      x000D      var dropZoneId    drop-zone   x000D      var buttonId    clickHere   x000D      var mouseOverClass    mouse-over   x000D   x000D      var dropZone           dropZoneId   x000D      var ooleft   dropZone offset   left  x000D      var ooright   dropZone outerWidth     ooleft  x000D      var ootop   dropZone offset   top  x000D      var oobottom   dropZone outerHeight     ootop  x000D      var inputFile   dropZone find  input    x000D      document getElementById dropZoneId  addEventListener  dragover   function  e    x000D          e preventDefault    x000D          e stopPropagation    x000D          dropZone addClass mouseOverClass   x000D          var x   e pageX  x000D          var y   e pageY  x000D   x000D          if    x  lt  ooleft    x  gt  ooright    y  lt  ootop    y  gt  oobottom     x000D              inputFile offset   top  y - 15  left  x - 100     x000D            else   x000D              inputFile offset   top  -400  left  -400     x000D            x000D   x000D         true   x000D   x000D      if  buttonId          x000D          var clickZone           buttonId   x000D   x000D          var oleft   clickZone offset   left  x000D          var oright   clickZone outerWidth     oleft  x000D          var otop   clickZone offset   top  x000D          var obottom   clickZone outerHeight     otop  x000D   x000D                  buttonId  mousemove function  e    x000D              var x   e pageX  x000D              var y   e pageY  x000D              if    x  lt  oleft    x  gt  oright    y  lt  otop    y  gt  obottom     x000D                  inputFile offset   top  y - 15  left  x - 160     x000D                else   x000D                  inputFile offset   top  -400  left  -400     x000D                x000D              x000D        x000D   x000D      document getElementById dropZoneId  addEventListener  drop   function  e    x000D                  dropZoneId  removeClass mouseOverClass   x000D         true   x000D   x000D     x000D   drop-zone   x000D        Sort of important   x000D      width  300px  x000D        Sort of important   x000D      height  200px  x000D      position absolute  x000D      left 50   x000D      top 100px  x000D      margin-left -150px  x000D      border  2px dashed rgba 0 0 0  3   x000D      border-radius  20px  x000D      font-family  Arial  x000D      text-align  center  x000D      position  relative  x000D      line-height  180px  x000D      font-size  20px  x000D      color  rgba 0 0 0  3   x000D    x000D   x000D       drop-zone input   x000D            Important   x000D          position  absolute  x000D            Important   x000D          cursor  pointer  x000D          left  0px  x000D          top  0px  x000D            Important This is only comment out for demonstration purposes  x000D          opacity 0     x000D        x000D   x000D        Important   x000D       drop-zone mouse-over   x000D          border  2px dashed rgba 0 0 0  5   x000D          color  rgba 0 0 0  5   x000D        x000D   x000D   x000D    If you dont want the button   x000D   clickHere   x000D      position  absolute  x000D      cursor  pointer  x000D      left  50   x000D      top  50   x000D      margin-left  -50px  x000D      margin-top  20px  x000D      line-height  26px  x000D      color  white  x000D      font-size  12px  x000D      width  100px  x000D      height  26px  x000D      border-radius  4px  x000D      background-color   3b85c3  x000D   x000D    x000D   x000D       clickHere hover   x000D          background-color   4499DD  x000D   x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  drop-zone  gt  x000D      Drop files here    x000D       lt div id  clickHere  gt  x000D          or click here   x000D           lt input type  file  name  file  id  file    gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The Drag and Drop functionality for this method only works with Chrome  Firefox and Safari   Don t know if it works with IE10   but for other browsers  the  Or click here  button works fine   The input field simply follow your mouse when dragging a file over an area  and I ve added a button as well    Uncomment opacity 0  the file input is only visible so you can see what s going on

User · Answer

Awesome work by  BjarkeCK  I made some modifications to his work  to use it as method in jquery     fn dropZone   function       var buttonId    clickHere     var mouseOverClass    mouse-over      var dropZone   this 0     var  dropZone     dropZone     var ooleft    dropZone offset   left    var ooright    dropZone outerWidth     ooleft    var ootop    dropZone offset   top    var oobottom    dropZone outerHeight     ootop    var inputFile    dropZone find  input type  file        dropZone addEventListener  dragleave   function         this classList remove mouseOverClass           dropZone addEventListener  dragover   function e        console dir e       e preventDefault        e stopPropagation        this classList add mouseOverClass       var x   e pageX      var y   e pageY       if    x  lt  ooleft    x  gt  ooright    y  lt  ootop    y  gt  oobottom           inputFile offset           top  y - 15          left  x - 100                 else         inputFile offset           top  -400          left  -400                       true     dropZone addEventListener  drop   function e        this classList remove mouseOverClass        true          drop-zone   dropZone      Working Fiddle

User · Answer

This is the  DTHML  HTML5 way to do it  Normal form input  which IS read only as Ricardo Tomasi pointed out   Then if a file is dragged in  it is attached to the form  This WILL require modification to the action page to accept the file uploaded this way    x000D   x000D  function readfiles files    x000D    for  var i   0  i  lt  files length  i      x000D      document getElementById  fileDragName   value   files i  name x000D      document getElementById  fileDragSize   value   files i  size x000D      document getElementById  fileDragType   value   files i  type x000D      reader   new FileReader    x000D      reader onload   function event    x000D        document getElementById  fileDragData   value   event target result   x000D      reader readAsDataURL files i    x000D      x000D    x000D  var holder   document getElementById  holder    x000D  holder ondragover   function      this className    hover   return false     x000D  holder ondragend   function      this className       return false     x000D  holder ondrop   function  e    x000D    this className       x000D    e preventDefault    x000D    readfiles e dataTransfer files   x000D    x000D   holder hover   border  10px dashed  0c0  important    x000D   lt form method  post  action  http   example com   gt  x000D     lt input type  file  gt  lt input id  fileDragName  gt  lt input id  fileDragSize  gt  lt input id  fileDragType  gt  lt input id  fileDragData  gt  x000D     lt div id  holder  style  width 200px  height 200px  border  10px dashed  ccc  gt  lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    It is even more boss if you can make the whole window a drop zone  see How do I detect a HTML5 drag event entering and leaving the window  like Gmail does

User · Answer

The following works in Chrome and FF  but i ve yet to find a solution that covers IE10  as well    x000D   x000D     dragover and dragenter events need to have  preventDefault  called x000D     in order for the  drop  event to register   x000D     See  https   developer mozilla org en-US docs Web Guide HTML Drag operations droptargets x000D  dropContainer ondragover   dropContainer ondragenter   function evt    x000D    evt preventDefault    x000D     x000D   x000D  dropContainer ondrop   function evt    x000D       pretty simple -- but not for IE    x000D    fileInput files   evt dataTransfer files  x000D   x000D       If you want to use some of the dropped files x000D    const dT   new DataTransfer    x000D    dT items add evt dataTransfer files 0    x000D    dT items add evt dataTransfer files 3    x000D    fileInput files   dT files  x000D   x000D    evt preventDefault    x000D     x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   lt div id  dropContainer  style  border 1px solid black height 100px   gt  x000D     Drop Here x000D   lt  div gt  x000D    Should update here  x000D     lt input type  file  id  fileInput    gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    You ll probably want to use addEventListener or jQuery  etc   to register your evt handlers - this is just for brevity s sake

User · Answer

I know some trick works in Chrome   When dropping files into drop zone you get a dataTransfer files object  that is a FileList type of object  that contains all the files you dragged  Meanwhile   lt input type  file    gt  element has the property files  that is the same FileList type object   So  you can simply assign the dataTransfer files object to the input files property

User · Answer

In theory  you could add an element overlaying the  lt input  gt   and then use it s drop event to capture the files  using the File API  and pass them to input files array   Except that a file input is read-only  This is an old problem   You can however  bypass the form control completely and upload via XHR  not sure about the support for that     https   developer mozilla org en Using files from web applications http   www html5rocks com en tutorials file xhr2  toc-send-blob   You could also use an element in the surrounding area to cancel the drop event in Chrome   and prevent the default behaviour of loading the file   Dropping multiple files over the input already works in Safari and Firefox

[html] drag drop files into standard html file input

Examples related to html

Examples related to file-upload

Examples related to drag-and-drop