ReactJs editor.file undefined

ReactJs editor.file undefined

aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0

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;

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,103Questions: 1Answers: 2,582
    Answer ✓

    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

  • aChinchillaaChinchilla Posts: 9Questions: 3Answers: 0

    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;
    
Sign In or Register to comment.