[JavaScript] _setFileUploadSendResult로 파일 업로드 구현하기

오늘 파일 업로드 기능 구현하다가 생긴 트러블 슈팅 정리

파일 업로드할 때 popup window 써서 처리하려니 이벤트 흐름 파악이 중요했음.

 

1. 기본 구조

btnFileUpload 버튼 클릭 → eventFileUpload 함수 호출 → _setUploadWindow로 팝업 오픈 → 팝업에서 파일 선택 후 확인 → _setFileUploadSendResult 콜백으로 결과 받음

 

2. 실제 구현

<!-- 파일 업로드 버튼 이벤트 -->
$(document).on("click", "[id^='btnFileUpload']", function(e) {
    var rowIndex = $(this).closest("tr").index();  // 현재 행 인덱스
    eventFileUpload(rowIndex);
    e.preventDefault();
});

 

 

 

파일 업로드 팝업 열기

function eventFileUpload(rowIndex) {
    var idx = rowIndex || 0;  // undefined면 0
    var path = "설정된 파일 저장 경로";
    
    // 파일 업로드 팝업에 넘길 파라미터
    var param = 'limitCount=10' +  // 최대 파일 수
               '&atchFileId=' +    // 신규면 빈값
               '&atchType=file' +  
               '&dirPath=' + path +
               '&kindCd=ABBS' +    // 업무구분코드
               '&returnParam=new|' + idx;  // 상태|행인덱스
    
    // 기존 파일이 있는 경우
    if($('#atchFileId').val()) {
        param = '...기존 파일ID 포함한 파라미터';
    }
    
    _setUploadWindow(encodeURI(param));  // 팝업 오픈
}

 

 

 

파일 업로드 결과 처리 (문제 발생 구간!!!!!!)

function _setFileUploadSendResult(data, returnParam) {
    if(!data || !data[0]) return;  // 데이터 없으면 종료
    
    var fileInfo = data[0];
    var idx = returnParam.split('|')[1];  // 행 인덱스 추출
    var currentRow = $('#fileTableBody tr').eq(idx);
    
    // 1. 파일명 표시
    currentRow.find('input[name="fileNm"]')
        .val(fileInfo.orgFileNm);
    
    // 2. 파일 정보 저장 (나중에 form submit할 때 사용)
    currentRow.find('.file-info')
        .html(JSON.stringify(fileInfo));
    
    // 3. atchFileId 처리 (이거 놓쳐서 한참 헤맴)
    if(!$('#atchFileId').length) {
        $('<input>').attr({
            type: 'hidden',
            id: 'atchFileId',
            name: 'atchFileId',
            value: fileInfo.atchFileId
        }).appendTo('#boardForm');
    } else {
        $('#atchFileId').val(fileInfo.atchFileId);
    }
}

 

 

 

3. 트러블슈팅

1. 팝업에서 선택한 파일 정보가 안 넘어올 때
   • returnParam 구조 확인 필수 (format: "상태|인덱스")
   • data[0] 체크 누락하지 말것
2. 여러 파일 첨부시 인덱스 꼬이는 문제
   • tr.index()로 현재 행 찾을 때 전체 테이블 기준이 아닌 tbody 내 인덱스인지 확인
   • 행 추가/삭제시 인덱스 재정렬 잊지 말기
3. form submit할 때 파일 정보 누락
   • file-info div에 JSON.stringify()로 저장했던 정보 파싱해서 사용
   • atchFileId 값 체크 (hidden input 생성 시점 주의)

 

 

4. 알게된 점

• 팝업에서 실제 물리적 파일은 이미 서버에 업로드된 상태
• _setFileUploadSendResult는 그 결과값만 받아서 화면에 표시하는 용도
• form submit할 때는 파일 정보만 전송 (실제 파일X)
• 코드 재사용 위해서는 이벤트 흐름 파악이 중요

끝!