I am sending multiple images to an API but the way I do it sends it as an object but I need to send it as a URL.
State:
const [files, setFiles] = useState([]);
Image uploader:
const fileSelectHandler = (e) => {
setFiles([...files, ...e.target.files]);
};
<input
type="file"
className="form-control"
id="customFile"
multiple
onChange={fileSelectHandler}
/>
Expected sending package:
"pic": [
{
"url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg"
},
{
"url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg"
}
]
You can solve it like this:
import React from "react";
export default function App() {
const [files, setFiles] = React.useState([]);
const fileSelectHandler = (e) => {
const [file] = e.target.files;
setFiles([...files, { url: file.name }]);
};
const picObj = { pic: files };
console.log(picObj);
return (
<div className="App">
<input
type="file"
className="form-control"
id="customFile"
multiple
onChange={fileSelectHandler}
/>
</div>
);
}
Here alink to the demo: https://codesandbox.io/s/immutable-pine-2k8t9?file=/src/App.js:0-625