Vue

by Annisa_Lianda30

HTML

<div id="app">
  <button v-on:click="log" id='log' type='button'>Log Data</button>

  <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>
            </div>
            <!-- uploader -->
            <div class="photo-lg photo mt-3 mx-md-3 mx-auto border border-1 rounded-sv-sm bg-neutral-white cursor-pointer">
              <div class="d-block">
                <div class="font-icon-sv-xxl mt-5 pt-3 text-brown-main"><i...

CSS

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

#log{
  margin-bottom: 10px;
}
#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,
				arrImage: [],
        // new props
        imageFiles:[],
				names:[]
			},
		};
	},
	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);
					}
				}
			}
		},
		uploadImageProperty(e) {
			this.$refs.uploadProperty.click();
		},
		removeProperty(key) {
			this.crudData.arrImage.splice(key, 1);
		},
		log() {
			// todo: change method name to submit and send data to server
			let checkedImages = this.crudData.arrImage.filter(img => img.checked)
			this.crudData.imageFiles = checkedImages.map(img => img.image)
			this.crudData.names = checkedImages.map(img => img.name)
			console.log({imageFiles: this.crudData.imageFiles, names: this.crudData.names})
		}
	},
});