work-on-file-upload
parent
dc53ebba06
commit
6627d42cb6
|
|
@ -1,8 +1,5 @@
|
|||
// import React, { useState } from 'react';
|
||||
// import Image from 'next/image'
|
||||
import NavBar from '../components/NavBar'
|
||||
|
||||
import { useId,useState, useEffect,useMemo } from 'react';
|
||||
import { useId, useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import 'react-phone-number-input/style.css'
|
||||
|
|
@ -12,23 +9,61 @@ export default function addSchoolForm() {
|
|||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
}
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
// console.log(phoneValue)
|
||||
const selectCountry = countryValue => {
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
// const selectCountry = countryValue => {
|
||||
// setCountryValue(countryValue)
|
||||
// }
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
name: event.target.schoolName.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.value,
|
||||
anual: event.target.anual.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
interakto: event.target.interakto.value,
|
||||
// school_agreement: event.target.school_agreement,
|
||||
// school_contact_number : event.target.school_contact_number,
|
||||
// school_email_id : event.target.school_email_id,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
|
|
@ -47,6 +82,7 @@ export default function addSchoolForm() {
|
|||
// alert(`Is this your full name: ${result.data}`)
|
||||
alert(`School Saved`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
|
|
@ -64,12 +100,33 @@ export default function addSchoolForm() {
|
|||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Country</label>
|
||||
<Select className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="country" instanceId={useId()} options={options} value={countryValue} onChange={selectCountry} />
|
||||
</div>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
</div>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="state" options={allStates} value={allStates[0].name}
|
||||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="cities" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
|
||||
|
|
@ -145,6 +202,10 @@ export default function addSchoolForm() {
|
|||
<option value="December"> December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
|
||||
<input type="date" name="agreement_expiry_date" id="agreement_expiry_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
|
|
|
|||
|
|
@ -76,9 +76,10 @@ export default function addUserForm() {
|
|||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`).then(res => res.json())
|
||||
fetch(`https://management.beanstalkedu.com/items/school`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
|
|
@ -99,7 +100,7 @@ export default function addUserForm() {
|
|||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.value,
|
||||
anual: event.target.anual,
|
||||
anual: event.target.anual.value,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||
|
|
@ -186,7 +187,8 @@ export default function addUserForm() {
|
|||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
</div>
|
||||
{allStates && allStates.length > 0 && <div className='flex flex-col w-full'>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
|
|
@ -194,7 +196,8 @@ export default function addUserForm() {
|
|||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 && <div className='flex flex-col w-full'>
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import NavBar from '../components/NavBar'
|
||||
import { type } from 'os';
|
||||
import { data } from 'autoprefixer';
|
||||
// import { Inter } from 'next/font/google'
|
||||
export default function addUserForm (){
|
||||
const [school, setSchool] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`).
|
||||
then(res => res.json())
|
||||
.then(data => {setSchool(data.data)
|
||||
})
|
||||
}, [])
|
||||
console.log(typeof school);
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
user: event.target.user.value,
|
||||
// user: event.target.user.value,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSONdata,
|
||||
}
|
||||
const response = await fetch(endpoint, options)
|
||||
const result = await response.json()
|
||||
alert(`Is this your full name: ${result.data}`)
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar />
|
||||
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
||||
<div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<svg className='rounded-full shadow-md ' width="100px" height="100px" viewBox="-3.12 -3.12 30.24 30.24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M11.4604 13.7299C13.0123 13.7299 14.2704 12.4718 14.2704 10.9199C14.2704 9.36794 13.0123 8.10986 11.4604 8.10986C9.90847 8.10986 8.65039 9.36794 8.65039 10.9199C8.65039 12.4718 9.90847 13.7299 11.4604 13.7299Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M16.6495 20.1998C16.6495 17.8698 14.3295 15.9697 11.4595 15.9697C8.58953 15.9697 6.26953 17.8598 6.26953 20.1998" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 12.5C21 17.75 16.75 22 11.5 22C6.25 22 2 17.75 2 12.5C2 7.25 6.25 3 11.5 3C12.81 3 14.06 3.25999 15.2 3.73999C15.07 4.13999 15 4.56 15 5C15 5.75 15.21 6.46 15.58 7.06C15.78 7.4 16.04 7.70997 16.34 7.96997C17.04 8.60997 17.97 9 19 9C19.44 9 19.86 8.92998 20.25 8.78998C20.73 9.92998 21 11.19 21 12.5Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M23 5C23 5.32 22.96 5.62999 22.88 5.92999C22.79 6.32999 22.63 6.72 22.42 7.06C21.94 7.87 21.17 8.49998 20.25 8.78998C19.86 8.92998 19.44 9 19 9C17.97 9 17.04 8.60997 16.34 7.96997C16.04 7.70997 15.78 7.4 15.58 7.06C15.21 6.46 15 5.75 15 5C15 4.56 15.07 4.13999 15.2 3.73999C15.39 3.15999 15.71 2.64002 16.13 2.21002C16.86 1.46002 17.88 1 19 1C20.18 1 21.25 1.51002 21.97 2.33002C22.61 3.04002 23 3.98 23 5Z" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M20.4898 4.97998H17.5098" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 3.52002V6.51001" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
|
||||
</div>
|
||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="user" className='text-xl font-bold'>User Name</label>
|
||||
<input type="text" name="user" id="user" placeholder='ex. xyz@email.com' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
|
||||
|
||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||
<select name="" id="" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
{/* {school.map(data=>
|
||||
<option value={data.name}>{data.name}</option>
|
||||
)} */}
|
||||
<option value="">{school.name}</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input type="text" name="school" id="school" placeholder='School Name' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div> */}
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_contact_number" className='text-xl font-bold'>School Contact Number</label>
|
||||
<input type="text" name="school_contact_number" id="school_contact_number" placeholder='School Contact Number ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_email_id" className='text-xl font-bold'>School Email ID</label>
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="class" id="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="IK1">IK1</option>
|
||||
<option value="IK2">IK2</option>
|
||||
<option value="IK3">IK3</option>
|
||||
<option value="PG">PG</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Anual">Anual</label>
|
||||
<input type="checkbox" name="Anual" id="Anual" value='Anual' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Toddler">Toddler</label>
|
||||
<input type="checkbox" name="Toddler" id="Toddler" value='Toddler' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Interakto">Interakto</label>
|
||||
<input type="checkbox" name="Interakto" id="Interakto" value='Interakto' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center col-span-2'>
|
||||
<label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>
|
||||
<input type="checkbox" name="Early_Start_program" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||
<select name="plan" id="plan" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="Anual">Anual</option>
|
||||
<option value="Early-Start-Program">Early Start Program</option>
|
||||
<option value="Toddlers">Toddlers</option>
|
||||
<option value="Interakto">Interakto</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Bengali">Bengali</label>
|
||||
<input type="checkbox" name="Bengali" id="Bengali" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="English">English</label>
|
||||
<input type="checkbox" name="English" id="English" value='English' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Hindi">Hindi</label>
|
||||
<input type="checkbox" name="Hindi" id="Hindi" value='Hindi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Urdu">Urdu</label>
|
||||
<input type="checkbox" name="Urdu" id="Urdu" value='Urdu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>
|
||||
<input type="checkbox" name="Punjabi" id="Punjabi" value='Punjabi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Telugu">Telugu</label>
|
||||
<input type="checkbox" name="Telugu" id="Telugu" value='Telugu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Marathi">Marathi</label>
|
||||
<input type="checkbox" name="Marathi" id="Marathi" value='Marathi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Nepali">Nepali</label>
|
||||
<input type="checkbox" name="Nepali" id="Nepali" value='Nepali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Kannada">Kannada</label>
|
||||
<input type="checkbox" name="Kannada" id="Kannada" value='Kannada' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Gujrati">Gujrati</label>
|
||||
<input type="checkbox" name="Gujrati" id="Gujrati" value='Gujrati' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* <select name="lang" id="lang" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="" selected>-Select-</option>
|
||||
<option value="Bengali"> Bengali</option>
|
||||
<option value="English"> English</option>
|
||||
<option value="Hindi"> Hindi</option>
|
||||
<option value="Urdu"> Urdu</option>
|
||||
<option value="Punjabi"> Punjabi</option>
|
||||
<option value="Telugu"> Telugu</option>
|
||||
<option value="Marathi"> Marathi</option>
|
||||
<option value="Nepali"> Nepali</option>
|
||||
<option value="Kannada"> Kannada</option>
|
||||
<option value="Gujrati"> Gujrati</option>
|
||||
</select> */}
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
|
||||
<select name="start_month" id="start_month" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="January"> January</option>
|
||||
<option value="February"> February</option>
|
||||
<option value="March"> March</option>
|
||||
<option value="April"> April</option>
|
||||
<option value="May"> May</option>
|
||||
<option value="June"> June</option>
|
||||
<option value="July"> July</option>
|
||||
<option value="August"> August</option>
|
||||
<option value="September"> September</option>
|
||||
<option value="November"> November</option>
|
||||
<option value="December"> December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="start_date" className='text-xl font-bold pt-4'>Start Date</label>
|
||||
<input type="date" name="start_date" id="start_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="end_date" className='text-xl font-bold pt-4'>End Date</label>
|
||||
<input type="date" name="end_date" id="end_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex justify-center pt-8'>
|
||||
<button className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Submit Now</button>
|
||||
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import React, { useState, useMemo } from 'react'
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
|
||||
function CountrySelector() {
|
||||
const [value, setValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
|
||||
const changeHandler = value => {
|
||||
setValue(value)
|
||||
}
|
||||
|
||||
return <Select options={options} value={value} onChange={changeHandler} />
|
||||
}
|
||||
|
||||
export default CountrySelector
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from "react";
|
||||
class App extends React.Component {
|
||||
upload(e)
|
||||
{
|
||||
console.warn(e.target.files)
|
||||
const files=e.target.files
|
||||
const formData=new FormData();
|
||||
formData.append("img", files[0])
|
||||
fetch('https://management.beanstalkedu.com/items/school',{
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}
|
||||
)
|
||||
.then((resp)=>{
|
||||
resp.json()
|
||||
.then((result)=>{
|
||||
console.warn("result", result)
|
||||
})
|
||||
})
|
||||
}
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" onChange={(e)=>this.upload(e)} name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
function FileUpload(){
|
||||
const [file, setFile] = useState()
|
||||
|
||||
function handleFile(event) {
|
||||
setFile(event.target.files[0])
|
||||
}
|
||||
function handleUpload() {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
fetch('https://management.beanstalkedu.com/items/school', {
|
||||
method: "POST",
|
||||
body: formData
|
||||
})
|
||||
.then((respons)=> respons.json())
|
||||
.then((result)=>{
|
||||
console.log('success', result)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error:", error)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={handleUpload}>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" name="school_agreement" onChange={handleFile} id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<button>Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default FileUpload;
|
||||
|
|
@ -65,4 +65,3 @@ const fetchData = async () => {
|
|||
)
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,4 +66,3 @@ const fetchData = async () => {
|
|||
)
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue