I am using react hook form for my project. How can i validate input type=’file’? It should only accept pdf. It was successfully inserted into database now when i want that only pdf should should be allowed. I am using react hook form v7.If someone knows plz suggest me. Thanks in advance!
Here’s my code
import React from 'react'
import { useForm } from 'react-hook-form';
import { ToastContainer, toast } from 'react-toastify';
export const Workshop = () => {
const { register, handleSubmit, formState: { errors }, reset } = useForm();
const onSubmit = async (data, e) => {
const formData = new FormData();
formData.append('workshop',data.workshop)
formData.append('participants',data.participants)
formData.append('startdate',data.startdate)
formData.append('selectedfile',data.selectedfile[0])
formData.append('establishmentdate',data.establishmentdate)
console.log(data)
reset()
const requestOptions = {
method: 'POST',
// headers: { 'Content-Type': 'application/json' },
body: formData
};
const response = await fetch("http://localhost:3001/workshop", requestOptions);
try {
if (response.status == 200) {
toast.success("Successfully added");
}
}
catch {
toast.error("Invalid");
}
const jsonData = await response.json();
console.log(jsonData)
// toast.error("Invalid");
};
return (
<div className="container ">
<ToastContainer />
<form onSubmit={handleSubmit(onSubmit)}>
<div class="mb-3 mt-5" >
<h2>Details of Workshops/Seminars
</h2>
<label for="exampleFormControlInput1" class="form-label">Name of the workshop/ seminar
</label>
<input type="text" class="form-control w-25" name="workshop" id="exampleFormControlInput1" {...register("workshop", { required: true, pattern:{value:/^[a-zA-Z]+$/ ,message:'Only characters allowed'}})} />
{errors.workshop && errors.workshop.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.workshop && errors.workshop.type === "pattern" && (
<div style={{color:'red'}}> Only characters allowed</div>
)}
</div>
<div class="mb-3 w-25 ">
<label for="exampleFormControlTextarea1" class="form-label">Number of Participants
</label>
<input type="text" class="form-control" id="exampleFormControlTextarea1" name="participants" {...register("participants", { required: true, pattern:{value:/^[0-9b]+$/ ,message:'Only characters allowed'}})} />
{errors.participants && errors.participants.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.participants && errors.participants.type === "pattern" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Date From – To
</label>
<input type="date" class="form-control" id="exampleFormControlTextarea1" name="startdate" {...register("startdate",{required:true})} />
{errors.startdate && errors.startdate.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.startdate && errors.startdate.type === "valueAsDate" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Link to the Activity report on the website(Upload PDF)
</label>
<input type="file" class="form-control" id="exampleFormControlTextarea1" name="selectedfile" {...register('selectedfile', {
required:true,
})} />
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Date of establishment of IPR cell
</label>
<input type="date" class="form-control" id="exampleFormControlTextarea1" name="establishmentdate" {...register("establishmentdate",{required:true})} />
{errors.establishmentdate && errors.establishmentdate.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.establishmentdate && errors.establishmentdate.type === "valueAsDate" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<button type="submit" class="btn btn-primary me-md-2">Submit</button>
<button type="button" class="btn btn-primary me-md-2" >Download Excel</button>
<button class="btn btn-primary me-md-2" >Download PDF</button>
<button class="btn btn-primary me-md-2" >Download Word</button>
</form>
</div>
)
}
How should I fix this?