File Upload

by dshilkret

HTML

<div class="fileDropTarget">
  <div>    
    <input type="file" multiple id="inputAddFiles" />    
    <button>Add files</button>
  </div>
</div>
<br/>
<button id="clearFiles">Clear list</button>
<ul id="fileList"/>

CSS

.fileDropTarget {
  width: 400px;
  height: 200px;
  border: solid thin #1a1a1a;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:before {
    content: "Drop files here or";
    display: block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 44.5%;
    width: 100%;
  }
  
  > div {
    margin-top: 2.75em;
    position: relative;
    > input {
      width: 75px;
      height: 23px;
      visibility: hidden;
      + button {
        position: absolute;
        left: 0;
      }
    }
  }
}

JavaScript

$files = []
$fileNames = []

calcSize = (size) ->
  sizeMap = 
    1: "B"
    2: "KB"
    3: "MB"
    4: "GB"
  debugger
  i = 1
  while size > 999.99
    size = size / 1024
    i++
  size.toFixed(2)+" "+sizeMap[i]

processFiles = (files) ->
  if files
    fileList = $ "#fileList"    
    for k,f of files 
      continue if typeof f isnt "object" and f.toString() isnt "[object File]"
      continue if -1 isnt $fileNames.indexOf f.name
      $files.push f
      $fileNames.push f.name
      fileList.append "<li>#{f.name} (#{calcSize f.size}) - #{f.type || 'unknown'}</li>"
  return

handleDrop = (evt) ->
  evt.preventDefault()
  files = evt.originalEvent.dataTransfer.files
  debugger
  processFiles files
  return
        
handleDragOver = (evt) ->
  evt.preventDefault();
  evt.originalEvent.dataTransfer.dropEffect = "copy"
  return

handleFileInput = (evt) ->
  debugger
  processFiles evt.target.files
  
clearFiles = ->
  $ "#fileList"
  .empty()
  $files = []
  $fileNames = []
  return

$ document
.ready ->
    $ ".fileDropTarget"
    .on "drop",handleDrop
    .on "dragover",handleDragOver
    
    $ "#inputAddFiles" 
    .on "change",handleFileInput
    
    $ "#inputAddFiles + button"
    .on "click",->
      $ "#inputAddFiles"
      .click()
      return
    
    $ "#clearFiles"
    .on "click",clearFiles
    return