File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content">
<div class="sub-title-area mb-30">
<h2>사진 기록물</h2>
<div class="breadcrumb-list">
<ul>
<li><img :src="homeicon" alt="Home Icon">
<p>기록물</p>
</li>
<li><img :src="righticon" alt=""></li>
<li>사진 기록물</li>
</ul>
</div>
</div>
<form action="" class="insert-form mb-50">
<dl>
<dd>
<label for="id" class="require">제목</label>
<div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div>
</dd>
<div class="hr"></div>
<dd>
<label for="year">생산연도</label>
<input type="text" id="year" value="" placeholder="생산연도를 입력하세요">
</dd>
<div class="hr"></div>
<dd>
<label for="address">주소</label>
<div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div>
</dd>
<div class="hr"></div>
<dd>
<label for="text">내용</label>
<textarea name="" id=""></textarea>
</dd>
<div class="hr"></div>
<dd>
<label for="category" class="flex align-center">
<p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button>
</label>
<ul class="category">
<li class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li>
<li class="category2">카테고리2 <button class="cancel"><b>✕</b></button></li>
</ul>
</dd>
<div class="hr"></div>
<dd>
<label for="file" class="require">파일</label>
<ul class="wfull">
<li class="flex align-center">
<p>파일첨부</p>
<div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 10건까지 등록 가능하며, 건당 최대
100MB를 초과할 수 없습니다.</span></div>
</li>
<li class="file-insert">
<input type="file" id="fileInput" class="file-input" multiple @change="showFileNames">
<label for="fileInput" class="file-label mb-20">
<div class="flex-center align-center"><img :src="fileicon" alt="">
<p>파일첨부하기</p>
</div>
<p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p>
</label>
<p class="mb-10">파일목록</p>
<div id="fileNames" class="file-names">
<span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span>
<div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap">
<div class="file-name">
<!-- Corrected here: Use file.icon instead of fileicons.img -->
<img :src="file.icon" alt="fileicon">
<p>{{ file.name }}</p>
</div>
<button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button>
</div>
</div>
</li>
</ul>
</dd>
</dl>
</form>
<div class="btn-group flex-center">
<button class="cancel">취소</button>
<button class="register">등록</button>
</div>
</div>
<div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<h2>모달 제목</h2>
<p>모달의 내용이 여기에 들어갑니다.</p>
<button @click="closeModal">닫기</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isModalOpen: false,
// Define the image sources
homeicon: 'client/resources/images/icon/home.png',
erroricon: 'client/resources/images/icon/error.png',
righticon: 'client/resources/images/icon/right.png',
fileicon: 'client/resources/images/icon/file.png',
fileNames: [],
};
},
methods: {
showFileNames(event) {
const files = event.target.files;
this.fileNames = []; // Clear previous file names
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileType = file.name.split('.').pop().toLowerCase(); // Get file extension
// Set default icon
let iconPath = this.fileicons;
// Determine the icon based on file type
if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
iconPath = 'client/resources/images/icon/imgicon.png'; // Example for image files
} else if (['pdf'].includes(fileType)) {
iconPath = 'client/resources/images/icon/pdficon.png'; // Example for PDF files
} else if (['xls'].includes(fileType)) {
iconPath = 'client/resources/images/icon/excelicon.png'; // Example for audio files
} else if (['hwp'].includes(fileType)) {
iconPath = 'client/resources/images/icon/hwpicon.png'; // Example for video files
}
// Push the file name and corresponding icon to the fileNames array
this.fileNames.push({
name: file.name,
icon: iconPath
});
}
},
removeFile(index) {
// Remove file from the list
this.fileNames.splice(index, 1);
console.log(removeFile)
},
openModal() {
this.isModalOpen = true;
},
// 모달 닫기
closeModal() {
this.isModalOpen = false;
}
}
};
</script>