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

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>

CodePudding user response：

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>