How to show the file name while we are uploading multiple images

Issue

Here I have written the vue.js code for multi upload with single input field.

And this is working exactly fine But the issue is while we are uploading the file it is showing the number of files uploaded but instead i want to display the name of the file what we are uploading.

So can we do this please let me know.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<template id="asad">
    <div class="container">
        <div>
            <h2>Multiple Files</h2>
            <hr/>
            <label>Files
                <input type="file" multiple @change="handleFileUploads( $event )"/>
            </label>
            <br>
            <button v-on:click="submitFiles()">Submit</button>
        </div>
    </div>
</template>
</body>

<script>
    var app = new Vue({
    el: '#asad',
        data(){
            return {
                files: []
            }
        },
        
        methods: {
            handleFileUpload( event ){
                this.files = event.target.files;
            },
            
            submitFile(){
                let formData = new FormData();
                
                for( var i = 0; i < this.files.length; i++ ){
                    let file = this.files[i];
                
                    formData.append('files[' + i + ']', file);
                }
                
                axios.post( '/multiple-files',
                    formData,
                    {
                        headers: {
                                'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(){
                    console.log('SUCCESS!!');
                })
                .catch(function(){
                    console.log('FAILURE!!');
                });
            }
        }
    })
</script>
</html>

image

Solution

You can try with computed property :

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="asad">
<template >
    <div class="container">
        <div>
            <h2>Multiple Files</h2>
            <hr/>
            <label>Files
                <input type="file" multiple @change="handleFileUploads( $event )"/>
                <ul v-if="files.length">
                <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
                </ul>
            </label>
            
            <br>
            <button v-on:click="submitFiles()">Submit</button>
        </div>
    </div>
</template>
</div>
</body>

<script>
var app = new Vue({
  el: '#asad',
  data(){
    return {
      files: []
    }
  },
  computed: {
    filesNames() {
      const fn = []
      for (let i = 0; i < this.files.length; ++i) {
        fn.push(this.files.item(i).name)
      }
      return fn
    }
  }, 
  methods: {
    handleFileUploads( event ){
      this.files = event.target.files;
    },

    submitFile(){
      let formData = new FormData();
      for( var i = 0; i < this.files.length; i++ ){
        let file = this.files[i];
        formData.append('files[' + i + ']', file);
      }
      axios.post( '/multiple-files', formData, 
        {headers: {'Content-Type': 'multipart/form-data'}}
      ).then(function(){
        console.log('SUCCESS!!');
      })
      .catch(function(){
        console.log('FAILURE!!');
      });
    }
  }
})
  
</script>
</html>

Answered By – Nikola Pavicevic

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.