title: React Native uploading multiple images with fetch to node js server with express and multer
body: <p>I am trying to upload multiple images to my nodejs server where i am using multer to parse form-data,
  but the problem is, when i am trying to upload images through postman it gets successfully upload but with react native fetch api it didn't work.</p>
  
  <p>Here is my code:</p>
  
  <p>React Native:</p>
  
  <pre><code>import React from "react";
  import { View, Text, Button } from "react-native";
  
  export default function imageUpload(props) {
  
  
  
   function upload() {
      const photo1 = {
        uri: "https://html5box.com/html5gallery/images/Swan_1024.jpg",
        type: "image/jpeg",
        name: "photo1.jpg",
      };
      const photo2 = {
        uri:
          "https://www.canva.com/wp-content/themes/canvaabout/img/colorPalette/image4.jpg",
        type: "image/jpeg",
        name: "photo2.jpg",
      };
  
      const photos = [photo1, photo2];
      const form = new FormData();
  
      for (let photo in photos) {
        form.append("image", photos[photo]);
      }
  
      console.log(form);
  
      fetch("http://192.168.31.208:3000/uploads", {
        body: form,
        method: "POST",
        headers: {
          "Content-Type": "multipart/form-data",
          // Accept: "application/x-www-form-urlencoded",
        },
      })
        .then((response) =&gt; response.json())
        .then((responseData) =&gt; {
          console.log("Response:" + responseData);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    }
    return (
      &lt;View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}&gt;
        &lt;Text&gt;Image Upload&lt;/Text&gt;
        &lt;Button title="Test" onPress={upload} /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>Server Code:</p>
  
  <pre><code>const express = require("express");
  const http = require("http");
  const multer = require("multer");
  const path = require("path");
  
  const storage = multer.diskStorage({
    destination: "./uploads",
    filename: function (req, file, cb) {
      cb(
        null,
        file.fieldname + "-" + Date.now() + path.extname(file.originalname)
      );
    },
  });
  
  const upload = multer({
    storage: storage,
    limits: { fileSize: 52428800 },
    fileFilter: function (req, file, cb) {
      checkFileType(file, cb);
    },
  }).array("image");
  
  function checkFileType(file, cb) {
    const fileType = /jpeg|jpg|png|gif/;
    const extname = fileType.test(path.extname(file.originalname).toLowerCase());
    const mimeType = fileType.test(file.mimetype);
  
    if (extname &amp;&amp; mimeType) {
      return cb(null, true);
    } else {
      cb("Error: FILE_SHOULD_BE_TYPE_IMAGE");
    }
  }
  
  // Initialise app
  const app = express();
  app.use(express.static("./uploads"));
  
  app.post("/uploads", (req, res) =&gt; {
    upload(req, res, (err) =&gt; {
      if (err) {
        res.status(400).json({
          error: err,
        });
      } else {
        console.log(req);
        res.status(200).json({
          // name: req.body.name,
          // image: req.file,
          message: "Testing",
        });
      }
    });
  });
  app.get("/upload", (req, res, next) =&gt; {
    res.status(200).json({
      message: "TestComplete",
    });
  });
  const port = 3000;
  
  app.listen(port, () =&gt; {
    console.log(`Server started on port number: ${port}`);
  });
  </code></pre>
  
  <p>Console Output Frontend:</p>
  
  <pre><code>    FormData {
    "_parts": Array [
      Array [
        "image",
        Object {
          "name": "photo1.jpg",
          "type": "image/jpeg",
          "uri": "https://html5box.com/html5gallery/images/Swan_1024.jpg",
        },
      ],
      Array [
        "image",
        Object {
          "name": "photo2.jpg",
          "type": "image/jpeg",
          "uri": "https://www.canva.com/wp-content/themes/canvaabout/img/colorPalette/image4.jpg",
        },
      ],
    ],
  }
  
  Network request failed
  - node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror
  - node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
  - node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
  - node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
  - node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
  - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
  - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
  - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
  - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
  * [native code]:null in callFunctionReturnFlushedQueue
  </code></pre>
  
  <p>Thanks for any help</p>