Select Multiple images at a time in Vue.js

Question

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

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.

I can't seem to find info on using jQuery and Vue together. Here's some good info about using jQuery though. https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — react_or_angluar, Nov 02 '20 at 05:37
Please include all code relevant to the question, in the question itself. Make it as easy as possible for us to help you by not making us go offsite to find critical information. — Jon P, Nov 02 '20 at 06:04

score 4 · Accepted Answer · answered Nov 02 '20 at 06:01

4

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/

answered Nov 02 '20 at 06:01

gijoe

1,159
7
7

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob', Can u please tell why i'm getting this error in condole, its is in js fiddle console – user3653474 Nov 04 '20 at 18:43
maybe did you select a file that is not an image? i have put a check in order to allow only image files https://jsfiddle.net/9bvfnp0m/ – gijoe Nov 05 '20 at 20:03
Thanks now it is resolved i was selecting image file i.e. jpeg. I have selected jpeg image file, there is one more error in the fiddle, Error in v-on handler: TypeError: Cannot read property 'match' of undefined, Can u please have a look – user3653474 Nov 06 '20 at 15:56

Select Multiple images at a time in Vue.js

1 Answers1