Drag and drop files

This is an example of how to attach a file to RealGrid using Drag and Drop.
Drag the files and drop them anywhere in the row.

In the example, when a file is dropped, the file is encoded in base64 and stored in the grid.
Process the file by transmitting the information stored in the grid to the server, or use the method of transmitting the file to the server at the time of FileDrop for processing.

In the example implementation, new attached files were stored and processed in the grid, but converting and retrieving attached files stored on the server to base64 even when query may cause problems with server performance or grid performance, so existing registered files You must import it in link form or download it in a separate window.

※ Does not work in IE.
※ You must implement the server processing part yourself.

var outputs = [];
var gridContainer = gridView.getContainer();
 
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 = {};
           //Add required properties individually
           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);
     }
}
 
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();
 
  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("Please drop the file in the correct location");
    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){
   //Delete newly registered files from the grid
   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 connection Move text to top in cell merge