Saving a fabri.js canvas to postgres database

I'm trying to save my canvas and few other data to my postgres database. In the React frontend i created an interface and a method to send my data to the Django backend. The problem I got, is that I always get the following message from the server: {sucess: false, error: "Canvas() got unexpected keyword arguments: 'data'"} error: "Canvas() got unexpected keyword arguments: 'data'" sucess: false

Here is my frontedn code:

import { Button } from "@mui/material";
import fabric from "fabric/fabric-impl";
import { saveCanvasData } from "../api/CanvasApi";
import { Canvas } from "../model/Canvas";

export const SaveCanvasButton = ({
  fabricRef,
}: {
  fabricRef: React.MutableRefObject<fabric.Canvas | null>;
}) => {
  const handleClick = () => {
    const jsonCanvas = JSON.stringify(fabricRef.current?.toJSON());

    const canvasData: Canvas = {
      aedate: new Date(),
      aeuser: "test",
      data: jsonCanvas,
      edate: new Date(),
      euser: "test",
      pid: "test",
    };

    console.log(canvasData);
    if (canvasData) {
      saveCanvasData(canvasData);
    }
  };

  return (
    <Button onClick={handleClick} color="inherit">
      Canvas Speichern
    </Button>
  );
};

Backend Code:

from django.db import models
from django.core.validators import RegexValidator

# Validierung des Inputs gem. Datenmodell mit regulären Ausdrücken
ID_validator = RegexValidator(
    regex=r"^\d{0,7}[1-9]$",
    message="Die ID muss eine Länge von 8 haben und darf nicht mit Null beginnen.",
    code="invalid_id",
)


class Canvas(models.Model):
    # CID = models.CharField(max_length=8, unique=True, verbose_name="Canvas ID", validators=[ID_validator])  Wird nicht mehr benötigt, da automatisch erzeugt
    PID = models.CharField(
        max_length=8, verbose_name="Projekt ID", validators=[ID_validator]
    )
    EDATE = models.DateTimeField(verbose_name="Erstellungsdatum")
    EUSER = models.CharField(
        max_length=8, verbose_name="Ersteller ID", validators=[ID_validator]
    )
    AEDATE = models.DateTimeField(verbose_name="Aenderungsdatum")
    AEUSER = models.CharField(
        max_length=8, verbose_name="Bearbeiter ID", validators=[ID_validator]
    )
    Data = (
        models.JSONField(default=None, blank=True, null=True, verbose_name="Canvas Daten")
    )  # ist im prinzip alles was in dem canvas gespeichert wird als json gespeichert, alle objekte in einem array

Interface for CanvasData:

export interface Canvas {
  aedate: Date;
  aeuser: string;
  data: string;
  edate: Date;
  euser: string;
  pid: string;
}

I already tried to change up the type to string and jsonfield. It already worked, when it was just the jsonfield attribute:

import { Button } from "@mui/material";
import fabric from "fabric/fabric-impl";
import { saveCanvasData } from "../api/CanvasApi";

export const SaveCanvasButton = ({
  canvasRef,
  fabricRef,
}: {
  canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
  fabricRef: React.MutableRefObject<fabric.Canvas | null>;
}) => {
  const handleClick = () => {
    const canvasData = JSON.stringify(fabricRef.current?.toJSON());

    console.log(canvasData);
    if (canvasData) {
      saveCanvasData(canvasData);
    }
  };

  return <Button onClick={handleClick}>Canvas speichern</Button>;
};

Back to Top