Scribd
Upload
2 views9 pages

uploadpage

The document is a React component for an Upload Page that allows users to upload a video along with a title, domain, and a series of questions and answers. It utilizes state management to handle form inputs and Axios for making a POST request to upload the data to a server. The component also includes styling for a visually appealing user interface.

Uploaded by

forads684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views9 pages

uploadpage

The document is a React component for an Upload Page that allows users to upload a video along with a title, domain, and a series of questions and answers. It utilizes state management to handle form inputs and Axios for making a POST request to upload the data to a server. The component also includes styling for a visually appealing user interface.

Uploaded by

forads684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

// import React, { useState } from 'react';

// import { useLocation } from 'react-router-dom';


// import axios from 'axios';

// const UploadPage = () => {


// const [domain, setDomain] = useState('');
// const [title, setTitle] = useState('');
// const [videoFile, setVideoFile] = useState(null);
// const [questionsAndAnswers, setQuestionsAndAnswers] = useState([{ question:
'', answer: '' }]);
// const { state } = useLocation();
// const email = state?.email;

// const handleAddQA = () => {


// setQuestionsAndAnswers([...questionsAndAnswers, { question: '', answer:
'' }]);
// };

// const handleQAChange = (index, field, value) => {


// const updatedQAs = [...questionsAndAnswers];
// updatedQAs[index][field] = value;
// setQuestionsAndAnswers(updatedQAs);
// };

// const handleSubmit = async (e) => {


// e.preventDefault();

// const formData = new FormData();


// formData.append('domain', domain);
// formData.append('title', title);
// formData.append('video', videoFile);
// formData.append('questionsAndAnswers', JSON.stringify(questionsAndAnswers));
// formData.append('uploadedBy', email);

// try {
// const response = await axios.post('http://localhost:5000/api/upload',
formData);

// if (response.status === 201) {


// alert('Video uploaded successfully!');
// setDomain('');
// setTitle('');
// setVideoFile(null);
// setQuestionsAndAnswers([{ question: '', answer: '' }]);
// } else {
// alert('Failed to upload video');
// }
// } catch (error) {
// console.error('Error uploading video:', error);
// alert('An error occurred while uploading');
// }
// };

// return (
// <div className="upload-page">
// <div className="background">
// <div className="shape"></div>
// <div className="shape"></div>
// </div>
// <div className="upload-container">
// <h3>Upload Video</h3>
// <form onSubmit={handleSubmit} className="upload-form">
// <div className="form-group">
// <label>Domain</label>
// <input
// type="text"
// value={domain}
// onChange={(e) => setDomain(e.target.value)}
// required
// />
// </div>
// <div className="form-group">
// <label>Title</label>
// <input
// type="text"
// value={title}
// onChange={(e) => setTitle(e.target.value)}
// required
// />
// </div>
// <div className="form-group">
// <label>Upload Video</label>
// <input
// type="file"
// onChange={(e) => setVideoFile(e.target.files[0])}
// required
// />
// </div>
// <div className="form-group">
// <label>Questions & Answers</label>
// {questionsAndAnswers.map((qa, index) => (
// <div key={index} className="qa-group">
// <input
// type="text"
// placeholder="Question"
// value={qa.question}
// onChange={(e) => handleQAChange(index, 'question',
e.target.value)}
// />
// <input
// type="text"
// placeholder="Answer"
// value={qa.answer}
// onChange={(e) => handleQAChange(index, 'answer',
e.target.value)}
// />
// </div>
// ))}
// <button type="button" className="add-qa-btn" onClick={handleAddQA}>
// + Add Another Q&A
// </button>
// </div>
// <button type="submit" className="submit-btn">
// Submit
// </button>
// </form>
// </div>
// <style>
// {`
// * {
// margin: 0;
// padding: 0;
// box-sizing: border-box;
// font-family: 'Poppins', sans-serif;
// }

// body {
// background-color: #080710;
// background-image: url('background.jpg');
// background-size: cover;
// background-position: center;
// }

// .upload-container {
// max-width: 600px;
// width: 100%;
// background: rgba(255, 255, 255, 0.13);
// padding: 40px;
// border-radius: 12px;
// backdrop-filter: blur(12px);
// border: 2px solid rgba(255, 255, 255, 0.1);
// box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
// position: absolute;
// transform: translate(-50%, -50%);
// top: 50%;
// left: 50%;
// text-align: center;
// }

// h3 {
// font-size: 26px;
// font-weight: 500;
// color: white;
// margin-bottom: 15px;
// }

// .form-group {
// margin-bottom: 18px;
// text-align: left;
// }

// .form-group label {
// font-size: 16px;
// font-weight: 500;
// color: white;
// }

// .form-group input {
// width: 100%;
// height: 45px;
// background: rgba(255, 255, 255, 0.1);
// border-radius: 5px;
// border: none;
// padding: 0 10px;
// margin-top: 6px;
// font-size: 14px;
// color: white;
// outline: none;
// transition: all 0.3s ease;
// }

// .form-group input:focus {
// border: 1px solid #66ff66;
// box-shadow: 0 0 6px #66ff66;
// transform: scale(1.02);
// }

// .qa-group {
// display: flex;
// flex-direction: column;
// gap: 10px;
// margin-bottom: 10px;
// }

// .qa-group input {
// padding: 10px;
// border-radius: 5px;
// background: rgba(255, 255, 255, 0.1);
// color: white;
// border: none;
// }

