파일 처리 관련 자바스크립트 소스 리팩토링

main
이범준 3 months ago
parent b88495562c
commit e1644c16ff

@ -436,7 +436,7 @@
$("#tbody--productList").append(tr);
fnMakeGridImageViewer(
AddsComponentization.fnMakeGridImageViewer(
$("#tbody--productList").find("td.prdDsuseImg").last()[0],
"dsusePrdImgFiles",
di.data.fileInfo
@ -570,7 +570,7 @@
fileInfo.MIME_TYPE = this.dataset.mimeType;
fileInfo.FILE_NM = this.dataset.fileNm;
fileInfo.FILE_ID = this.dataset.fileId;
promiseArr.push(fnCreateFileFromFileInfo(fileInfo));
promiseArr.push(AddsSupport.fnCreateFileFromFileInfo(fileInfo));
}
});

@ -405,7 +405,7 @@
$("#tbody--productList").append(tr);
fnMakeGridImageViewer(
AddsComponentization.fnMakeGridImageViewer(
$("#tbody--productList").find("td.prdDsuseImg").last()[0],
"dsusePrdImgFiles",
di.data.fileInfo
@ -506,7 +506,7 @@
fileInfo.MIME_TYPE = this.dataset.mimeType;
fileInfo.FILE_NM = this.dataset.fileNm;
fileInfo.FILE_ID = this.dataset.fileId;
promiseArr.push(fnCreateFileFromFileInfo(fileInfo));
promiseArr.push(AddsSupport.fnCreateFileFromFileInfo(fileInfo));
}
});

@ -606,7 +606,7 @@
}
try{
promiseArr.push(fnCreateFileFromFileInfo(f));
promiseArr.push(AddsSupport.fnCreateFileFromFileInfo(f));
}catch(e){
console.log(e);
}

@ -40,7 +40,7 @@
<!-- 공통 유틸 -->
<script src="<c:url value="/webjars/applib/js/cmmnUtil.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/adds/cmmn/adds-cmmnUtil.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/adds/cmmn/adds-support.js?${ver}"/>"></script>
<!-- 날짜 관련 유틸 -->
<script src="<c:url value="/webjars/applib/js/cmmnDateUtil.js?${ver}"/>"></script>
<!-- 초기화 유틸 -->

@ -1,33 +0,0 @@
/**************************************************************************
* 서버의 파일 정보로 javascript File 객체 생성
**************************************************************************/
async function fnCreateFileFromFileInfo(fileInfo){
if(/^[a-zA-Z][\:]/.test(fileInfo.URL)){
fileInfo.URL = fileInfo.URL.substring(2);
}
let response = null;
try {
response = await fetch(fileInfo.URL);
} catch(error){
let data = new Blob();
let metadata = {
type: fileInfo.MIME_TYPE
};
let file = new File([data], fileInfo.FILE_NM, metadata);
file.id = fileInfo.FILE_ID;
file.url = fileInfo.URL;
return new Promise(resolve => { resolve(file); });
}
let data = await response.blob();
let metadata = {
type: fileInfo.MIME_TYPE
};
let file = new File([data], fileInfo.FILE_NM, metadata);
file.id = fileInfo.FILE_ID;
file.url = fileInfo.URL;
return new Promise(resolve => { resolve(file); });
}

