add image connection to database

This commit is contained in:
luisa.bellitto 2025-06-27 13:55:08 +02:00
parent 431bf8de86
commit e0d967e4f3
6 changed files with 67 additions and 371 deletions

View file

@ -13,13 +13,12 @@ import {
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import EditSquareIcon from "@mui/icons-material/EditSquare";
import "../styles/colors.css";
import "../styles/fonts.css";
import "./changeAvatarDialog.css";
import ButtonRotkehlchen from "./ButtonRotkehlchen";
import { useFilePicker } from "use-file-picker";
import Username from "./Username";
import "./username.css"
import "./username.css";
import api from "../api/axios";
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
"& .MuiDialogContent-root": {
@ -37,6 +36,26 @@ export default function AvatarDialog({
ownAccount: boolean;
username: string;
}) {
const [profilePicture, setProfilePicture] = React.useState<string | null>(
null
);
const saveProfilePicture = async () => {
try {
const response = await api.post("/profile/updateProfilePicture", {
profilePicture: profilePicture,
});
setProfilePicture(response.data.data.profilePicture);
console.log(
"Profile picture saved successfully:",
response.data.data.profilePicture
);
setOpen(false); // Close the dialog after saving
} catch (error) {
console.error("Error saving profile picture:", error);
}
};
const { openFilePicker, filesContent, loading, clear } = useFilePicker({
accept: ".png, .jpg, .jpeg",
multiple: false,
@ -61,9 +80,6 @@ export default function AvatarDialog({
clear(); // Reset the selected image when closing
setOpen(false);
};
const handleSaveChanges = () => {
setOpen(false);
};
return (
<React.Fragment>
@ -154,7 +170,7 @@ export default function AvatarDialog({
style="primary"
label="Save Changes"
type="submit"
onClick={handleSaveChanges}
onClick={saveProfilePicture}
/>
<ButtonRotkehlchen
style="secondary"