How can I implement file uploads in a React app using Django?

How can I implement file uploads in a React app using Django?

You can use Django's REST framework to create an API endpoint for file uploads and then use Axios in React to send files.

What are the steps to set up the Django backend for file uploads?

First, create a Django model for the file, then set up a serializer and a view to handle the file upload.

How do I handle the file upload in the React frontend?

In React, you can create a form with an input of type 'file' and use Axios to post the file to your Django API.

Can you show me a code example for the React component?

Sure! Here's a simple example:

import React, { useState } from 'react';
import axios from 'axios';

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);
    await axios.post('/api/upload/', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type='file' onChange={handleFileChange} />
      <button type='submit'>Upload</button>
    </form>
  );
};

This component allows users to select a file and upload it.