File Upload and POST Request using ReactJS
ReactJS makes life simpler. If you are already working with it, you would be knowing it. I just wanted to demonstrate the working of file-upload and sending the uploaded file as a POST request.
For the demonstration I used the React Boilerplate and was following the Redux architecture. I will be only sharing the components that I used for file upload and POST request. This will definitely help you guys to understand and add the component to your project.
Dependencies
I will be using Request.post() method of the superagent library to the send our post request. I have used posttestserver for testing our post request. ‘.set’ is where we give our headers, ‘.send’ is where we attach the file that is to be sent. We can also use ‘.attach’ a file. ‘.on’ is used to find out the progress of the file upload. For demonstration purpose we just show the value of percentage complete. The value can be used for several other purposes such as progress bar, to calculate time remaining, etc.
Here is the code for uploading and sending the uploaded file as a POST request.
We can see the progress output in the console window:
You can find the gist of the code here.
Happy coding!!!
