yona#37 파일 업로드 클라이언트, 서버단 사전 검증으로 적용

This commit is contained in:
Rinjae
2025-12-01 11:03:58 +09:00
parent 6501ace1af
commit 609984ae94
12 changed files with 231 additions and 57 deletions
@@ -62,7 +62,7 @@
</div>
<div class="list-dot">
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg,
png)</p>
</div>
@@ -123,11 +123,8 @@
const file = fileInput.files[0];
if (file) {
const allowedExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.hwp', '.gif', '.jpg', '.jpeg', '.png'];
const fileExt = '.' + file.name.split('.').pop().toLowerCase();
if (!allowedExtensions.includes(fileExt)) {
customPopups.showAlert("허용된 파일 형식이 아닙니다.\n문서파일(pdf, doc, docx, xls, xlsx, ppt, pptx, hwp)과 이미지 파일(gif, jpg, png)만 등록 가능합니다.");
// FileValidator를 사용한 파일 검증
if (!FileValidator.validateFile(file)) {
fileInput.value = '';
fileNameInput.value = '';
fileNameInput.classList.remove('i_trash', 'after');
@@ -61,7 +61,7 @@
</div>
<div class="list-dot">
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg,
png)</p>
</div>
@@ -127,32 +127,15 @@
const fileInput = document.getElementById('file');
const fileNameInput = document.querySelector('.upload-name');
const allowFileExtention = ['pdf','doc','docx','xls','xlsx','ppt','pptx','hwp','gif','jpg','png'];
function isValidFileExtention(filename) {
const extention = filename.split('.').pop().toLowerCase();
return allowFileExtention.includes(extention);
}
function isValidFileSize(filesize) {
const maxSize = 10 * 1024 * 1024;
return filesize <= maxSize;
}
fileInput.addEventListener('change', function () {
const file = fileInput.files[0];
if (file) {
if(!isValidFileExtention(file.name)) {
const errorMsg = '허용된 파일 형식이 아닙니다. <br>문서파일과 이미지 파일만 등록 가능합니다. <br> (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)';
const formattedMsg = errorMsg.replace(/\n/g,'<br>');
$('#customAlertMessage').html(formattedMsg);
$('#customAlert').css('display','flex');
return;
}
if(!isValidFileSize(file.size)) {
customPopups.showAlert('첨부파일은 10MB 이내로 등록해 주세요.')
// FileValidator를 사용한 파일 검증
if (!FileValidator.validateFile(file)) {
fileInput.value = '';
fileNameInput.value = '첨부파일을 등록 해 주세요';
fileNameInput.classList.remove('i_trash', 'after');
fileNameInput.classList.add('before');
return;
}
fileNameInput.value = file.name;
@@ -265,7 +265,7 @@
<span th:errors="*{compRegFile}"></span>
</div>
<div class="list-dot">
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)</p>
</div>
</div>
@@ -354,28 +354,18 @@
fileInput.addEventListener('change', function() {
const files = fileInput.files;
if (files.length > 0) {
let totalSize = 0;
let fileNames = [];
const allowedExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'hwp', 'gif', 'jpg', 'png'];
for (let i = 0; i < files.length; i++) {
const file = files[i];
totalSize += file.size;
const fileExtension = file.name.split('.').pop().toLowerCase();
if (!allowedExtensions.includes(fileExtension)) {
customPopups.showAlert(`'${file.name}'은(는) 허용되지 않는 파일 형식입니다.`);
fileInput.value = '';
return;
}
fileNames.push(file.name);
// FileValidator를 사용한 파일 검증
if (!FileValidator.validateFiles(files)) {
fileInput.value = '';
fileNameInput.value = '';
fileNameInput.classList.remove('i_trash', 'after');
fileNameInput.classList.add('before');
return;
}
if (totalSize > 10 * 1024 * 1024) { // 10MB
customPopups.showAlert('총 파일 크기는 10MB를 초과할 수 없습니다.');
fileInput.value = '';
return;
let fileNames = [];
for (let i = 0; i < files.length; i++) {
fileNames.push(files[i].name);
}
fileNameInput.value = fileNames.join(', ');