Skip to content
Snippets Groups Projects

add endpoint for uploading profile pic signup

parent f13b0093
1 merge request!2add endpoint for uploading profile pic signup
...@@ -15,6 +15,7 @@ import { ...@@ -15,6 +15,7 @@ import {
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"; import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { useState } from "react"; import { useState } from "react";
import axios from "axios";
const PodcasterRegister = () => { const PodcasterRegister = () => {
const history = useHistory(); const history = useHistory();
...@@ -22,7 +23,7 @@ const PodcasterRegister = () => { ...@@ -22,7 +23,7 @@ const PodcasterRegister = () => {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [cover_art, setCoverArt] = useState(""); const [cover_art, setCoverArt] = useState<any>(null);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
...@@ -30,7 +31,12 @@ const PodcasterRegister = () => { ...@@ -30,7 +31,12 @@ const PodcasterRegister = () => {
const handleUsernameChange = (e) => setUsername(e.target.value); const handleUsernameChange = (e) => setUsername(e.target.value);
const handlePasswordChange = (e) => setPassword(e.target.value); const handlePasswordChange = (e) => setPassword(e.target.value);
const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value); const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);
const handleCoverArtChange = (e) => setCoverArt(e.target.value); // const handleCoverArtChange = (e) => setCoverArt(e.target.value);
const handleCoverArtChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files) {
setCoverArt(event.target.files[0]);
}
};
const handleNameChange = (e) => setName(e.target.value); const handleNameChange = (e) => setName(e.target.value);
const handleDescriptionChange = (e) => setDescription(e.target.value); const handleDescriptionChange = (e) => setDescription(e.target.value);
...@@ -64,35 +70,42 @@ const PodcasterRegister = () => { ...@@ -64,35 +70,42 @@ const PodcasterRegister = () => {
}; };
const onSubmit = async () => { const onSubmit = async () => {
const url = "http://localhost:3000"; // const url = "http://localhost:3000";
const isPodcaster = true; // const isPodcaster = true;
console.log(email); // console.log(email);
try { try {
const res = await fetch(`${url}/api/v1/register/podcaster`, { const imageFormData = new FormData();
method: "POST", imageFormData.append("file", cover_art);
headers: { const imageUploadResponse = await axios.post(
"Content-Type": "application/json", "http://localhost:3000/api/v1/upload",
}, imageFormData,
body: JSON.stringify({ {
headers: {
"Content-Type": "multipart/form-data",
},
withCredentials: true,
}
);
const imageFilePath = `http://localhost:3000${imageUploadResponse.data.data.file_path}`;
const res = await axios.post(
"http://localhost:3000/api/v1/register/podcaster",
{
username, username,
email, email,
password, password,
cover_art, cover_art: imageFilePath,
description, description,
name, name,
isPodcaster, isPodcaster: true,
}), },
credentials: "include", {
}); headers: {
"Content-Type": "application/json",
console.log(res); },
if (!res.ok) { withCredentials: true,
const errorResponse = await res.json(); }
throw new Error(errorResponse.message || "Registration failed."); );
} alert("Registration successful!");
const response = await res.json();
alert("Form submitted!");
history.push("/login"); history.push("/login");
} catch (err) { } catch (err) {
console.error(err); console.error(err);
...@@ -195,7 +208,6 @@ const PodcasterRegister = () => { ...@@ -195,7 +208,6 @@ const PodcasterRegister = () => {
accept="image/*" accept="image/*"
border="none" border="none"
padding="0" padding="0"
value={cover_art}
onChange={handleCoverArtChange} onChange={handleCoverArtChange}
></Input> ></Input>
</FormControl> </FormControl>
......
...@@ -14,6 +14,7 @@ import { ...@@ -14,6 +14,7 @@ import {
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"; import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { useState } from "react"; import { useState } from "react";
import axios from "axios";
const ReviewerRegister = () => { const ReviewerRegister = () => {
const history = useHistory(); const history = useHistory();
...@@ -21,13 +22,19 @@ const ReviewerRegister = () => { ...@@ -21,13 +22,19 @@ const ReviewerRegister = () => {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [profile_picture, setProfilePicture] = useState(""); const [profile_picture, setProfilePicture] = useState<any>(null);
const handleEmailChange = (e) => setEmail(e.target.value); const handleEmailChange = (e) => setEmail(e.target.value);
const handleUsernameChange = (e) => setUsername(e.target.value); const handleUsernameChange = (e) => setUsername(e.target.value);
const handlePasswordChange = (e) => setPassword(e.target.value); const handlePasswordChange = (e) => setPassword(e.target.value);
const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value); const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);
const handleProfilePictureChange = (e) => setProfilePicture(e.target.value); const handleProfilePictureChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
if (event.target.files) {
setProfilePicture(event.target.files[0]);
}
};
const [showPassword1, setShowPassword1] = useState(false); const [showPassword1, setShowPassword1] = useState(false);
const [showPassword2, setShowPassword2] = useState(false); const [showPassword2, setShowPassword2] = useState(false);
...@@ -57,33 +64,38 @@ const ReviewerRegister = () => { ...@@ -57,33 +64,38 @@ const ReviewerRegister = () => {
}; };
const onSubmit = async () => { const onSubmit = async () => {
const url = "http://localhost:3000";
const isPodcaster = false;
console.log(email);
try { try {
const res = await fetch(`${url}/api/v1/register/reviewer`, { const imageFormData = new FormData();
method: "POST", imageFormData.append("file", profile_picture);
headers: { const imageUploadResponse = await axios.post(
"Content-Type": "application/json", "http://localhost:3000/api/v1/upload",
}, imageFormData,
body: JSON.stringify({ {
headers: {
"Content-Type": "multipart/form-data",
},
withCredentials: true,
}
);
const imageFilePath = `http://localhost:3000${imageUploadResponse.data.data.file_path}`;
const res = await axios.post(
"http://localhost:3000/api/v1/register/reviewer",
{
username, username,
email, email,
password, password,
profile_picture, profile_picture: imageFilePath,
isPodcaster, isPodcaster: false,
}), },
credentials: "include", {
}); headers: {
"Content-Type": "application/json",
console.log(res); },
if (!res.ok) { withCredentials: true,
const errorResponse = await res.json(); }
throw new Error(errorResponse.message || "Registration failed."); );
} alert("Registration successful!");
const response = await res.json();
alert("Form submitted!");
history.push("/login"); history.push("/login");
} catch (err) { } catch (err) {
console.error(err); console.error(err);
...@@ -178,7 +190,6 @@ const ReviewerRegister = () => { ...@@ -178,7 +190,6 @@ const ReviewerRegister = () => {
accept="image/*" accept="image/*"
border="none" border="none"
padding="0" padding="0"
value={profile_picture}
onChange={handleProfilePictureChange} onChange={handleProfilePictureChange}
></Input> ></Input>
</FormControl> </FormControl>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment