vuejs @drop for multiple image uploader

Question

I am currently building multiple image uploader with preview and dropzone in vue.js.

I have two questions for it:

@drop not working in div. How do I fix it?
I have got file objects in data. How can I upload files to server with it?

You can find my working code in here: https://jsfiddle.net/bravemaster619/prxkjt9z/

<div id="app">
  <h2>Images:</h2>
  <div class="row m-2">
    <div v-for="(image, index) in images" class="image-input image-input-active d-flex">
      <div class="image-preview">
        <img class="img-responsive h-100" :src="image">
        <button class="btn btn-xs remove-file" @click="removeFile(index)">
          <i class="fa fa-trash " ></i>
        </button>
      </div>
  </div>
  <div class="image-input image-input-tbd d-flex" v-if="this.files.length < this.option.maxFileCount">
    <div class="image-preview dropzone d-flex justify-content-center align-items-center col-lg-3 col-md-4" @drop="loaddropfile" @click="openinput">
      <i class="fa fa-plus text-success"></i>
    </div>
    <input type="file" class="d-none" id="vue-file-upload-input" @change="addImage">
  </div>
  </div>
  <div class="row justify-content-center m-2">
    <button class="btn btn-primary" @click="upload">Upload</button>
  </div>
</div>

new Vue({
  el: "#app",
  data() {
    return {
      option: {
        maxFileCount: 3
      },
      files:[],
      images: [],
    }
  },
  methods: {
    loaddropfile: function(e) {
        e.preventDefault()
      e.stopPropagation()
        alert('ok')
        console.log(e)
    },
    openinput: function() {
        document.getElementById("vue-file-upload-input").click();
    },
    addImage: function(e) {
        const tmpFiles = e.target.files
      if (tmpFiles.length === 0) {
        return false;
      }
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
        const reader = new FileReader()
      reader.onload = function(e) {
        self.images.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    removeFile: function(index) {
        this.files.splice(index, 1)
      this.images.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    },
    upload: function() {
        alert('Check console to see uploads')
        console.log(this.files)
    }
  },
})

Pratik Patel · Accepted Answer · 2020-01-03 06:51:42Z

1

On mounted just add this code and it works.

  mounted(){
  dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  this.loaddropfile(evt);
  evt.preventDefault();
};
  }

and add the id to a div tag.

<div id="dropContainer" class="image-preview dropzone d-flex justify-content-center align-items-center" @click="openinput">

Working fiddle - https://jsfiddle.net/29z18a5g/

edited Jan 3, 2020 at 6:51

answered Jan 3, 2020 at 6:42

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

glinda93 Over a year ago

Thank you for your answer. So you have to prevent dragenter and dragover. Btw, how do you upload these files to server?

Pratik Patel Over a year ago

If you have python back-end use form data to send the file on the back-end and then store on the server.

Pratik Patel Over a year ago

which back-end you are using?

glinda93 Over a year ago

I'm going to use Adonis(Node.js) or Laravel. As long as using form, there is no problem. In your answer, I suggest using @dragenter and @dragover. What do you think?

Collectives™ on Stack Overflow

vuejs @drop for multiple image uploader

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related