Скачать или смотреть How to Properly Upload Multiple Images from JavaScript to Django using fetch

A guide to help beginners upload multiple image files from JavaScript to Django using the `fetch` API, resolve common issues, and understand FormData manipulation.
---
This video is based on the question https://stackoverflow.com/q/66688776/ asked by the user 'The S.' ( https://stackoverflow.com/u/11321137/ ) and on the answer https://stackoverflow.com/a/66703098/ provided by the user 'The S.' ( https://stackoverflow.com/u/11321137/ ) 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: JS fetch multiple pics (as FormData) to Django to save

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.
---
How to Properly Upload Multiple Images from JavaScript to Django using fetch

Uploading files to a backend server can be challenging, especially if you are new to web development. One common scenario is needing to send multiple image files from a front-end application to a Django backend. This guide addresses this issue by guiding you through the process of uploading images using the JavaScript fetch API, specifically focusing on how to work with FormData.

The Problem

When attempting to upload files, many beginners face issues that can seem simple but are, in fact, tricky to navigate. For instance, a user may attempt to upload multiple images and ends up with corrupted files on the server side. In this case, the user is struggling to manipulate FormData correctly and properly configure the fetch request to handle file uploads in Django.

Understanding the Basics

Before diving into the solution, let's clarify the key components involved in this process:

JavaScript fetch API: This is a modern way to make asynchronous HTTP requests, allowing you to upload files easily.

FormData: An object that provides a way to construct key/value pairs used to send form data via XMLHttpRequest or the fetch API. It is particularly useful for sending files.

Django's request.FILES: A special attribute that holds all the uploaded files during a request.

The Solution

Step 1: Set up Your HTML

First, ensure that your HTML includes an input field for file selection and a button to trigger the upload action. Here is an example:

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

Step 2: Configure the JavaScript fetch Call

Next, let's create the JavaScript function to handle the file upload when the button is clicked. Here's an improved version of the function that correctly utilizes FormData:

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

Step 3: Process the Uploaded Files in Django

In your Django views, you can easily access the uploaded files using request.FILES. Here's how to implement it:

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

Important Notes

Removing Content-Type Header: It is crucial not to set the Content-Type header in the fetch request if you are sending FormData. The browser will set it correctly on its own, including the necessary boundary.

Handling File Saving: In Django, you should use request.FILES to retrieve and save uploaded files, rather than trying to read from request.body, which will not contain the file data in this context.

Conclusion

Uploading multiple images from JavaScript to Django can be straightforward once you understand how to manipulate FormData and properly set up the fetch request. In summary, remember:

Use FormData to assemble your files.

Do not include a Content-Type header for FormData requests.

Utilize request.FILES in Django to access the uploaded files.

By following these simple steps, you should be able to successfully upload images without ending up with corrupted files. Happy coding!