differ between two file input fields in vue js

Question

I have two input files fields in a form, as followed:

    <div class="singleInput50">
      <span>Personal Image:</span>
      <input type="file" @change="handleImage" accept="image/*" ref="imgPersonal">
    </div>

    <div class="singleInput50">
      <span>Business logo</span>
      <input type="file" @change="handleImage" accept="image/*" id="businessLogo">
    </div>

Both designated to hold a different image(that would convert to base64 after that) and should be binded to a different data variable, like this two:

businessLogo: '',
imgPersonal: '',

Both handled with this methods:

handleImage(e) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.userObject.imgPersonal = e.target.result; **//Here I can't figure out how to make it dynamic, if a user choosed personalImage or businessLogo field**
      };
      reader.readAsDataURL(fileObject)
      // console.log("file object", fileObject);
    },

The goal is to make assigning dynamic. if the user will upload a file to "personal image" input the image will be assigned to "imgPersonal" data variable, and if to "business Logo" the image image will be assigned to "business Logo"

Nima Ebrazeh · Accepted Answer · 2021-09-18 15:28:21Z

You can simply pass an argument to your methods:

handleImage(e, imageName) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage, imageName);
},
createBase64Image(fileObject, imageName) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.userObject[imageName] = e.target.result; **//Here I can't figure out how to make it dynamic, if a user choosed personalImage or businessLogo field**
      };
      reader.readAsDataURL(fileObject)
      // console.log("file object", fileObject);
},

An in your template:

<div class="singleInput50">
      <span>Personal Image:</span>
      <input type="file" @change="handleImage($event, 'imgPersonal')" accept="image/*" ref="imgPersonal">
</div>

<div class="singleInput50">
      <span>Business logo</span>
      <input type="file" @change="handleImage($event, 'businessLogo')" accept="image/*" id="businessLogo">
</div>

Collectives™ on Stack Overflow

differ between two file input fields in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related