@ -1,62 +1,65 @@
/**************************************************************************
* 그리드 내부 이미지 첨부
**************************************************************************/
function fnMakeGridImageViewer(tdEl, fileInputElName, fileInfo) {
let fileInputEl = document.createElement("input");
fileInputEl.name = fileInputElName;
fileInputEl.type = "file";
fileInputEl.setAttribute("hidden", "hidden");
fileInputEl.setAttribute("accept", "image/*")
tdEl.appendChild(fileInputEl);
if (fileInfo != null) {
fileInputEl.dataset.url = fileInfo.URL;
fileInputEl.dataset.fileNm = fileInfo.FILE_NM;
fileInputEl.dataset.mimeType = fileInfo.MIME_TYPE;
fileInputEl.dataset.fileId = fileInfo.FILE_ID;
}
let uploadButtonEl = document.createElement("button");
uploadButtonEl.type = "button";
uploadButtonEl.classList.add("btn", "btn-primary", "w-px-50", "mx-1");
uploadButtonEl.textContent = "등록";
tdEl.appendChild(uploadButtonEl);
let viewButtonEl = document.createElement("button");
viewButtonEl.type = "button";
viewButtonEl.classList.add("btn", "btn-primary", "w-px-50", "mx-1");
viewButtonEl.setAttribute("hidden", "hidden");
viewButtonEl.textContent = "보기";
tdEl.appendChild(viewButtonEl);
$(fileInputEl).on("change", function () {
if (this.files != null && this.files.length > 0) {
$(uploadButtonEl).text("변경");
$(viewButtonEl).removeAttr("hidden");
} else if (this.dataset.url != null) {
$(uploadButtonEl).text("변경");
$(viewButtonEl).removeAttr("hidden");
} else {
$(uploadButtonEl).text("등록");
$(viewButtonEl).attr("hidden", "hidden");
}
});
$(uploadButtonEl).on("click", function () {
$(fileInputEl).click();
});
$(viewButtonEl).on("click", function () {
let viewUrl = "";
if (fileInputEl.files.length != 0) {
viewUrl = (window.URL || window.webkitURL).createObjectURL(fileInputEl.files[0]);
} else {
viewUrl = fileInputEl.dataset.url;
}
window.open(viewUrl, "이미지", "width=500, height=500");
});
$(fileInputEl).trigger("change");
class AddsComponentization {
/**************************************************************************
* 그리드 내부 이미지 첨부
**************************************************************************/
static fnMakeGridImageViewer(tdEl, fileInputElName, fileInfo) {
let fileInputEl = document.createElement("input");
fileInputEl.name = fileInputElName;
fileInputEl.type = "file";
fileInputEl.setAttribute("hidden", "hidden");
fileInputEl.setAttribute("accept", "image/*")
tdEl.appendChild(fileInputEl);
if (fileInfo != null) {
fileInputEl.dataset.url = fileInfo.URL;
fileInputEl.dataset.fileNm = fileInfo.FILE_NM;
fileInputEl.dataset.mimeType = fileInfo.MIME_TYPE;
fileInputEl.dataset.fileId = fileInfo.FILE_ID;
}
let uploadButtonEl = document.createElement("button");
uploadButtonEl.type = "button";
uploadButtonEl.classList.add("btn", "btn-primary", "w-px-50", "mx-1");
uploadButtonEl.textContent = "등록";
tdEl.appendChild(uploadButtonEl);
let viewButtonEl = document.createElement("button");
viewButtonEl.type = "button";
viewButtonEl.classList.add("btn", "btn-primary", "w-px-50", "mx-1");
viewButtonEl.setAttribute("hidden", "hidden");
viewButtonEl.textContent = "보기";
tdEl.appendChild(viewButtonEl);
$(fileInputEl).on("change", function () {
if (this.files != null && this.files.length > 0) {
$(uploadButtonEl).text("변경");
$(viewButtonEl).removeAttr("hidden");
} else if (this.dataset.url != null) {
$(uploadButtonEl).text("변경");
$(viewButtonEl).removeAttr("hidden");
} else {
$(uploadButtonEl).text("등록");
$(viewButtonEl).attr("hidden", "hidden");
}
});
$(uploadButtonEl).on("click", function () {
$(fileInputEl).click();
});
$(viewButtonEl).on("click", function () {
let viewUrl = "";
if (fileInputEl.files.length != 0) {
viewUrl = (window.URL || window.webkitURL).createObjectURL(fileInputEl.files[0]);
} else {
viewUrl = fileInputEl.dataset.url;
}
window.open(viewUrl, "이미지", "width=500, height=500");
});
$(fileInputEl).trigger("change");
}
}

@ -0,0 +1,36 @@
class AddsSupport {
/**************************************************************************
* 서버의 파일 정보로 javascript File 객체 생성
**************************************************************************/
static async fnCreateFileFromFileInfo(fileInfo){
if(/^[a-zA-Z][\:]/.test(fileInfo.URL)){
fileInfo.URL = fileInfo.URL.substring(2);
}
let response = null;
try {
response = await fetch(fileInfo.URL);
} catch(error){
let data = new Blob();
let metadata = {
type: fileInfo.MIME_TYPE
};
let file = new File([data], fileInfo.FILE_NM, metadata);
file.id = fileInfo.FILE_ID;
file.url = fileInfo.URL;
return new Promise(resolve => { resolve(file); });
}
let data = await response.blob();
let metadata = {
type: fileInfo.MIME_TYPE
};
let file = new File([data], fileInfo.FILE_NM, metadata);
file.id = fileInfo.FILE_ID;
file.url = fileInfo.URL;
return new Promise(resolve => { resolve(file); });
}
}
Loading…
Cancel
Save