How to build a Drag&Drop Images Vue.js component from scratch

In this post I'm going to dive a bit creating a Vue.js component from scratch using Vue CLI and ES6 to allow users drag&drop images in the browser.

The final implementation is not meant to be "ready to be drop" components for your app. They are better a starting point to be include in your app by adding further logics required by your product.

The component can be used in any Vue app such this one:

<template>
  <div id="app">
      <DropAnImage />
  </div>
</template>

<script>
import DropAnImage from './components/DropAnImage.vue'

export default {
  name: 'app',
  components: {
    DropAnImage
  }
}
</script>


<style>
html, body, #app{
  width:100%;
  height:100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>

And here up and running, if you want to drop something:

Just to be clear, the above app is not uploading anything, all happens client-side only.

Build the component

There are two relevant parts to make it work properly:

• the native drag events
• the FileReader object to read on-the-fly dropped elements

The native events

The browser allows to listen for dragover, dragleave and drop events to performe the interactive part of the component.

In Vue.js we can set those event in the template:

<template>
  <div class="drop" 
    @dragover.prevent="dragOver" 
    @dragleave.prevent="dragLeave"
    @drop.prevent="drop($event)">

  </div>
</template>

With this events you can define some logic to display relevant UI information for the user. The drop event is the one that bring to the next part.

The FileReader

The FileReader allows to read the content of a file attached to an event. It requires a File object to work properly.

This is the typical implementation:

var reader = new FileReader()
reader.onload = f => {
  let src = f.target.result
}
reader.readAsDataURL(file)

and here used in the callback after a drop event:

drop(e){
      let files = e.dataTransfer.files

      let file = files[0]

      let reader = new FileReader()
      reader.onload = f => {
        // f.target.result contains the base64 encoding of the image
        let src = f.target.result
      }
      reader.readAsDataURL(file)
}

The above snippet is simplified on purpose to show the relevant part. The fully implemented

Conclusion

You can check the repository if you want to start from the source. The components are not meant to be a drop-in component but rather a starting point to extend them to something more meaningful in your app. There are two flavuors of the same implementation:

• DropAnImage to allow uploading only one image
• DropImages allows many images to be dropped