How to show images before uploading them in Vue.js?

Question

Following this tutorial, I've made this component which uploads multiple images at once, and shows the filenames to be uploaded.

That works great, but I'm wondering how can I show the photos (ideally resized to certain max width) instead of their filenames?

      
        
          
            

            
                
                    {{username}}  
                        Upload Photos 
                        
                        
                    
                    


                        
                              
                                  

                              

                              {{message}}


                             

                             
                               
                               

                             
                                Upload Files 
                                 


                             
                               

                    

                  
                    

                      
                        {{file.name}} 

                            {{file.invalidMessage}} 
                        

                      
                      
                        
                           ×
                        
                      
                    

                  

                    Send

                
            

            
          
        
      





 data () {
    return { 
        showUploadPhotoModal: false,
        files: [],
        uploadFiles: [],
        title: "",
        message: "",
        fileError: false,


    }
  },
  methods: {
    selectFile() {
      const files = this.$refs.files.files;
      this.uploadFiles = [...this.uploadFiles, ...files];
  this.files = [
       ...this.files,
       ..._.map(files, file => ({
         name: file.name,
         type: file.type,
         invalidMessage: this.validate(file)

       }))
  ];

},

validate(file) {
  const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
  if(!allowedTypes.includes(file.type)) { 
    return "Not an image"
  }
  return "";
},

sendFile() {
  const formData = new FormData();

  formData.append('title', this.title);
  formData.append('token', this.token);

  _.forEach(this.uploadFiles, file => {
    if(this.validate(file)==="") {
      formData.append('files', file);
    }
  });

  axios.post(this.BASE_URL + "/api/post", formData)
  .then(res => {
    console.log('res data is:', res.data);
    this.files=[];
    this.uploadFiles=[];
    })
  .catch(err => {
    console.log('error is', err.response.data.error)
    this.fileError = true;
    });
}


  },

user_52160 · Answer

In order to handle this, I began with this layout:

I've got an input tag using @change to run a method whenever the user selects some files. Beneath it I've got a v-for to iterate and provide thumbnails for the images.

Here is the JavaScript:

const app = new Vue({
  el:'#app',
  data:{
    images:[]
  },
  methods:{
    handleSelects(e) {
      this.images = [];
      let fileList = Array.prototype.slice.call(e.target.files);
      fileList.forEach(f => {

        if(!f.type.match("image.*")) {
          return;
        }

        let reader = new FileReader();
        let that = this;

        reader.onload = function (e) {
          that.images.push(e.target.result);
        }
        reader.readAsDataURL(f); 
      });
    }
  }
})

So handleSelects does a few things. First, it resets the thumbnails (this.images). It then looks at the files selected in the input, checks to see they are images, and sets up a FileReader for each. For each file it gets a data url which is then added to that images array so previews can be created.

You can see a full CodePen of this here: https://codepen.io/cfjedimaster/pen/VqrGQw?editors=1111

How to show images before uploading them in Vue.js?

1 Answers