fileUpload
parent
6627d42cb6
commit
3d1e9cce9e
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
# production
|
||||
/build
|
||||
|
||||
/public/uploaded/*
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.39.0",
|
||||
"eslint-config-next": "13.3.1",
|
||||
"formidable": "^2.1.1",
|
||||
"next": "13.3.1",
|
||||
"postcss": "8.4.23",
|
||||
"react": "18.2.0",
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
"react-phone-number-input": "^3.2.22",
|
||||
"react-select": "^5.7.3",
|
||||
"react-select-country-list": "^2.2.3",
|
||||
"sqlite3": "^5.1.6",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "5.0.4"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,237 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React 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'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
|
||||
|
||||
import NavBar from '../components/NavBar';
|
||||
// import { Inter } from 'next/font/google'
|
||||
|
||||
export default function addUserForm (){
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
let [individualValue=true, setindividualValue] = useState()
|
||||
|
||||
// console.log(phoneValue)
|
||||
const selectCountry = countryValue => {
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
|
||||
const individual = (event) => {
|
||||
// console.log(event.target.schoolID.value)
|
||||
|
||||
setindividualValue(individualValue=false)
|
||||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`).
|
||||
then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
// console.log(school);
|
||||
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
type: event.target.type.value,
|
||||
name: event.target.name.value,
|
||||
user: event.target.email.value,
|
||||
country: event.target.country.value,
|
||||
phone: event.target.phone.value,
|
||||
school: event.target.schoolID.value,
|
||||
class: event.target.class.value,
|
||||
lang: event.target.lang.value,
|
||||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.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'>
|
||||
<img src="/img/2.svg" alt="" />
|
||||
<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 pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Type</label>
|
||||
<select name="type" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="parent" >Parent</option>
|
||||
<option value="teacher">Teacher</option>
|
||||
<option value="coordinator">Coordinator</option>
|
||||
<option value="master">Master</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="name" className='text-xl font-bold'> Name</label>
|
||||
<input type="text" name="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'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||
<input type="email" name="email" 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'>
|
||||
<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>
|
||||
<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}/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||
<select name="schoolID" onChange={individual} className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="individual" > individual </option>
|
||||
{school && school.data.map(data=>
|
||||
<option value={data.id} key={data.id}>{data.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{ individualValue &&
|
||||
<div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" >-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="plan" 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="plan" 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="plan" 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="plan" 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="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="assamese">Assamese</label>
|
||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="bengali">Bengali</label>
|
||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="english">English</label>
|
||||
<input type="checkbox" name="lang" value='English' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="hindi">Hindi</label>
|
||||
<input type="checkbox" name="lang" value='Hindi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="telegu">Telegu</label>
|
||||
<input type="checkbox" name="lang" value='telegu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>
|
||||
<input type="checkbox" name="lang" value='Punjabi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="malayalam">Malayalam</label>
|
||||
<input type="checkbox" name="lang" value='malayalam' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="tamil">Tamil</label>
|
||||
<input type="checkbox" name="lang" value='tamil' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="kannada">Kannada</label>
|
||||
<input type="checkbox" name="lang" value='kannada' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="gujrati">Gujrati</label>
|
||||
<input type="checkbox" name="lang" value='gujrati' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</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" >-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>
|
||||
|
||||
}
|
||||
<div className='flex justify-center pt-8'>
|
||||
<button type="submit" 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'>Save</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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import formidable from "formidable";
|
||||
import fs from "fs";
|
||||
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false
|
||||
}
|
||||
};
|
||||
|
||||
const post = async (req, res) => {
|
||||
const form = new formidable.IncomingForm();
|
||||
form.parse(req, async function (err, fields, files) {
|
||||
await saveFile(files.file);
|
||||
return res.status(201).send("");
|
||||
});
|
||||
};
|
||||
|
||||
const saveFile = async (file) => {
|
||||
// console.log(file.filepath)
|
||||
const data = fs.readFileSync(file.filepath);
|
||||
fs.writeFileSync(`./public/uploaded/${file.originalFilename}`, data);
|
||||
fs.unlinkSync(file.filepath);
|
||||
return;
|
||||
};
|
||||
|
||||
export default (req, res) => {
|
||||
req.method === "POST"
|
||||
? post(req, res)
|
||||
: req.method === "PUT"
|
||||
? console.log("PUT")
|
||||
: req.method === "DELETE"
|
||||
? console.log("DELETE")
|
||||
: req.method === "GET"
|
||||
? console.log("GET")
|
||||
: res.status(404).send("");
|
||||
};
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { useState } from "react";
|
||||
export default function PrivatePage(props) {
|
||||
const [image, setImage] = useState(null);
|
||||
const [createObjectURL, setCreateObjectURL] = useState(null);
|
||||
|
||||
const uploadToClient = (event) => {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
const i = event.target.files[0];
|
||||
|
||||
setImage(i);
|
||||
setCreateObjectURL(URL.createObjectURL(i));
|
||||
}
|
||||
};
|
||||
|
||||
const uploadToServer = async (event) => {
|
||||
const body = new FormData();
|
||||
body.append("file", image);
|
||||
const response = await fetch("/api/fileUpload", {
|
||||
method: "POST",
|
||||
body
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<img src={createObjectURL} />
|
||||
<h4>Select Image</h4>
|
||||
<input type="file" name="myImage" onChange={uploadToClient} />
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="submit"
|
||||
onClick={uploadToServer}
|
||||
>
|
||||
Send to server
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/add-school-form.jsx", "src/pages/add-school-form.jsx", "src/pages/add-user-form.jsx"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/add-school-form.jsx", "src/pages/add-school-form.jsx", "src/pages/add-user-form.jsx", "src/pages/test/file-upload.jsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue