파일 Drag and Drop

RealGrid에 파일첨부를 Drag and Drop 으로 처리할 수 있는 예제 입니다.
파일들을 Drag 하여 행의 아무곳에나 Drop 해보세요.

예제에서는 파일이 Drop되면 base64로 해당 파일을 encoding하여 그리드에 저장하게 처리하였습니다.
그리드에 저정된 해당 정보를 서버로 전송하여 파일을 처리하시거나 FileDrop 시점에 파일을 서버로 전송하여 처리하는 방법을 사용하세요.

예제 구현상 신규 첨부파일을 그리드에 저장하여 처리하였으나 조회시에도 서버에 저장된 첨부파일들을 base64로 변환하여 가져오는것은 서버성능이나 그리드성능에 문제가 발생 할 수 있으니 기존 등록된 파일들은 link 형태로 가져오게 처리하시거나 별도의 창으로 다운로드 받을 수 있게 처리하셔야 합니다.

※ IE에서는 동작하지 않습니다.
※ 서버 처리 부분은 직접 구현하셔야 합니다.

var outputs = [];
 
function fileTobase64(index, cellIndex) {
    if (files.length > index) {
        var file = files[index];
        var reader = new FileReader();
 
        reader.onload = function(){
          var text = reader.result;
          var file = files[index];
          
          var outs = {};
          //필요한 속성들 개별 추가
          outs['fileName'] = file.name;
          outs['dataURL'] = text;
          outs['base64Data'] = text.substr(text.indexOf(",")+1);
 
          outputs.push(outs);
          
          if (files.length > (index+1)) {
            fileTobase64(index+1, cellIndex);
          } else {
            dataProvider.setValue(cellIndex.dataRow, "Files", outputs)
          }
 
        };
        reader.readAsDataURL(file);
    }
}
 
// drag될때 cell을 강조표시.
function dragEnterHandler(ev) {
  gridContainer.querySelectorAll(".rg-data-cell").forEach(element => {
    element.ondragenter = (event) => {
        element.classList.add("drag-over-cell");
    }
    element.ondragleave = (event) => {
      const relatedTarget = event.relatedTarget;
      if (!relatedTarget || !element.contains(relatedTarget)) {
          element.classList.remove("drag-over-cell");
      }
    }
    element.ondrop = element.ondragover = (event) => {
      event.preventDefault();
    }
  })
}
 
// 강조표시된 셀을 제거.
function dragLeaveHandler(ev) {
  if ( !ev.relatedTarget || !gridContainer.contains(ev.relatedTarget)) {
    gridContainer.querySelectorAll(".rg-data-cell").forEach(element => {
        element.classList.remove("drag-over-cell");
    });
  }
}
 
 
function dragOverHandler(ev) {
  ev.preventDefault();
}
 
function dropHandler(ev) {
  ev.preventDefault();
 
  // 강조표시된 셀을 제거하고 td의 이벤트 제거
  gridContainer.querySelectorAll(".rg-data-cell").forEach(element => {
    element.ondrop = element.ondragenter = element.ondragleave = element.ondragover = null;
    element.classList.remove("drag-over-cell");
  });
 
  var cellIndex = gridView.mouseToIndex(ev.clientX, ev.clientY, true);
  console.log(cellIndex);
 
  if (cellIndex.dataRow == -1) {
    alert("정확한 위치에 파일을 drop 하세요");
    return false;
  }
 
  if (ev.dataTransfer.items) {
    outputs = [];
    files = [];
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        files.push(ev.dataTransfer.items[i].getAsFile());
    }
 
    fileTobase64(0, cellIndex);  
  } 
}
 
function fileDelete(el){
  //신규 등록된 파일들 그리드에서 삭제
  var dataRow = parseInt(el.getAttribute("datarow"));
  var fileName = el.getAttribute("filename");
 
  var filesData = dataProvider.getValue(dataRow, "Files");
  filesData = filesData.filter(function( obj ) {
    return obj.fileName !== fileName;
  });
 
  dataProvider.setValue(dataRow, "Files", filesData);
}

ColorPicker 연결 셀 병합에서 텍스트를 상단으로 이동