Skip to content

Commit

Permalink
Merge pull request #146 from ReCoded-Org/i146-add_upload_functions
Browse files Browse the repository at this point in the history 
added cv/ image upload functions
  • Loading branch information
@RastMustafa
RastMustafa authored Aug 30, 2022
2 parents b1c3d94 + 14cbc4f commit d97ab5a
Show file tree
Hide file tree
Showing 11 changed files with 347 additions and 383 deletions.
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import NgoProfilePage from "./containers/NgoProfilePage";
import Register from "./components/Register/Register";
import Protected from "./services/Protected";
import OurTeam from "./containers/OurTeam";
import VolunteerProfile from "./containers/VolunteerProfile/VolunteerProfile";
import VolunteerPage from "../src/containers/VolunteerPage";
import React, { useState, useEffect } from "react";
import { Navigate } from "react-router-dom";

Expand Down Expand Up @@ -43,7 +43,7 @@ function App() {
path='/volunteer-profile'
element={
<Protected isLoggedIn={isLoggedAsVolunteer}>
<VolunteerProfile
<VolunteerPage
userId={localStorage.getItem("userId")}
/>
</Protected>
Expand Down
46 changes: 45 additions & 1 deletion src/components/AdminDashboardHeroSection/EditInfoForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,44 @@ function EditInfoForm({ userId }) {
const [info, setInfo] = useState([]);
const [formValidation, setFormValidation] = useState(false);
const [notfication, setNotification] = useState(false);
const [eventImage, setEventImage] = useState(null) // for uploadig the photo
const [profileImage, setProfileImage] = useState(null) // for uploadig the photo

// Upload Functions START:

function onInputChange1(e) {
// console.log(e.target.value);
// console.log(e.target.files);
setEventImage(e.target.files[0])
}
function onInputChange2(e) {
// console.log(e.target.value);
// console.log(e.target.files);
setProfileImage(e.target.files[0])
}

function handleSubmit(e) {
e.preventDefault();

const data = new FormData()


data.append('file', eventImage)
data.append('file', profileImage)
alert('data', data)

axios.post('//localhost:5000/upload', data)
.then((response)=> {
alert('Success') // he adds the toast here and below

})
.catch((e) => {
alert('Error', e)
})

}

// END

function handleChange(e) {
setInfo({ ...info, [e.target.name]: e.target.value });
Expand Down Expand Up @@ -144,6 +182,8 @@ function EditInfoForm({ userId }) {
Select the Event Photo
</label>
<input
accept="image/jpeg"
onChange={(e)=> onInputChange1(e)}
className='text-gray-700 focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none'
type='file'
placeholder=''
Expand All @@ -154,6 +194,8 @@ function EditInfoForm({ userId }) {
Select Profile Photo
</label>
<input
accept="image/jpeg"
onChange={(e)=> onInputChange2(e)}
className='text-gray-700 focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none'
type='file'
placeholder=''
Expand Down Expand Up @@ -273,9 +315,10 @@ function EditInfoForm({ userId }) {
<textarea
minLength='50'
name='message'
onChange={(e) =>
onChange={(e) => {
handleChange(e)
}
}
className='
form-control text-gray-700 border-gray-300 focus:text-gray-700 m-0 block w-full rounded border border-solid bg-white bg-clip-padding px-3 py-1.5 text-base font-normal transition
ease-in-out focus:border-blue-600 focus:bg-white focus:outline-none
Expand Down Expand Up @@ -305,6 +348,7 @@ function EditInfoForm({ userId }) {
setShowModal(false);
addComment.mutate(info);
setNotification(true);
handleSubmit(e)
}}
>
Save Changes
Expand Down
33 changes: 33 additions & 0 deletions src/components/NgoProfilePageHeroSection/EditInfoForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,36 @@ function EditInfoForm() {
const [info, setInfo] = useState([]);
const [formValidation, setFormValidation] = useState(false);
const [notfication, setNotification] = useState(false);
const [file, setFile] = useState(null) // for uploadig the photo

// Upload Functions START:

function onInputChange(e) {
// console.log(e.target.value);
// console.log(e.target.files);
setFile(e.target.files[0])
}

function handleSubmit(e) {
e.preventDefault();

const data = new FormData()

data.append('file', file)

axios.post('//localhost:5000/upload', data)
.then((response)=> {
alert('Success') // he adds the toast here and below

})
.catch((e) => {
alert('Error', e)
})

}

// END


function handleChange(e) {
setInfo({ ...info, [e.target.name]: e.target.value });
Expand Down Expand Up @@ -127,6 +157,8 @@ function EditInfoForm() {
Select the Event Photo
</label>
<input
onChange={(e)=> onInputChange(e)}
accept="image/jpeg"
className='text-gray-700 focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none'
type='file'
placeholder=''
Expand Down Expand Up @@ -278,6 +310,7 @@ function EditInfoForm() {
setShowModal(false);
addComment.mutate(info);
setNotification(true);
handleSubmit(e)
}}
>
Save Changes
Expand Down
4 changes: 2 additions & 2 deletions src/components/VolunteerProfile/SubmitConfirm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export default function SubmitConfirm () {
<div id="defaultModal" tabIndex={-1} className="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex" aria-modal="true" role="dialog">
<div className="relative p-4 w-100 max-w-2xl h-full md:h-auto">
{/* Modal content */}
<div className="relative bg-customGreen rounded-lg shadow dark:bg-gray-700">
<div className="relative bg-[#457B9] rounded-lg shadow dark:bg-gray-700">
{/* Modal header */}
<div className="flex justify-between items-start p-4 ">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
Saved ✔
Saved
</h3>
</div>
{/* Modal body */}
Expand Down
74 changes: 53 additions & 21 deletions src/components/VolunteerProfile/VolunteerForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,45 @@
import axios from "axios";
import React, {useState} from "react";
import Axios from 'axios';

export default function VolunteerForm(props) {
const [showModal, setShowModal] = React.useState(false);
export default function VolunteerForm({showModal, setShowModal, handleChange, dataSender}) {
const [file, setFile] = useState(null) // for uploadig the photo

// Upload Functions START:

function onInputChange(e) {
// console.log(e.target.value);
// console.log(e.target.files);
setFile(e.target.files[0])
}

function handleSubmit(e) {
e.preventDefault();

const data = new FormData()

data.append('file', file)

Axios.post('//localhost:5000/upload', data)
.then((response)=> {
alert('Success') // he adds the toast here and below

})
.catch((e) => {
alert('Error', e)
})

}

// END


return (
<>

<div className=' flex flex-wrap justify-end py-2 mr-5'>
<div className=' flex flex-wrap justify-end py-2 mr-2 sm:mr-6 md:mr-16 lg:mr-28'>
<div className="basis-8/10"></div>
<button
className="flex justify-end bg-customGreen text-white active:bh-customGreen font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
className="flex justify-end bg-[#457B9D] text-white active:bh-[#457B9D] font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(true)}
>
Expand All @@ -23,7 +51,7 @@ export default function VolunteerForm(props) {
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
>
<div className="relative w-auto my-6 mx-auto max-w-3xl">
<div className="relative w-auto my-6 mx-auto max-w-3xl">
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
Expand All @@ -41,51 +69,53 @@ export default function VolunteerForm(props) {
</button>
</div>
{/*body*/}
<div className="relative p-6 flex-auto">
<div className="relative p-6 flex-auto h-auto">
{/* START OF FORM */}



<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<form
id='my-form'
className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">

<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
Select a Profile Photo
</label>
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="file" placeholder="" />
<input
onChange={(e)=> onInputChange(e)}
accept="image/jpeg"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="file" placeholder="" />
</div>

<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
Name
</label>
<input onChange={props.handleChange} name="name" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Name" />
<input onChange={handleChange} name="name" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Name" />
</div>

<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
Description
</label>
<input onChange={props.handleChange} name="description" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Description" />
<input onChange={handleChange} name="description" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Description" />
</div>

<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
Email
</label>
<input onChange={props.handleChange} name="email" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Email" />
<input onChange={handleChange} name="email" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Email" />
</div>

<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
Phone Number
</label>
<input onChange={props.handleChange} name="phone" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="tel" placeholder="Phone Number" />
<input onChange={handleChange} name="phone" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="tel" placeholder="Phone Number" />
</div>



{/* <input onChange={(event)=> setImageSelected(event.target.files[0])} className="w-100" type='file' /> <br></br> */}
</form>
{/* END OF FORM */}

Expand All @@ -103,11 +133,13 @@ export default function VolunteerForm(props) {
Close
</button>
<button
className="bg-customGreen text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => {
form='my-form'
type="submit"
className="bg-[#457B9D] text-white active:bg-[#457B9D] font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
onClick={(e) => {
setShowModal(false)
props.dataSender()
dataSender()
handleSubmit(e)
}}

>
Expand All @@ -122,4 +154,4 @@ export default function VolunteerForm(props) {
) : null}
</>
);
}
}
Loading

0 comments on commit d97ab5a

Please sign in to comment.