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>;
};