- \n
- create-react-app CLI tool<\/li>\n
- Node.js<\/li>\n
- Formidable package<\/li>\n
- Concurrently package<\/li>\n
- Visual Studio Code IDE<\/li>\n<\/ul>\n
create-react-app is a command line tool from the folks who created React. This tool allows us to quickly generate the skeletal or structure upon which we can build a full blown ReactJS Application. We use it here to create the starting point of our example. We use Node.js to build a simple API which allows us to post the file we want to upload. Node.js is basically JavaScript on the server side. The formidable npm package allows us to parse and save the uploaded file. Concurrently package will allow us to launch both our client side as well as server side code simultaneously.<\/p>\n
Visual Studio Code IDE is my favorite IDE for JavaScript development. But feel free to use a different editor if you need to. <\/p>\n
2. Application Structure<\/h2>\n
First we generate our client side ReactJS application structure by executing the below command:<\/p>\n
>npx create-react-app my-app\n<\/pre>\n
This command generated the following folder structure of our application.<\/p>\n
\n![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/05\/ClientStructureFileUpload.jpg\")
Project Structure<\/figcaption><\/figure>\n<\/div>\n Now let us setup our Server side API project structure. Firstly let us create a folder named api and place a single file under it named index.js. Then let us install our dependency viz., Formidable by running the below command:<\/p>\n
\/api>npm i formidable\n<\/pre>\n
This will install our dependency and also save it in the newly created package.json file. Now the structure of our server side project should look like below:<\/p>\n
\n![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/05\/ServerSideStructureFileUpload.jpg\")
Project Structure<\/figcaption><\/figure>\n<\/div>\n We are not set and good to go with both our client side and server side application structure set up. Next let us start working on our client side application.<\/p>\n
3. Client Side Application<\/h2>\n
We will write two components to achieve the File uploading functionality. One would be a ProgressBar component that takes as its props the percentage of completion. Second the FileUpload component that renders an input tag of type file. We hide this input and instead show a button. On the click of this button we simulate a click on the file input. This in turn triggers the select file dialog. Once the user selects file(s) we process them and post them to our server side API. The code for our simple Progress Bar component looks like below:<\/p>\n
ProgressBar.js<\/em><\/span>
<\/div> <\/div><\/p>\nimport React from 'react';\n\nfunction ProgressBar(props) {\n return <div \nstyle={{ height: '7px', \n width: '220px', \n backgroundColor: 'whitesmoke' }}>\n <div \nstyle={{ \n height: '100%', \n width: props.progress, \n backgroundColor: 'blue' }}><\/div>\n <\/div>;\n}\n\nexport default ProgressBar;<\/pre>\nThe code for our main FileUpload component looks like below:<\/p>\n
FileUpload.js<\/em><\/span><\/p>\n
import React, { useState, createRef } from 'react';\nimport ProgressBar from '.\/ProgressBar';\n\nfunction FileUploader(props) {\n const [progress, setProgress] = useState(\"0%\");\n let files = [];\n const fileInput = createRef();\n const processFiles = () => {\n var request = new XMLHttpRequest();\n setProgress(\"0%\");\n files = fileInput.current.files;\n if (files.length === 0) return;\n request.upload.addEventListener(\"progress\", showProgress);\n request.open(\"POST\", \"\/uploadFile\", true);\n var formData = new FormData();\n for (var file = 0; file < files.length; file++) {\n\n formData.append(\"file\" + file, \n files[file], files[file].name);\n\n }\n request.send(formData);\n }\n const showProgress = (evt) => {\n let percentage = (((evt.loaded \/ evt.total) * 100)) + \"%\";\n setProgress(percentage);\n }\n return <>\n <input type=\"file\" multiple={true} id='browser' \n style={{ display: 'none' }} ref={fileInput} \n onChange={processFiles} \/>\n <button \nonClick={() => { document.getElementById('browser').click();}}>\n Browse<\/button>\n <ProgressBar progress={progress} \/>\n {progress === \"100%\" && \n <span>File Uploaded Successfully!<\/span>}\n <\/>\n\n}\n\nexport default FileUploader;<\/pre>\nNow let us turn our attention to the server side code. <\/p>\n
4. Server Side API<\/h2>\n
We use the
http<\/code> module in Nodejs to create a basic API. We accept POST request, The API expects the request body to have files that are to be uploaded. The API places the files in the\"c:\/data\/\" <\/code>folder. The code for our API looks like below:<\/p>\nindex.js<\/em><\/span><\/p>\n
var http = require(\"http\");\nvar url = require(\"url\");\nvar fs = require(\"fs\");\nvar formidable = require(\"formidable\");\nvar port = 8090;\nvar host = \"localhost\";\n\nhttp.createServer(function (req, res) {\n var path = url.parse(req.url, true);\n if (path.pathname.endsWith(\"uploadFile\")) {\n var form = new formidable.IncomingForm();\n\n form.parse(req, function (err, fields, files) {\n\n for (var file in files) {\n if (!files.hasOwnProperty(file)) continue;\n var oldpath = files[file].path;\n var newpath = `C:\/data\/${files[file].name}`;\n fs.renameSync(oldpath, newpath);\n }\n res.write('File uploaded and moved!');\n res.end();\n });\n\n }\n\n}).listen(port, host);<\/pre>\n5. Running the Application<\/h2>\n
To run this application, we need to perform a couple of steps. First we need concurrently, we install it to the root of our application like below:<\/p>\n
\/>npm i concurrently\n<\/pre>\n
Our completed project structure with both server side and client side code should now look like below:<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/05\/CompleteProjectStructureFileUploadReactJS.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/05\/Project\u014cutputFileUploadReactJS-1.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/05\/Project\u014cutputFileUploadReactJS-2.jpg\")