How to upload image in react - reactjs

Question

I am working on a e-commerce app and there I am using form to add new product in app for that I am taking multiple inputs from user and then I am storing those inputs in my redux store and finally I am displaying newly added product in my app and everything is working perfectly here earlier I was using <input type="url"/> so user can paste an image url so I can display it and it was working perfectly but now I want to allow user so he can upload an Image from his local system instead or url using <input type="file"/> but this isn,t working this is not loading image from local system so is there any way I can upload Image from local system:
Form
import "./ProductForm.css";
import { useReducer } from "react";
import { useDispatch } from "react-redux";
import { addProductHandler } from "../../store/DataStore";
import { useNavigate } from "react-router-dom";
const ProductForm = () => {
const Dispatch = useDispatch();
const navigate = useNavigate();
const initialState = {
product_id: "",
product_name: "",
product_quantity: "",
product_description: "",
product_type: "",
product_valid: "false",
product_price: "",
product_title: "",
product_image: "",
};
const reducer = (state, action) => {
if (action.type === "id") {
return { ...state, product_id: action.value };
} else if (action.type === "name") {
return { ...state, product_name: action.value };
} else if (action.type === "title") {
return { ...state, product_title: action.value };
} else if (action.type === "price") {
return { ...state, product_price: action.value };
} else if (action.type === "image") {
return { ...state, product_image: action.value };
} else if (action.type === "description") {
return { ...state, product_discription: action.value };
} else if (action.type === "type") {
return { ...state, product_type: action.value };
}
};
const [state, dispatch] = useReducer(reducer, initialState);
const submitHandler = (e) => {
e.preventDefault();
const obj = {
product_id: state.product_id,
product_name: state.product_name,
product_price: +state.product_price,
product_title: state.product_title,
product_image: state.product_image,
product_type: state.product_type,
product_description: state.product_discription,
product_quantity: 0,
product_valid: "false",
};
console.log(obj);
// Dispatch(addProductHandler(obj));
// navigate(`/product`, { replace: true });
};
return (
<form onSubmit={submitHandler}>
<legend>
<center>
<h2>
<b>Add Product</b>
</h2>
</center>
</legend>
<div className="form-group">
<label>Product id</label>
<input
type="text"
className="form-control"
value={state.product_id}
onChange={(e) => dispatch({ type: "id", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Name</label>
<input
type="text"
className="form-control"
value={state.product_name}
onChange={(e) => dispatch({ type: "name", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Price</label>
<input
type="text"
className="form-control"
value={state.product_price}
onChange={(e) => dispatch({ type: "price", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Title</label>
<input
type="text"
className="form-control"
value={state.product_title}
onChange={(e) => dispatch({ type: "title", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Type</label>
<select
className="form-control"
value={state.product_type}
onChange={(e) => dispatch({ type: "type", value: e.target.value })}
>
<option value="" selected disabled>
Select one
</option>
<option value="c1">Commodityies</option>
<option value="g1">Gadgets</option>
<option value="w1">Wearings</option>
</select>
</div>
<div className="form-group">
<label>Product Image</label>
<input
type="file"
className="form-control"
value={state.product_image}
onChange={(e) => dispatch({ type: "image", value: e.target.value })}
/>
</div>
<div className="form-group">
<label>Product Description</label>
<textarea
className="form-control"
id=""
rows="7"
value={state.product_discription}
onChange={(e) =>
dispatch({ type: "description", value: e.target.value })
}
></textarea>
</div>
<button type="submit" className="btn btn-primary mt-4">
Submit
</button>
</form>
);
};
export default ProductForm;

Answer 1

you cannot upload file like that you should have to use FormData Class For multipart/form-data
var formData = new FormData();
formData.append('product_id', state.product_id,)
formData.append('product_name', state.product_name,)
formData.append('product_price', +state.product_price,)
formData.append('product_title', state.product_title,)
formData.append('product_image', state.product_image,)
formData.append('product_type', state.product_type,)
formData.append('product_description', state.product_discription,)
formData.append('product_quantity', 0,)
formData.append('product_valid', "false")
formData.append('image', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});
After this it will send ajax request like you submit regular form
with enctype="multipart/form-data"