title: Upload images with Cloudinary + MongoDB NextJS
body: <p>I'm trying to upload multiple images for a product form. The API &quot;works&quot; but the first upload is always empty and never pushed to the product model of mongodb, also the API gets only the last image. When submitted the form, I get an empty array.
  In addition, the cloudinary API gets the file when selected, not when submitted the entire form.</p>
  <pre><code>export default function NewProduct() {
    const initialState = {
      title: &quot;&quot;,
      price: 0,
      description: &quot;&quot;,
      content: &quot;&quot;,
      images: [],
      category: &quot;tortas&quot;,
    };
  
    const [product, setProduct] = useState(initialState);
    const { title, price, description, content, category } = product;
  
    console.log(product);
  
    const [image, setImage] = useState([]);
  
    // Other inputs
    const handleChangeInput = (e) =&gt; {
      setProduct({ ...product, [e.target.name]: e.target.value });
    };
  
  
    // File uploader
    const handleUploadInput = async (e) =&gt; {
      const files = [...e.target.files];
      const formData = new FormData();
  
      for (let file of files) {
        formData.append(&quot;file&quot;, file);
      }
  
      formData.append(&quot;upload_preset&quot;, &quot;blabla&quot;);
  
      const res = await fetch(
        &quot;https://api.cloudinary.com/v1_1/blabla/image/upload&quot;,
        {
          method: &quot;POST&quot;,
          body: formData,
        }
      );
      const data = await res.json();
      setImage([...image, data.secure_url]);
      setProduct({ ...product, images: image }); // Maybe Im missing something around here
    };
  
    const handleSubmit = async (e) =&gt; {
      e.preventDefault();
      await createProduct();
    };
  
    //   const validate = () =&gt; {
    //     if(!title || !price || !description || !content) return
    //   }
  
    const createProduct = async () =&gt; {
      try {
        const res = await fetch(&quot;http://localhost:3000/api/products&quot;, {
          method: &quot;POST&quot;,
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
          body: JSON.stringify(product),
        });
        const data = await res.json();
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };
  
  // The input
     &lt;input type=&quot;file&quot; onChange={handleUploadInput}  multiple accept=&quot;image/*&quot;   /&gt;
              
             
              
          
  
  </code></pre>