How to Use a Simple Form Submit with Files in React

Jun 29, 2020 • 6 Minute Read

Introduction

Uploading images or files is a major function of any app. It is an essential requirement for creating a truly full-stack app. For example, Facebook, Instagram, and Snapchat all have the functionality to upload images and videos.

In traditional HTML sites, the file upload form forces a page refresh, which might be confusing to users. Also, you might want to customize the look of the file input in the form to make it resonate with your overall app design. When it comes to both of these issues, React can help you provide a better user experience.

This guide will get you up and running with file uploads in React.

Creating a Basic Form

In your App.js file, create a basic form that with a name field and a file input.

      import React from "react";

const App = () => {
  return (
    <div className="App">
      <form>
        <input type="text" />

        <input type="file" />
      </form>
    </div>
  );
};
    

Now, add state in the component to store the name and the file data.

      import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");
  const [selectedFile, setSelectedFile] = useState(null);
  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <input
          type="file"
          value={selectedFile}
          onChange={(e) => setSelectedFile(e.target.files[0])}
        />
      </form>
    </div>
  );
};
    

Creating a Custom File Uploader Component

Now that the basic form is set up, create a custom file uploader component that can be reused across multiple forms in the app.

If you check the output of the current form, you will notice that the file input doesn't have a great look; that's because the browser defines its default styling. In this section, you will learn how to create a file upload component with custom styling.

      const FileUploader = () => {
    const handleFileInput = () => {}

    return (
        <div className="file-uploader">
            <input type="file" onChange={handleFileInput}>
        </div>
    )
}
    

To create a custom file uploader, the first step is to hide the default input and trigger the change event using a ref.

      import React, {useRef} from 'react'

const FileUploader = ({onFileSelect}) => {
    const fileInput = useRef(null)

    const handleFileInput = (e) => {
        // handle validations
        onFileSelect(e.target.files[0])
    }

    return (
        <div className="file-uploader">
            <input type="file" onChange={handleFileInput}>
            <button onClick={e => fileInput.current && fileInput.current.click()} className="btn btn-primary">
        </div>
    )
}
    

You can style the upload button to match the theme of your overall application. Send the uploaded file back to the parent component using a callback prop; in this case, it is onFileSelect. Inside the handleFileInput method, you can do validations like checking for filesize, file extensions, etc., and based on that, send feedback to the parent component using callback props like onFileSelectSuccess and onFileSelectError.

      const handleFileInput = (e) => {
  // handle validations
  const file = e.target.files[0];
  if (file.size > 1024)
    onFileSelectError({ error: "File size cannot exceed more than 1MB" });
  else onFileSelectSuccess(file);
};
    

Adding the File Uploader Component to the Form

Add the file uploader component as follows :

      import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");
  const [selectedFile, setSelectedFile] = useState(null);

  const submitForm = () => {};

  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <FileUploaded
          onFileSelectSuccess={(file) => setSelectedFile(file)}
          onFileSelectError={({ error }) => alert(error)}
        />

        <button onClick={submitForm}>Submit</button>
      </form>
    </div>
  );
};
    

Uploading Files Using FormData

Upload a selected file using the FormData object. Append the name and file using the append method of the formData object.

      const submitForm = () => {
  const formData = new FormData();
  formData.append("name", name);
  formData.append("file", selectedFile);

  axios
    .post(UPLOAD_URL, formData)
    .then((res) => {
      alert("File Upload success");
    })
    .catch((err) => alert("File Upload Error"));
};
    

That's pretty much it. You have successfully created and added a custom file upload component.

Conclusion

File uploading is an essential part of any web app. You can use other third-party libraries to create custom file upload inputs, but you should have a fair idea of how they are implemented under the hood.

There are several instances where file uploads are required, but with some customization. Third-party libraries may not always help you out in such cases, however, your custom file upload utility can.

Learn More

Explore these React courses from Pluralsight to continue learning: