ReactJs editor.file undefined

aChinchilla

I have this code that returns an img tag with full URL and it works. I try to retrieve the name of the filename using editor.file and I get the error below.

Here is my code

If I replace the commented out line 50 with 49 the code works.

import "./datatables.css";
import React, { Component } from "react";
import $ from "jquery";
import axios from "axios";

import "datatables.net-dt/css/jquery.dataTables.min.css";
import "datatables.net-editor-dt/css/editor.dataTables.min.css";
import "datatables.net-select-dt/css/select.dataTables.min.css";
import "datatables.net-buttons-dt/css/buttons.dataTables.min.css";
require("datatables.net");
require("datatables.net-buttons");
require("datatables.net-buttons/js/buttons.print.min.js");
require("datatables.net-select");
require("datatables.net-editor");

export class Tbl extends Component {
  constructor(props) {
    super(props);
    this.dataTable = null;
    this.editor = null;
  }

  componentDidMount() {
    this.$el = $(this.el);
    this.editor = new $.fn.dataTable.Editor({
      ajax: {
        create: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
        edit: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
        remove: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
      },
      table: this.$el,
      fields: [
        { label: "Name:", name: "first_name" },
        { label: "email:", name: "last_name" },
        {
          label: "Image:",
          name: "image",
          type: "upload",
          display: function (file_id) {
            return '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/' + this.editor.file( 'files', file_id ).filename+'"/>'
            //return '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/cat1.jpg"/>';
          },
          clearText: "Clear",
          noImageText: "No image",
        },
      ],
    });
    this.dataTable = this.$el.DataTable({
      dom: "Blrtip",
      ajax: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
      columns: [
        { title: "Name", data: "first_name" },
        { title: "E-mail", data: "last_name" },
        {
          data: "image",
          render: function (file_id) {
            return '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/' + this.editor.file( 'files', file_id ).filename+'"/>'
            //return '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/cat1.jpg"/>';
          },
          defaultContent: "No image",
          title: "Image",
        },
      ],
      select: {
        style: "os",
        selector: "td:first-child",
      },
      buttons: [
        { extend: "create", editor: this.editor },
        { extend: "edit", editor: this.editor },
        { extend: "remove", editor: this.editor },
      ],
    });
    $(this.dataTable.table().container()).on(
      "click",
      "tbody td:not(:first-child)",
      (e) => {
        console.log("Click e", e);
        this.editor.inline(e.target);
      }
    );
    this.dataTablesRef = React.createRef();
  }

  componentWillUnmount() {
    this.dataTable.destroy(true);
  }

  search = (value) => {
    this.dataTable.search(value).draw();
  };

    editor = () => {
    return this.editor;
  };

  render() {
    return (
      <table
        className="display"
        width="100%"
        ref={(el) => (this.el = el)}
      ></table>
    );
  }
}

export default Tbl;

colin

It's a context issue. The this.editor is no longer in scope, as the this inside the display function would have a different context.

One way to fix it would be to just use editor as the variable (rather than this.editor), as in this example, and then set this.editor = editor at line 57,

Colin

aChinchilla

Thank you @colin that worked for me.

here is my new working code.

Line 24,25 and 64 did the job.

import "./datatables.css";
import React, { Component } from "react";
import $ from "jquery";

import "datatables.net-dt/css/jquery.dataTables.min.css";
import "datatables.net-editor-dt/css/editor.dataTables.min.css";
import "datatables.net-select-dt/css/select.dataTables.min.css";
import "datatables.net-buttons-dt/css/buttons.dataTables.min.css";
require("datatables.net");
require("datatables.net-buttons");
require("datatables.net-buttons/js/buttons.print.min.js");
require("datatables.net-select");
require("datatables.net-editor");

export class Tbl extends Component {
  constructor(props) {
    super(props);
    this.dataTable = null;
    this.editor = null;
  }

  componentDidMount() {
    this.$el = $(this.el);
    var editor;
    editor = new $.fn.dataTable.Editor({
      ajax: {
        create: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
        edit: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
        remove: {
          type: "POST",
          url: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
        },
      },
      table: this.$el,
      fields: [
        { label: "Name:", name: "first_name" },
        { label: "email:", name: "last_name" },
        {
          label: "Image:",
          name: "image",
          type: "upload",
          display: function (file_id) {
            try {
              return (
                '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/' +
                this.editor.file("files", file_id).filename +
                '"/>'
              );
            } catch (e) {
              console.debug(e);
            }
          },
          clearText: "Clear",
          noImageText: "No image",
        },
      ],
    });
    this.editor = editor;
    this.dataTable = this.$el.DataTable({
      dom: "Blrtip",
      ajax: "https://6ewrylky9f.execute-api.us-east-2.amazonaws.com/dev/getcontacts",
      columns: [
        { title: "Name", data: "first_name" },
        { title: "E-mail", data: "last_name" },
        {
          data: "image",
          render: function (file_id) {
            try {
              return (
                '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/' +
                editor.file("files", file_id).filename +
                '"/>'
              );
              //return '<img src="https://datatables-editor.s3.us-east-2.amazonaws.com/cat1.jpg"/>';
            } catch (e) {
              console.debug(e);
            }
          },
          defaultContent: "No image",
          title: "Image",
        },
      ],
      select: {
        style: "os",
        selector: "td:first-child",
      },
      buttons: [
        { extend: "create", editor: this.editor },
        { extend: "edit", editor: this.editor },
        { extend: "remove", editor: this.editor },
      ],
    });
    $(this.dataTable.table().container()).on(
      "click",
      "tbody td:not(:first-child)",
      (e) => {
        console.log("Click e", e);
        this.editor.inline(e.target);
      }
    );
    this.dataTablesRef = React.createRef();
  }

  componentWillUnmount() {
    this.dataTable.destroy(true);
  }

  search = (value) => {
    this.dataTable.search(value).draw();
  };

  editor = () => {
    return this.editor;
  };

  render() {
    return (
      <table
        className="display"
        width="100%"
        ref={(el) => (this.el = el)}
      ></table>
    );
  }
}

export default Tbl;