Vue

by Annisa_Lianda30

HTML

<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">
                <div class="px-3 mt-4">
                    <div class="border border-1 border-neutral-40 rounded-sv-lg position-relative mt-2">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="d-flex">
                                    <div class="icon-report-label">
                                        <div class="rounded-sv-md p-3 bg-brown-surface d-inline-flex">
                                            <i width="24" class="fa fa-info-circle text-brown-main"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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">
                            <span class="float-right mr-2 mt-2 btn btn-sv-red btn-sm py-1 px-2 fa fa-trash-alt" @click="removeProperty(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>
           ...

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{
                datas: [],
                axiosRespon: null,
                crudData:{
                    'id': null,
                    'name': [],
                    'image': [],
                    'arrImage': [],
                    'url': 'property',
                    'toRoute': 'property',
                    'action': null,
                },
            }
        },
        methods: {
            propertyImageUpload(e, maxItem){                    
                let input = this.$refs.uploadProperty
                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)
                        }
                    }
                }
            let checkedImages = this.crudData.arrImage.filter(img => img.checked)
			this.crudData.image =...