React Tips & Tricks: Uploading a File With A Progress Bar

• react-final-form

  28 7,344 1.3 JavaScript

  🏁 High performance subscription-based form state management for React

  

Forms are often tricky to get right with React. While there are great libraries like formik or React Final Form to do the heavy lefting for us, handling file upload still isn't always straightforward.

• file-upload-progress-bar

  1 2 0.0 TypeScript

Finally, we need a way to submit the data. For testing purposes I've created a small API in Flask you can find it in the repository for this article. It's just a single endpoint that listens for POST requests and returns a 201.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• axios

  446 104,300 8.6 JavaScript

  Promise based HTTP client for the browser and node.js

  

Now, we can't POST our Data as json because we're want to send a file and json doesn't handle binary data. We need to send form-data instead. We'll use axios to send the request, as it comes in handy to display the progress as we'll see in the next section.

• formik

  44 28,948 6.9 TypeScript

  Discontinued Build forms in React, without the tears 😭 [Moved to: https://github.com/jaredpalmer/formik]

  

Forms are often tricky to get right with React. While there are great libraries like formik or React Final Form to do the heavy lefting for us, handling file upload still isn't always straightforward.

Suggest a related project