igGrid file upload on editing or adding a row

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

CSS

.file-upload {
  background-color: white;
  width: 100%;
  height: 31px;
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

JavaScript

$(function () {
      window.uploadedFiles = {};
      
      const data = [
        { id: 1, name: "Initial row", fileName: "" }
      ];

      $.ig.EditorProviderFile = $.ig.EditorProvider.extend({
        createEditor: function (callbacks, key, options, tabIndex, format, element) {
          element = element || $("<input class='file-upload'/>");
          element.attr("type", "file");
          this._super(callbacks, key, options, tabIndex, format, element);
          element.on("change", $.proxy(this.keyDown, this));
          this.editor = { element: element };
          return element;
        },
        keyDown: function (evt) {
          var files = this.editor.element[0].files;
          if (files.length) {
            var file = files[0];
            if (!this.validateFile(file)) {
              this.editor.element.val(""); // Reset if invalid
              return;
            }
          }

          var ui = { owner: this.editor.element };
          ui.owner.element = this.editor.element;
          this.callbacks.keyDown(evt, ui, this.columnKey);
          this.callbacks.textChanged(evt, ui, this.columnKey);
        },
        validateFile: function (file) {
          const allowedTypes = ["application/pdf", "image/jpeg", "image/png"];
          const maxSize = 1 * 1024 * 1024; //1MB

          if (!allowedTypes.includes(file.type)) {
            alert("Invalid file type. Only PDF, JPG, and PNG are allowed.");
            console.log('invalid file type')
            return false;
          }
          if (file.size > maxSize) {
            alert("File is too large. Max allowed size is 2MB.");
            console.log('file is too large')
            return false;
          }
          return true;
        },
        getValue: function () {
          var files = this.editor.element[0].files;
          return files.length ? files[0].name : "";
        },
        setValue: function (val) {
          // Ignored - can't set file input programmatically
   ...