CODEWITHSUNDEEP
jqueryvue.jsvuejs2
user3653474
user3653474

Reputation: 3854

Select Multiple images at a time in Vue.js

I want to select multiple images at a time. Here, single selection is working:

https://jsfiddle.net/jfwv04mu/

HTML:

<div id="app">
  <h2>Images:</h2>
  <div class="row m-2">
    <div v-for="(data, index) in rawData" class="image-input image-input-active d-flex">
      <div class="image-preview">
         <img class="img-responsive h-100" :src="data">
        <button class="btn btn-xs remove-file" @click="removeFile(index)">
          <i class="fa fa-trash " ></i>
        </button>
      </div>
       <input type="radio" name="imgType">
  </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" @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 class="row">
  
  
  <div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
  </div>
</div>

The only issue is that I want to select multiple images at a time, but the current scenario is that I am only able to select a single image at a time. I was trying but to implement multiple selection but it was not working.

Upvotes: 2

Views: 2045

Answers (1)

gijoe
gijoe

Reputation: 1189

  1. You need to update the input[file] element and include the attribute => multiple e.x.

    <input type="file" class="d-none" id="vue-file-upload-input" @change="addImage" multiple />

then in your "addImage" handler you need to correct the code to read all the images in a for loop instead of the first "tmpFiles[0]"

addImage:function(){

  const tmpFiles = e.target.files
  if (tmpFiles.length === 0) {
    return false;
  }
    const self = this

  for(var f in tmpFiles){
    const file = tmpFiles[f]

    this.files.push(file)

    const reader = new FileReader()
    reader.onload = function(e) {
      self.rawData.push(e.target.result)
    }
    reader.readAsDataURL(file)
  }//for
}

here is the fiddle https://jsfiddle.net/c92oqy1w/5/

Upvotes: 4

Related Questions