diff --git a/src/edit_ready_question/EditReadyQuestion.jsx b/src/edit_ready_question/EditReadyQuestion.jsx index 40a060a..046cf9e 100644 --- a/src/edit_ready_question/EditReadyQuestion.jsx +++ b/src/edit_ready_question/EditReadyQuestion.jsx @@ -1,4 +1,4 @@ -import React, { useState,useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import '../question/question.css'; import { FaTimes } from 'react-icons/fa'; import { useDropzone } from 'react-dropzone'; @@ -8,7 +8,6 @@ import axios from 'axios'; import { useParams, useLocation, useNavigate } from 'react-router-dom'; import AlertModal from '../AlertModal/AlertModal'; // Import the AlertModal component - const EditReadyQuestion = () => { document.title = "Ready Question"; const { paperId } = useParams(); @@ -21,14 +20,58 @@ const EditReadyQuestion = () => { const [marks, setMarks] = useState(location.state.marks); const [image, setImage] = useState(location.state.image); const [loading, setLoading] = useState(false); - const [loadingSpinner,setLoadingSpinner] = useState(true); + const [loadingSpinner, setLoadingSpinner] = useState(true); const [modalIsOpen, setModalIsOpen] = useState(false); const [modalMessage, setModalMessage] = useState(''); const [isError, setIsError] = useState(false); const navigate = useNavigate(); - useEffect(()=>{setTimeout(()=>{setLoadingSpinner(false)},1000);},[]); - console.log(location.state); + useEffect(() => { + setTimeout(() => { + setLoadingSpinner(false); + }, 1000); + }, []); + + // Handle pasting images in question description + const handlePaste = async (event) => { + const clipboardData = event.clipboardData; + const items = clipboardData.items; + + for (const item of items) { + if (item.type.includes("image")) { + event.preventDefault(); // Prevent default paste behavior + const file = item.getAsFile(); + const formData = new FormData(); + formData.append("file", file); + formData.append("upload_preset", "question"); + + setQuestionDescription((prev) => prev + "\nUploading image..."); + + try { + const uploadResponse = await axios.post( + "http://localhost:5000/paper/upload", + formData, + { + headers: { "Content-Type": "multipart/form-data" }, + } + ); + + const imageUrl = uploadResponse.data.url; + + // Replace "Uploading image..." with the actual image markdown link + setQuestionDescription((prev) => + prev.replace("Uploading image...", `![image](${imageUrl})`) + ); + } catch (error) { + console.error("Image upload failed:", error.message); + setQuestionDescription((prev) => + prev.replace("Uploading image...", "Image upload failed.") + ); + } + } + } + }; + const handleEditQuestion = async () => { if (!questionheading || !questionDescription || !compilerReq || !marks) { setModalMessage('Please fill in all the required fields.'); @@ -109,104 +152,105 @@ const EditReadyQuestion = () => { onDrop, maxSize: 10485760, // 10MB limit }); -console.log(image); + return ( <>
- {loadingSpinner ? (<>) : (<> -
-

Edit Ready Question

- -
- - setQuestionHeading(e.target.value)} - placeholder="Enter your question heading" - required - className="add_question_input" - /> -
- -
- -