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

user_16185110 0
Viewed 209

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

vuejs2 vue.js html javascript
1 Answers

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>

user_119891890
Related