// .qa-group input:focus {
// border: 1px solid #4CAF50;
// box-shadow: 0 0 5px #4CAF50;
// transform: scale(1.02);
// }

// .add-qa-btn, .submit-btn {
// background: white;
// color: #080710;
// padding: 14px;
// border-radius: 5px;
// cursor: pointer;
// width: 100%;
// font-size: 16px;
// font-weight: bold;
// transition: all 0.3s ease;
// }

// .add-qa-btn:hover, .submit-btn:hover {
// background: #66ff66;
// transform: scale(1.05);
// }

// @media (max-width: 600px) {


// .upload-container {
// max-width: 90%;
// padding: 25px;
// }

// h3 {
// font-size: 22px;
// }
// .form-group input {
// padding: 8px;
// }

// .add-qa-btn, .submit-btn {
// font-size: 14px;
// padding: 12px;
// }
// }
// `}
// </style>
// </div>
// );
// };

// export default UploadPage;

import React, { useState } from "react";


import { useLocation } from "react-router-dom";
import axios from "axios";

const UploadPage = () => {


const [domain, setDomain] = useState("");
const [title, setTitle] = useState("");
const [videoFile, setVideoFile] = useState(null);
const [questionsAndAnswers, setQuestionsAndAnswers] = useState([
{ question: "", answer: "" },
]);
const { state } = useLocation();
const email = state?.email;

const handleAddQA = () => {


setQuestionsAndAnswers([...questionsAndAnswers, { question: "", answer: "" }]);
};

const handleQAChange = (index, field, value) => {


const updatedQAs = [...questionsAndAnswers];
updatedQAs[index][field] = value;
setQuestionsAndAnswers(updatedQAs);
};

const handleSubmit = async (e) => {


e.preventDefault();

const formData = new FormData();


formData.append("domain", domain);
formData.append("title", title);
formData.append("video", videoFile);
formData.append("questionsAndAnswers", JSON.stringify(questionsAndAnswers));
formData.append("uploadedBy", email);

try {
const response = await axios.post("http://localhost:5000/api/upload",
formData);

if (response.status === 201) {


alert("Video uploaded successfully!");
setDomain("");
setTitle("");
setVideoFile(null);
setQuestionsAndAnswers([{ question: "", answer: "" }]);
} else {
alert("Failed to upload video");
}
} catch (error) {
console.error("Error uploading video:", error);
alert("An error occurred while uploading");
}
};

return (
<div className="upload-page">
<div className="background">
<div className="shape"></div>
<div className="shape"></div>
</div>
<div className="upload-container">
<h3>Upload Video</h3>
<form onSubmit={handleSubmit} className="upload-form">
<div className="form-group">
<label>Domain</label>
<input type="text" value={domain} onChange={(e) =>
setDomain(e.target.value)} required />
</div>
<div className="form-group">
<label>Title</label>
<input type="text" value={title} onChange={(e) =>
setTitle(e.target.value)} required />
</div>
<div className="form-group">
<label>Upload Video</label>
<input type="file" onChange={(e) => setVideoFile(e.target.files[0])}
required />
</div>

<div className="qa-section">
<label>Questions & Answers</label>
<div className="qa-scrollable">
{questionsAndAnswers.map((qa, index) => (
<div key={index} className="qa-group">
<input
type="text"
placeholder="Question"
value={qa.question}
onChange={(e) => handleQAChange(index, "question",
e.target.value)}
/>
<input
type="text"
placeholder="Answer"
value={qa.answer}
onChange={(e) => handleQAChange(index, "answer",
e.target.value)}
/>
</div>
))}
</div>
<button type="button" className="add-qa-btn" onClick={handleAddQA}>
+ Add Another Q&A
</button>
</div><br/>

<button type="submit" className="submit-btn">


Submit
</button>
</form>
</div>

<style>
{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
background-color: #080710;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}

.upload-container {
max-width: 600px;
width: 100%;
background: rgba(255, 255, 255, 0.13);
padding: 40px;
border-radius: 12px;
backdrop-filter: blur(12px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
overflow: hidden;
}

h3 {
font-size: 26px;
font-weight: 500;
color: white;
margin-bottom: 15px;
}

.form-group {
margin-bottom: 18px;
text-align: left;
}

.form-group label {
font-size: 16px;
font-weight: 500;
color: white;
}

.form-group input {
width: 100%;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border: none;
padding: 0 10px;
margin-top: 6px;
font-size: 14px;
color: white;
outline: none;
}

.qa-section {
margin-top: 10px;
text-align: left;
}

.qa-scrollable {
max-height: 200px;
overflow-y: auto;
padding-right: 5px;
}

.qa-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
}

.qa-group input {
padding: 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: none;
}

.qa-group input:focus {
border: 1px solid #4CAF50;
box-shadow: 0 0 5px #4CAF50;
}

.add-qa-btn, .submit-btn {
background: white;
color: #080710;
padding: 14px;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}
.add-qa-btn:hover, .submit-btn:hover {
background: #66ff66;
transform: scale(1.05);
}

@media (max-width: 600px) {


.upload-container {
max-width: 90%;
padding: 25px;
}

h3 {
font-size: 22px;
}

.form-group input {
padding: 8px;
}

.add-qa-btn, .submit-btn {
font-size: 14px;
padding: 12px;
}
}
`}
</style>
</div>
);
};

export default UploadPage;

You might also like