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

main
이범준 3 months ago
parent b88495562c
commit e1644c16ff

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

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

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