Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div id="app">
  <div class="py-4 bg-white rounded-sv-xl">
            <div class="card card-custom mt-2 mb-5">
                <div class="title position-absolute d-sm-block d-md-flex d-lg-flex ml-3">
                <span class="d-flex mt-1 ml-lg-5">
                        <input type="checkbox" class="rounded-sv-xs shadow-brown-focus" id="selectedImage" >
                        <label for="selectedImage" class="ml-2">Select All</label>
                    </span>
                </div>
                <div class="col-12 px-0 col-lg-3 col-button mt-lg-0 mt-md-0 mt-sm-5 mr-lg-3 mr-sm-3">
                    <button type="button" class="btn btn-sv-red"><i class="fa fa-trash-alt" v-on:click="removeAll()"></i></button>
                </div>
                <div class="col-12 mt-3 p-0">
                    <div class="d-sm-block d-md-flex d-lg-flex flex-wrap">
                        <!-- preview -->
                        <div class="mt-3 mx-lg-3 mx-auto position-relative photo-lg photo rounded-sv-sm" v-for="(img, key) in crudData.arrImage" :key="key" :style="{ 'background-image': `url(${img.blob})` }">
                            <input class="position-absolute ml-2 mt-2 rounded-sv-xs shadow-brown-focus" type="checkbox" v-model="img.checked" @change="imageChecked($event)">
                            <span class="float-right mr-2 mt-2 btn btn-sv-red btn-sm py-1 px-2 fa fa-trash-alt" @click="removeImage(key)"></span>
                            <div class="position-absolute d-block bottom-0 mb-3 px-2 w-100">
                                <input class="form-control form-control-sm border border-1 border-neutral-30" placeholder="Input Name" v-model="img.name" type="text" required>
                            </div>
                        </div>
              ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.photo {
    background-size: cover;
    background-repeat: no-repeat
}

.photo-xl {
    width: 400px;
    height: 400px;
}

.photo-lg {
    width: 237px;
    height: 237px;
}

.photo-md {
    width: 100px;
    height: 100px;
}

.photo-sm{
    width: 48px;
    height: 48px;
}

.photo-xs{
    width: 40px;
    height: 40px;
}

Vue

new Vue({
  el: "#app",
  data() {
            return{
                crudData:{
                    'id': null,
                    'name': [],
                    'image': [],
                    'arrImage': [],
                },
            }
        },
  methods: {
            imageUpload(e, maxItem){                    
                let input = this.$refs.uploadImage
                let file = input.files
                if(file.length > (maxItem - this.crudData.arrImage.length)){
                    $('#uploadMultiFile').val('')
                    alert('You can only upload max '+maxItem+' items')
                } else {
                    for(let i = 0; i < file.length; i++){
                        var valueArr = this.crudData.arrImage.map(function(item){ return item.fileName })
                        var isDuplicate = valueArr.some(function(item, idx){ 
                            return item == file[i].name 
                        })
                        if (isDuplicate) {
                            alert("You've already uploaded this file")
                            continue
                        }else{
                            var arrImg = {
                                blob: URL.createObjectURL(file[i]),
                                image: file[i],
                                fileName: file[i].name,
                                checked: false,
                                name : null
                            }
                            this.crudData.arrImage.push(arrImg)
                            console.log(this.crudData.arrImage)
                        }
                    }
                }
            },
            uploadImage(e){
                this.$refs.uploadImage.click()
            },
            removeImage(key){
                this.crudData.arrImage.splice(key, 1)
            }, 
            imageChecked() {
                let checkedImages = this.crudData.arrImage.filter(item =>...