Скачать или смотреть Understanding the Differences Between axios and fetch for File Uploads in React

Learn how to upload files seamlessly in React by understanding the differences between `axios` and `fetch`. This guide will help you avoid common errors and streamline your upload functionality.
---
This video is based on the question https://stackoverflow.com/q/72514350/ asked by the user 'Profer' ( https://stackoverflow.com/u/6838854/ ) and on the answer https://stackoverflow.com/a/72514606/ provided by the user 'Quentin' ( https://stackoverflow.com/u/19068/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: axios vs fetch throwing error on file upload

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the File Upload Dilemma: axios vs fetch

In modern web applications, uploading files is a common requirement, especially for React developers working with images or document submissions. However, developers often encounter challenges when choosing between axios and fetch for file uploads. One frequent issue is the discrepancy in responses and behaviors between the two libraries, particularly when dealing with FormData objects. In this guide, we'll explore a specific scenario where changing from axios to fetch while uploading files leads to errors, and discuss how to resolve it.

The Problem

In a recent project, a developer successfully implemented file uploads using axios, but when switching to fetch, they encountered the error message:

[[See Video to Reveal this Text or Code Snippet]]

Upon investigation and deeper understanding of how both libraries operate, the issue stemmed from the handling of the Content-Type and the format of the data being sent to the server.

Understanding the Code

Original Implementation with axios

Here's the relevant part of the code that uses axios for uploading an image:

[[See Video to Reveal this Text or Code Snippet]]

In this implementation, data is a FormData object. Despite specifying Content-Type as application/json, axios intelligently ignores this if it detects a FormData object, ensuring that the correct format is maintained.

Changing to fetch

When switching to fetch, the corresponding code looked like this:

[[See Video to Reveal this Text or Code Snippet]]

The Pitfall

The main problem with this implementation is the line body: JSON.stringify(data). Here’s what happens:

FormData objects cannot be stringified, which causes the output to become "{}" — an empty object with no data.

The backend API, which expects to receive certain formatted data (like a specific filename), fails to find what it needs and throws an error.

The Solution: Avoiding Common Mistakes

To successfully upload files using fetch, it's essential to adhere to the following tips:

Do Not Set Content-Type to application/json: Since you're uploading a FormData object, the appropriate content type will be automatically set by fetch to multipart/form-data when you send the FormData as the request body.

Skip JSON.stringify: Pass the FormData object directly in the body. Do not attempt to serialize it.

Correct Implementation with fetch

With this understanding, here’s the adjusted fetch code:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

When working with file uploads, especially between different libraries like axios and fetch, it's vital to understand how data is managed and transmitted. The key takeaway is to ensure that you’re sending the correct content formats and avoid misconfigurations. By following these practices, you can seamlessly manage file uploads in your React applications without running into frustrating errors.

For developers facing similar issues, a careful evaluation of how data types are handled can illuminate solutions and streamline the file upload process.