Upload image on click alongside drag & drop

Question

I have an image swap working when the user drags & drops an image inside a div. I can't seem to figure out how to add ability to upload/swap image when div is clicked.

Below is what I have right now.

let img = new Image()
document.getElementById("logo2").appendChild(img);

function makeSwappable(imgEl){
  imgEl.addEventListener('drop', dropHandler)
  imgEl.addEventListener('dragover', dragoverHandler)
  imgEl.addEventListener('dragleave', dragleaveHandler)

  function dragoverHandler(e){
    e.preventDefault()
    e.target.style.opacity = 0.2
    e.target.style.transition = "0.4s"
    e.target.style.border = "dotted blue 0px"
    e.target.style.transform = "scale(0.97)"
    e.target.style.transition.timing.function = "ease-out"
  }
  function dragleaveHandler(e){
    e.preventDefault()
    e.target.style.opacity = 1
    e.target.style.border = "dotted transparent 0px"
    e.target.style.transform = "scale(1)"
    e.target.style.transition = "0.7s"
  }

  function dropHandler (e){
    e.preventDefault()

    e.target.style.opacity = 1
    e.target.style.border = "dotted transparent 0px"
    e.target.style.transform = "scale(1)"
    e.target.style.transition = "0.7s"

    let file = e.dataTransfer.files[0]
    let fileReader = new FileReader()
    fileReader.onload = ((file)=>{
      return (ev)=>{
        e.target.src = ev.target.result
      }
    })(file)
    fileReader.readAsDataURL(file)
  } 
}

score 0 · Answer 1 · edited Jul 01 '19 at 06:19

This is your solution

// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)   
  document.body.addEventListener(eventName, preventDefaults, false)
})

// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})

;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}

function highlight(e) {
  dropArea.classList.add('highlight')
}

function unhighlight(e) {
  dropArea.classList.remove('active')
}

function handleDrop(e) {
  var dt = e.dataTransfer
  var files = dt.files

  handleFiles(files)
}

let uploadProgress = []
let progressBar = document.getElementById('progress-bar')

function initializeProgress(numFiles) {
  progressBar.value = 0
  uploadProgress = []

  for(let i = numFiles; i > 0; i--) {
    uploadProgress.push(0)
  }
}

function updateProgress(fileNumber, percent) {
  uploadProgress[fileNumber] = percent
  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
  console.debug('update', fileNumber, percent, total)
  progressBar.value = total
}

function handleFiles(files) {
  files = [...files]
  initializeProgress(files.length)
  files.forEach(uploadFile)
  files.forEach(previewFile)
}

function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let img = document.createElement('img')
    img.src = reader.result
    document.getElementById('gallery').appendChild(img)
  }
}

function uploadFile(file, i) {
  var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload'
  var xhr = new XMLHttpRequest()
  var formData = new FormData()
  xhr.open('POST', url, true)
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

  // Update progress (can be used to show progress indicator)
  xhr.upload.addEventListener("progress", function(e) {
    updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
  })

  xhr.addEventListener('readystatechange', function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      updateProgress(i, 100) // <- Add this
    }
    else if (xhr.readyState == 4 && xhr.status != 200) {
      // Error. Inform the user
    }
  })

  formData.append('upload_preset', 'ujpu6gyk')
  formData.append('file', file)
  xhr.send(formData)
}

body {
  font-family: sans-serif;
}
a {
  color: #369;
}
.note {
  width: 500px;
  margin: 50px auto;
  font-size: 1.1em;
  color: #333;
  text-align: justify;
}
#drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 480px;
  margin: 50px auto;
  padding: 20px;
}
#drop-area.highlight {
  border-color: purple;
}
p {
  margin-top: 0;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}
.button {
  display: inline-block;
  padding: 10px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.button:hover {
  background: #ddd;
}
#fileElem {
  display: none;
}

<div id="drop-area">
  <form class="my-form">
    <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
    <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
    <label class="button" for="fileElem">Select some files</label>
  </form>
  <progress id="progress-bar" max=100 value=0></progress>
  <div id="gallery" /></div>
</div>

score 0 · Answer 2 · answered Jun 29 '19 at 12:18

Here is some changes you need to make:

-    e.target.style.transition.timing.function = "ease-out"
+    e.target.style.transitionTimingFunction = "ease-out"

And a recommendation that you use Object URLs instead of creating base64 urls
And use const instead of let whenever the value don't have to change

-    let file = e.dataTransfer.files[0]
-    let fileReader = new FileReader()
-    fileReader.onload = ((file)=>{
-      return (ev)=>{
-        e.target.src = ev.target.result
-      }
-    })(file)
-    fileReader.readAsDataURL(file)

+    const file = e.dataTransfer.files[0]
+    e.target.src = URL.createObjectURL(file)

Now to upload the file you need make a ajax request and send the file to an upload url
Simplest would just be:

fetch('https://httpbin.org/post', { method: 'POST', body: file })

but depending on your needs you may also want to append it to file input, or create a FormData and specify some upload fields when uploading attachments. you maybe also want to use XMLHttpRequest to show a upload progress indicator

Upload image on click alongside drag & drop

2 Answers2