CODEWITHSUNDEEP
javascriptreactjs
Husnain Mehmood
Husnain Mehmood

Reputation: 119

React - Sending uploaded images as url to an API

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"
            }
       ]

Upvotes: 0

Views: 64

Answers (1)

Michael
Michael

Reputation: 987

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

Upvotes: 1

Related Questions