React Native File Upload Not Working? Here’s the Fix

Hey everyone! 👋
In this article, we’ll discuss how to fix the React Native file upload not working issue.

While working on a new React Native project recently, I revisited my own article:

How to Upload File to Server with FormData in React Native

But this time, the code didn’t work — even though it used to. After wasting nearly 2 full days debugging, I found something surprising. This post is for every developer stuck with the React Native File Upload Not Working issue, especially when using FormData.

1. What I Was Doing

• Using React Native

• Working with a local backend server

• Uploading multiple files using FormData

• API tested with tools like Postman — and it worked fine

• But from the React Native app: req.files on the server was always empty

2. My Debugging Steps

I double-checked everything:

• Verified Content-Type was multipart/form-data

• Ensured proper file format and URI

• Logged FormData structure in React Native

• Confirmed Express.js backend file handling logic

• Rechecked multer or other middleware setup

Still, file array was empty.

3. The Hidden Culprit: React Native Debugger

I discovered that the real issue behind the React Native File Upload Not Working was React Native Debugger itself

👉 Closed the React Native Debugger window.

And suddenly…
🎉 File upload started working!

I was shocked. The problem wasn’t the code. It was the React Native Debugger interfering with network requests, especially when working with file uploads via FormData.

4. Quick Fix

If your FormData file upload in React Native isn’t working and you’re running on a local server:

Try closing the React Native Debugger.
It might interfere with your FormData payload.

5. Bonus: Uploading Multiple Files with RTK Query in React Native

Since modern apps increasingly use Redux Toolkit (RTK Query), here’s an example of how to upload multiple files using FormData with RTK Query.

1. RTK API Setup
   

// apiSlice.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:5000' }),
  endpoints: (builder) => ({
    uploadFiles: builder.mutation({
      query: (formData: FormData) => ({
        url: '/upload',
        method: 'POST',
        body: formData,
      }),
    }),
  }),
});

export const { useUploadFilesMutation } = api;

1. Using the Upload API

const [uploadFiles] = useUploadFilesMutation();

const handleUpload = async () => {
  const formData = new FormData();
  files.forEach((file) => {
    formData.append('files', {
      uri: file.uri,
      name: file.name,
      type: file.type,
    } as any);
  });

  await uploadFiles(formData);
};

6. Key Takeaways

• Check your API with Postman first to ensure your backend accepts the multipart/form-data correctly before testing from the app.

• If your file upload using FormData in React Native isn’t working, check if the debugger is affecting the request.

• React Native Debugger can sometimes interfere with binary uploads or FormData content.

• RTK Query makes file uploads cleaner — just send FormData in the mutation like a regular POST call.

7. Conclusion

This tiny discovery saved me hours — and I hope it helps you too.
When debugging FormData issues in React Native, always consider:

Is the problem in your code, or is it the tool you’re using to debug it?

If you found this useful, share it with others.
And don’t forget to check out more tutorials on TechUp.co.in.

Still facing the issue? Feel free to reach out to me — I have working examples and would be happy to share them with you! 🙂