{"id":38411,"date":"2025-05-09T11:48:18","date_gmt":"2025-05-09T06:18:18","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=38411"},"modified":"2025-10-15T16:31:05","modified_gmt":"2025-10-15T11:01:05","slug":"react-file-uploader-progress-bar-nodejs-typescript","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript","title":{"rendered":"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript"},"content":{"rendered":"<p>This blog covers how to implement the functionality of uploading multiple files in a web application using React, Node.js, and TypeScript with a file upload component. You&#8217;ll build a fully functional React file uploader with a progress bar that tracks real-time upload progress. We\u2019ll also integrate a simple Node.js backend using Multer to handle server-side uploads efficiently. Whether you&#8217;re building a React multiple file upload feature or enhancing user experience with a file upload progress bar, this guide walks through each step in detail. If you&#8217;re working with a <a href=\"https:\/\/mobisoftinfotech.com\/services\/reactjs-development-company\"><strong>reactjs development company<\/strong><\/a>, this setup can easily be adapted into a larger production-grade application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<p><strong>1. Basic understanding of Node.js, React, TypeScript, and npm.<br>2. Node.js installed on your system (if you don&#8217;t have it, download it from<\/strong><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> here<\/strong><\/a><strong>).<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up a React Project<\/strong><\/h2>\n\n\n\n<p>First, create a new React TS with Vite project:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">npm create vite@latest <span class=\"hljs-keyword\">new<\/span>-project-name --template react<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Follow the CLI prompts to complete the setup. This approach is especially helpful when you&#8217;re aiming to <a href=\"https:\/\/mobisoftinfotech.com\/services\/hire-reactjs-developers\"><strong>hire reactjs developers<\/strong><\/a> who can efficiently implement scalable frontend architectures using TypeScript and modern tooling.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Install Required Dependencies<\/strong><\/h3>\n\n\n\n<p><strong>1. Navigate to the project directory<\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">cd <span class=\"hljs-keyword\">new<\/span>-project-name<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>2. Install Dependencies<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install<\/code><\/span><\/pre>\n\n\n<p><strong>3. Run the Project<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm run dev<\/code><\/span><\/pre>\n\n\n<p><strong>Note:&nbsp; <\/strong>If you get a Sass-embedded error, then run this&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install -D sass-embedded<\/code><\/span><\/pre>\n\n\n<p><strong>Step 2: <\/strong><strong>Basic Example of Uploading Multiple Files&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-upload-progress-bar.png\" alt=\"File upload process showing real-time progress bar in React\" class=\"wp-image-38426\" title=\"Visualizing File Upload Progress in React\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20294%22%3E%3C%2Fsvg%3E\" alt=\"File upload process showing real-time progress bar in React\" class=\"wp-image-38426 lazyload\" title=\"Visualizing File Upload Progress in React\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-upload-progress-bar.png\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Create a file-upload.tsx file inside the src folder.<\/strong><\/h4>\n\n\n\n<p><strong>src\/file-upload.tsx<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">import React, { useRef, useState } from <span class=\"hljs-string\">\"react\"<\/span>;\nimport <span class=\"hljs-string\">\".\/file-upload.scss\"<\/span>;\n\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">FileUpload<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n <span class=\"hljs-keyword\">const<\/span> &#091;files, setFiles] = useState&lt;File&#091;]&gt;(&#091;]);\n <span class=\"hljs-keyword\">const<\/span> &#091;progress, setProgress] = useState&lt;number&gt;(<span class=\"hljs-number\">0<\/span>);\n <span class=\"hljs-keyword\">const<\/span> &#091;uploading, setUploading] = useState(<span class=\"hljs-keyword\">false<\/span>);\n <span class=\"hljs-keyword\">const<\/span> &#091;successMessage, setSuccessMessage] = useState&lt;string | <span class=\"hljs-keyword\">null<\/span>&gt;(<span class=\"hljs-keyword\">null<\/span>);\n <span class=\"hljs-keyword\">const<\/span> &#091;errorMessage, setErrorMessage] = useState&lt;string | <span class=\"hljs-keyword\">null<\/span>&gt;(<span class=\"hljs-keyword\">null<\/span>);\n <span class=\"hljs-keyword\">const<\/span> &#091;filesDetails, setFilesDetails] = useState&lt;\n    { fileName: string; dataURL: string }&#091;]\n  &gt;(&#091;]);\n <span class=\"hljs-keyword\">const<\/span> &#091;userName, setUserName] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n <span class=\"hljs-keyword\">const<\/span> inputRef = useRef&lt;HTMLInputElement&gt;(<span class=\"hljs-keyword\">null<\/span>);\n\n\n  <span class=\"hljs-keyword\">const<\/span> callGetFilesApi = async (username: string) =&gt; {\n    <span class=\"hljs-keyword\">try<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> response = await fetch(\n        `http:<span class=\"hljs-comment\">\/\/localhost:8080\/api\/files\/upload\/${username}`<\/span>\n      );\n      <span class=\"hljs-keyword\">if<\/span> (response.ok) {\n        <span class=\"hljs-keyword\">const<\/span> data = await response.json();\n        setFilesDetails(data);\n      } <span class=\"hljs-keyword\">else<\/span> {\n        <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> Error(<span class=\"hljs-string\">\"Failed to fetch images.\"<\/span>);\n      }\n    } <span class=\"hljs-keyword\">catch<\/span> {\n      setErrorMessage(<span class=\"hljs-string\">\"Failed to fetch images.\"<\/span>);\n    }\n  };\n\n\n  <span class=\"hljs-keyword\">const<\/span> handleFileChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (e.target.files) {\n      setFiles(<span class=\"hljs-keyword\">Array<\/span>.from(e.target.files));\n    }\n  };\n\n\n  <span class=\"hljs-keyword\">const<\/span> downloadImage = (dataUrl: string, fileName: string) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> link = document.createElement(<span class=\"hljs-string\">\"a\"<\/span>);\n    link.href = dataUrl;\n    link.download = fileName;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n  };\n\n\n  <span class=\"hljs-keyword\">const<\/span> handleFileUpload = async () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData();\n    formData.append(<span class=\"hljs-string\">\"username\"<\/span>, userName.trim());\n    files.<span class=\"hljs-keyword\">forEach<\/span>((file) =&gt; formData.append(<span class=\"hljs-string\">\"files\"<\/span>, file));\n\n\n    setUploading(<span class=\"hljs-keyword\">true<\/span>);\n    setProgress(<span class=\"hljs-number\">0<\/span>);\n    setSuccessMessage(<span class=\"hljs-keyword\">null<\/span>);\n    setErrorMessage(<span class=\"hljs-keyword\">null<\/span>);\n\n\n    <span class=\"hljs-keyword\">try<\/span> {\n      await uploadFiles(formData, (percent) =&gt; {\n        <span class=\"hljs-keyword\">const<\/span> displayedProgress = Math.min(percent, <span class=\"hljs-number\">98<\/span>);\n        setProgress(displayedProgress);\n      });\n      await <span class=\"hljs-keyword\">new<\/span> Promise((res) =&gt; setTimeout(res, <span class=\"hljs-number\">300<\/span>));\n      setProgress(<span class=\"hljs-number\">100<\/span>);\n      await <span class=\"hljs-keyword\">new<\/span> Promise((res) =&gt; setTimeout(res, <span class=\"hljs-number\">500<\/span>));\n\n\n      <span class=\"hljs-comment\">\/\/ Show success message<\/span>\n      setSuccessMessage(<span class=\"hljs-string\">\"Files uploaded successfully!\"<\/span>);\n      setTimeout(() =&gt; setSuccessMessage(<span class=\"hljs-keyword\">null<\/span>), <span class=\"hljs-number\">5000<\/span>);\n    } <span class=\"hljs-keyword\">catch<\/span> {\n      setErrorMessage(<span class=\"hljs-string\">\"Error uploading files. Please try again.\"<\/span>);\n      setTimeout(() =&gt; setErrorMessage(<span class=\"hljs-keyword\">null<\/span>), <span class=\"hljs-number\">5000<\/span>);\n    } <span class=\"hljs-keyword\">finally<\/span> {\n      setUploading(<span class=\"hljs-keyword\">false<\/span>);\n    }\n  };\n\n\n  <span class=\"hljs-keyword\">const<\/span> uploadFiles = (\n    formData: FormData,\n    onProgress: (percent: number) =&gt; void\n  ): Promise&lt;void&gt; =&gt; {\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> Promise&lt;void&gt;((resolve, reject) =&gt; {\n      <span class=\"hljs-keyword\">const<\/span> xhr = <span class=\"hljs-keyword\">new<\/span> XMLHttpRequest();\n\n\n      xhr.upload.onprogress = (event) =&gt; {\n        <span class=\"hljs-keyword\">if<\/span> (event.lengthComputable) {\n          <span class=\"hljs-keyword\">const<\/span> percent = (event.loaded \/ event.total) * <span class=\"hljs-number\">100<\/span>;\n          onProgress(percent);\n        }\n      };\n\n\n      xhr.onload = () =&gt; {\n        <span class=\"hljs-keyword\">if<\/span> (xhr.status === <span class=\"hljs-number\">200<\/span>) {\n          <span class=\"hljs-keyword\">const<\/span> responseJson = JSON.parse(xhr.responseText);\n          <span class=\"hljs-keyword\">const<\/span> user = responseJson.data&#091;<span class=\"hljs-number\">0<\/span>];\n          inputRef.current &amp;&amp; (inputRef.current.value = <span class=\"hljs-string\">\"\"<\/span>);\n          setFiles(&#091;]);\n          setUserName(<span class=\"hljs-string\">\"\"<\/span>);\n          callGetFilesApi(user);\n          resolve();\n        } <span class=\"hljs-keyword\">else<\/span> {\n          reject(<span class=\"hljs-string\">\"Upload failed\"<\/span>);\n        }\n      };\n\n\n      xhr.onerror = () =&gt; reject(<span class=\"hljs-string\">\"Upload failed\"<\/span>);\n\n\n      xhr.open(<span class=\"hljs-string\">\"POST\"<\/span>, <span class=\"hljs-string\">\"http:\/\/localhost:8080\/api\/files\/upload\"<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n      xhr.send(formData);\n    });\n  };\n\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;div className=<span class=\"hljs-string\">\"center-div\"<\/span>&gt;\n      &lt;div className=<span class=\"hljs-string\">\"file-upload-container\"<\/span> style={{ width: <span class=\"hljs-string\">\"300px\"<\/span> }}&gt;\n        &lt;h1 className=<span class=\"hljs-string\">\"file-upload-heading\"<\/span>&gt;Upload Files&lt;\/h1&gt;\n        &lt;input\n          type=<span class=\"hljs-string\">\"text\"<\/span>\n          className=<span class=\"hljs-string\">\"user-input\"<\/span>\n          name=<span class=\"hljs-string\">\"userName\"<\/span>\n          placeholder=<span class=\"hljs-string\">\"User Name\"<\/span>\n          value={userName}\n          onChange={(e) =&gt; setUserName(e.target.value)}\n        \/&gt;\n        &lt;input\n          type=<span class=\"hljs-string\">\"file\"<\/span>\n          multiple\n          ref={inputRef}\n          onChange={handleFileChange}\n          className=<span class=\"hljs-string\">\"file-upload-input\"<\/span>\n        \/&gt;\n        &lt;button\n          onClick={handleFileUpload}\n          className=<span class=\"hljs-string\">\"file-upload-button\"<\/span>\n          disabled={!userName || files.length === <span class=\"hljs-number\">0<\/span>}\n        &gt;\n          {uploading ? <span class=\"hljs-string\">\"Uploading...\"<\/span> : <span class=\"hljs-string\">\"Upload\"<\/span>}\n        &lt;\/button&gt;\n\n\n        {uploading &amp;&amp; (\n          &lt;&gt;\n            &lt;div className=<span class=\"hljs-string\">\"progress-container\"<\/span>&gt;\n              &lt;div\n                className=<span class=\"hljs-string\">\"progress-bar\"<\/span>\n                style={{ width: <span class=\"hljs-string\">'${progress}%'<\/span> }}\n              &gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;p className=<span class=\"hljs-string\">\"progress-text\"<\/span>&gt;{Math.round(progress)}%&lt;\/p&gt;\n          &lt;\/&gt;\n        )}\n\n\n        {successMessage &amp;&amp; &lt;p className=<span class=\"hljs-string\">\"success-message\"<\/span>&gt;{successMessage}&lt;\/p&gt;}\n        {errorMessage &amp;&amp; &lt;p className=<span class=\"hljs-string\">\"error-message\"<\/span>&gt;{errorMessage}&lt;\/p&gt;}\n      &lt;\/div&gt;\n\n\n      {filesDetails.length &gt; <span class=\"hljs-number\">0<\/span> &amp;&amp; (\n        &lt;div className=<span class=\"hljs-string\">\"div\"<\/span> style={{ width: <span class=\"hljs-string\">\"60%\"<\/span> }}&gt;\n          &lt;div className=<span class=\"hljs-string\">\"img-div\"<\/span> style={{ padding: <span class=\"hljs-string\">\"10px\"<\/span> }}&gt;\n            &lt;div className=<span class=\"hljs-string\">\"images\"<\/span>&gt;\n              {filesDetails.map((file, index) =&gt; {\n                <span class=\"hljs-keyword\">const<\/span> extension =\n                  file.fileName.split(<span class=\"hljs-string\">\".\"<\/span>).pop()?.toLowerCase() || <span class=\"hljs-string\">\"\"<\/span>;\n                <span class=\"hljs-keyword\">const<\/span> isImage = &#091;<span class=\"hljs-string\">\"jpg\"<\/span>, <span class=\"hljs-string\">\"jpeg\"<\/span>, <span class=\"hljs-string\">\"png\"<\/span>, <span class=\"hljs-string\">\"gif\"<\/span>, <span class=\"hljs-string\">\"webp\"<\/span>].includes(\n                  extension\n                );\n\n\n                <span class=\"hljs-keyword\">const<\/span> getFileIcon = (ext: string): string =&gt; {\n                  <span class=\"hljs-keyword\">const<\/span> icons: { &#091;key: string]: string } = {\n                    pdf: <span class=\"hljs-string\">\"\"<\/span>,\n                    doc: <span class=\"hljs-string\">\"\"<\/span>,\n                    docx: <span class=\"hljs-string\">\"\"<\/span>,\n                    xls: <span class=\"hljs-string\">\"\"<\/span>,\n                    csv: <span class=\"hljs-string\">\"\"<\/span>,\n                    xlsx: <span class=\"hljs-string\">\"\"<\/span>,\n                    txt: <span class=\"hljs-string\">\"\"<\/span>,\n                    zip: <span class=\"hljs-string\">\"\"<\/span>,\n                    rar: <span class=\"hljs-string\">\"\"<\/span>,\n                  };\n                  <span class=\"hljs-keyword\">return<\/span> icons&#091;ext] || <span class=\"hljs-string\">\"\"<\/span>;\n                };\n\n\n                <span class=\"hljs-keyword\">return<\/span> (\n                  &lt;div key={index} className=<span class=\"hljs-string\">\"img-container\"<\/span>&gt;\n                    {isImage ? (\n                      &lt;img\n                        src={file.dataURL}\n                        className=<span class=\"hljs-string\">\"image\"<\/span>\n                        height={<span class=\"hljs-number\">50<\/span>}\n                        width={<span class=\"hljs-number\">50<\/span>}\n                        alt={file.fileName}\n                      \/&gt;\n                    ) : (\n                      &lt;div\n                        className=<span class=\"hljs-string\">\"file-icon\"<\/span>\n                        style={{\n                          height: <span class=\"hljs-string\">\"100px\"<\/span>,\n                          width: <span class=\"hljs-string\">\"100px\"<\/span>,\n                          fontSize: <span class=\"hljs-string\">\"60px\"<\/span>,\n                          display: <span class=\"hljs-string\">\"flex\"<\/span>,\n                          alignItems: <span class=\"hljs-string\">\"center\"<\/span>,\n                          justifyContent: <span class=\"hljs-string\">\"center\"<\/span>,\n                          backgroundColor: <span class=\"hljs-string\">\"#eee\"<\/span>,\n                          borderRadius: <span class=\"hljs-number\">4<\/span>,\n                        }}\n                      &gt;\n                        {getFileIcon(extension)}\n                      &lt;\/div&gt;\n                    )}\n                    &lt;button\n                      className=<span class=\"hljs-string\">\"download-button\"<\/span>\n                      onClick={() =&gt; downloadImage(file.dataURL, file.fileName)}\n                    &gt;\n                      Download\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n                );\n              })}\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n}\n\n\nexport <span class=\"hljs-keyword\">default<\/span> FileUpload;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you&#8217;re exploring practical uses of TypeScript in React, check out this detailed guide on<a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/learn-typescript-with-react-by-building-a-crud-application\"> Learn TypeScript with React by Building a CRUD Application<\/a>.<\/p>\n\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1. State Variables:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>files<\/strong>: Stores selected files for the upload using the file upload react component.<\/li>\n\n\n\n<li><strong>Progress<\/strong>: Tracks the upload progress bar as a percentage (0\u2013100).<\/li>\n\n\n\n<li><strong>uploading<\/strong>: Boolean flag indicating if the file upload in React JS is in progress.<\/li>\n\n\n\n<li><strong>successMessage<\/strong>: Stores the success message to be displayed after a successful upload.<\/li>\n\n\n\n<li><strong>errorMessage<\/strong>: Stores the error message to be displayed if the upload fails.<\/li>\n\n\n\n<li><strong>filesDetails<\/strong>: Holds details of previously uploaded files (file name and data URL for images).<\/li>\n\n\n\n<li><strong>userName<\/strong>: Stores the username entered by the user.<\/li>\n\n\n\n<li><strong>inputRef<\/strong>: A reference to the file input element used to reset the input field after upload.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2. Fetching Previously Uploaded Files:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>callGetFilesApi<\/strong>: Fetches the list of uploaded files from the server using the provided username. Updates the files state with the fetched data or shows an error if the request fails.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>3. Handling File Selection:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>handleFileChange<\/strong>: Triggered when the user selects files. It updates the files state with the selected files.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>4. File Upload Process:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>handleFileUpload<\/strong>: Handles the file upload process.\n<ul class=\"wp-block-list\">\n<li>Creates a FormData object and appends the selected files and username.<\/li>\n\n\n\n<li>Calls the uploadFiles function to upload the files.<\/li>\n\n\n\n<li>Updates the progress state during the upload to show progress in percentage.<\/li>\n\n\n\n<li>Displays a success message on successful upload and an error message if it fails.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>5. Uploading Files with Progress:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>uploadFiles<\/strong>: Uses XMLHttpRequest to upload the files to the server.\n<ul class=\"wp-block-list\">\n<li>Tracks upload progress using the onprogress event and calls onProgress to update the progress.<\/li>\n\n\n\n<li>Upon success, it clears the file input, resets the username, and fetches the list of uploaded files.<\/li>\n\n\n\n<li>On failure, it rejects with an error message.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>6. Rendering the Upload UI:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Displays:\n<ul class=\"wp-block-list\">\n<li>A text input for the username.<\/li>\n\n\n\n<li>A file input for file selection.<\/li>\n\n\n\n<li>A button to trigger the upload, which shows &#8220;Uploading&#8230;&#8221; when in progress.<\/li>\n\n\n\n<li>Success\/Error messages based on the result of the upload.<\/li>\n\n\n\n<li>A progress bar that shows the upload progress.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>If files have been previously uploaded, they show them with a download button next to each file.<\/li>\n\n\n\n<li>All file icons are visible except images.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>7. Downloading Files:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>downloadImage<\/strong>: A function that allows users to download the uploaded images. Triggers a download by simulating a click event.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Concepts:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React Hooks<\/strong>: Used for state management (useState) and managing references (useRef).<\/li>\n\n\n\n<li><strong>File Upload<\/strong>: Uses FormData to package files and XMLHttpRequest to handle the upload and progress.<\/li>\n\n\n\n<li><strong>Progress Bar<\/strong>: Updates as files are uploaded, providing visual feedback to the user.<\/li>\n\n\n\n<li><strong>Error and Success Handling<\/strong>: Displays messages based on the success or failure of the upload.<\/li>\n\n\n\n<li><strong>Downloading<\/strong>: Users can download images they\u2019ve uploaded.<\/li>\n<\/ul>\n\n\n\n<p>For more tutorials that reinforce concepts like this, refer to our<a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/best-react-tutorials\"> <strong>Top 10 List of Best React Tutorials: Learn React JS for Free in 2022<\/strong><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/reactjs-development-company?utm_source=blog&amp;utm_medium=react-file-uploader-progress-bar-nodejs-typescript-cta1\"><noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/next-big-idea-react-development.png\" alt=\"ReactJS development agency CTA for building scalable apps\" class=\"wp-image-38423\" title=\"Your Next Big Idea Needs the Right Tech\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20363%22%3E%3C%2Fsvg%3E\" alt=\"ReactJS development agency CTA for building scalable apps\" class=\"wp-image-38423 lazyload\" title=\"Your Next Big Idea Needs the Right Tech\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/next-big-idea-react-development.png\"><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Create a file-upload.scss file inside the src folder.<\/strong><\/h4>\n\n\n\n<p><strong>src\/file-upload.scss<\/strong><\/p>\n\n\n\n<p>Please copy the below scss codes<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">\/.file-upload-container {\n&nbsp;display: flex;\n&nbsp;flex-direction: column;\n&nbsp;padding: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;font-family: Arial, sans-serif;\n}\n.file-upload-heading {\n&nbsp;font-size: <span class=\"hljs-number\">2<\/span>rem;\n&nbsp;margin-bottom: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;color: <span class=\"hljs-comment\">#333;<\/span>\n&nbsp;text-align: center;\n}\n.file-upload-input {\n&nbsp;padding: <span class=\"hljs-number\">10<\/span>px;\n&nbsp;font-size: <span class=\"hljs-number\">1<\/span>rem;\n&nbsp;border-radius: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;border: <span class=\"hljs-number\">1<\/span>px solid <span class=\"hljs-comment\">#ccc;<\/span>\n&nbsp;margin-bottom: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;cursor: pointer;\n}\n.user-input {\n&nbsp;padding: <span class=\"hljs-number\">10<\/span>px;\n&nbsp;font-size: <span class=\"hljs-number\">1<\/span>rem;\n&nbsp;margin-bottom: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;border-radius: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;border: <span class=\"hljs-number\">1<\/span>px solid <span class=\"hljs-comment\">#ccc;<\/span>\n&nbsp;width: <span class=\"hljs-number\">276<\/span>px;\n&nbsp;cursor: pointer;\n}\n.file-upload-button {\n&nbsp;padding: <span class=\"hljs-number\">10<\/span>px <span class=\"hljs-number\">20<\/span>px;\n&nbsp;background-color: <span class=\"hljs-comment\">#4caf50;<\/span>\n&nbsp;color: white;\n&nbsp;border: none;\n&nbsp;border-radius: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;font-size: <span class=\"hljs-number\">1<\/span>rem;\n&nbsp;cursor: pointer;\n&nbsp;transition: background-color <span class=\"hljs-number\">0.3<\/span>s ease;\n}\n.file-upload-button:hover {\n&nbsp;background-color: <span class=\"hljs-comment\">#45a049;<\/span>\n}\n.file-upload-button:disabled {\n&nbsp;background-color: <span class=\"hljs-comment\">#ccc; \/* Light grey *\/<\/span>\n&nbsp;color: <span class=\"hljs-comment\">#888; \/* Dark grey text *\/<\/span>\n&nbsp;cursor: not-allowed;\n}\n.center-div {\n&nbsp;display: flex;\n&nbsp;flex-direction: column;\n&nbsp;align-items: center !important;\n&nbsp;width: <span class=\"hljs-number\">100<\/span>% !important;\n&nbsp;min-height: <span class=\"hljs-number\">85<\/span>vh !important;\n}\n.file-<span class=\"hljs-keyword\">list<\/span>-container {\n&nbsp;width: <span class=\"hljs-number\">100<\/span>%;\n}\n.file-item {\n&nbsp;margin-bottom: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;text-align: center;\n&nbsp;width: <span class=\"hljs-number\">100<\/span>%;\n}\n.file-name {\n&nbsp;margin-bottom: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;font-size: <span class=\"hljs-number\">1.1<\/span>rem;\n&nbsp;color: <span class=\"hljs-comment\">#333;<\/span>\n}\n.progress-container {\n&nbsp;width: <span class=\"hljs-number\">100<\/span>%;\n&nbsp;background-color: <span class=\"hljs-comment\">#f3f3f3;<\/span>\n&nbsp;border-radius: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;margin-top: <span class=\"hljs-number\">10<\/span>px;\n}\n.progress-bar {\n&nbsp;height: <span class=\"hljs-number\">10<\/span>px;\n&nbsp;border-radius: <span class=\"hljs-number\">5<\/span>px;\n&nbsp;background-color: <span class=\"hljs-comment\">#4caf50;<\/span>\n}\n.progress-text {\n&nbsp;font-size: <span class=\"hljs-number\">1<\/span>rem;\n&nbsp;color: <span class=\"hljs-comment\">#555;<\/span>\n}\n.images {\n&nbsp;display: flex;\n&nbsp;gap: <span class=\"hljs-number\">20<\/span>px;\n&nbsp;flex-wrap: wrap;\n}\n.img-container {\n&nbsp;position: relative;\n&nbsp;display: inline-block;\n}\n.image {\n&nbsp;width: <span class=\"hljs-number\">100<\/span>px;\n&nbsp;height: <span class=\"hljs-number\">100<\/span>px;\n&nbsp;border-radius: <span class=\"hljs-number\">8<\/span>px;\n&nbsp;box-shadow: <span class=\"hljs-number\">2<\/span>px <span class=\"hljs-number\">2<\/span>px <span class=\"hljs-number\">10<\/span>px rgba(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n}\n.download-button {\n&nbsp;position: absolute;\n&nbsp;bottom: <span class=\"hljs-number\">2<\/span>px;\n&nbsp;right: <span class=\"hljs-number\">0<\/span>px;\n&nbsp;background: green;\n&nbsp;color: white;\n&nbsp;border: none;\n&nbsp;border-radius: <span class=\"hljs-number\">8<\/span>px;\n&nbsp;padding: <span class=\"hljs-number\">0<\/span>px;\n&nbsp;cursor: pointer;\n&nbsp;transition: background <span class=\"hljs-number\">0.3<\/span>s;\n&nbsp;height: <span class=\"hljs-number\">22<\/span>px;\n&nbsp;width: <span class=\"hljs-number\">100<\/span>px;\n&nbsp;text-align: center;\n}\n.img-style {\n&nbsp;height: <span class=\"hljs-number\">22<\/span>px !important;\n&nbsp;width: <span class=\"hljs-number\">20<\/span>px !important;\n}\n.img-div {\n&nbsp;justify-content: center;\n&nbsp;align-items: center;\n&nbsp;background-color: <span class=\"hljs-comment\">#f8f9fa;<\/span>\n&nbsp;padding: <span class=\"hljs-number\">10<\/span>px !important;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Setup of App.tsx<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Replace below code with src\/App.tsx codes and import <\/strong><strong>FileUpload.<\/strong><\/h5>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/App.css\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> FileUpload <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/file-upload\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">FileUpload<\/span> \/&gt;<\/span><\/span>;\n\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:&nbsp;<\/strong><\/p>\n\n\n\n<p>It is the root component of the React app, containing the main UI structure and application logic. All other components are nested within App.tsx to build the application&#8217;s layout and functionality. For the file react file upload component, you need to create code file-upload.tsx and scss file<\/p>\n\n\n\n<p>In app.css just update root id css<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#root<\/span> {\n\n<span class=\"hljs-attribute\">text-align<\/span>: center;\n\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Run the Project<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm run dev<\/code><\/span><\/pre>\n\n\n<p>Note:&nbsp; If you get a Sass-embedded error, then run this&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install -D sass-embedded<\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting up the Node.js Project<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-upload-nodejs-backend.png\" alt=\"File uploader integration with NodeJS backend in React\" class=\"wp-image-38427\" title=\"React File Upload Integration with NodeJS Backend\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20294%22%3E%3C%2Fsvg%3E\" alt=\"File uploader integration with NodeJS backend in React\" class=\"wp-image-38427 lazyload\" title=\"React File Upload Integration with NodeJS Backend\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-upload-nodejs-backend.png\"><\/figure>\n\n\n\n<p>Let\u2019s start by setting up the project environment using Node.js, Express and Multer.<\/p>\n\n\n\n<p>These steps are commonly followed by teams at any professional <a href=\"https:\/\/mobisoftinfotech.com\/services\/nodejs-development-company\"><strong>nodeJS development company<\/strong><\/a> building robust server-side APIs for file handling.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Initialize the Project<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new directory for your project:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    mkdir node-your-project<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Move into the project directory:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    cd node-your-project<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Initialize the node project:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    npm init -y<\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Install Dependencies<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install the core dependencies<\/strong> for the Express framework<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">&nbsp;&nbsp;&nbsp;&nbsp;npm install express<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install the typescript<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">&nbsp;   npm install typescript<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TypeScript Configuration<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    npx tsc --init<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install Multer<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    npm install multer<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install cors<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">    npm install cors<\/code><\/span><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&nbsp;Install TypeScript and necessary type definitions<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">     <span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">--save-dev<\/span> <span class=\"hljs-selector-tag\">typescript<\/span> <span class=\"hljs-selector-tag\">ts-node<\/span> <span class=\"hljs-keyword\">@types<\/span>\/express&nbsp; @types\/multer&nbsp; @types\/cors<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><strong>Basic Example: Upload Multiple Files<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Set Up Basic Express Server&nbsp;<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Create src folder and create a app.ts file<\/strong><\/h4>\n\n\n\n<p>Create the <code>src\/app.ts<\/code> file and set up a basic file upload server using Express.&nbsp;<\/p>\n\n\n\n<p><strong>&nbsp;src\/app.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> express <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"express\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> cors <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cors\"<\/span>;\n<span class=\"hljs-keyword\">const<\/span> app = express();\napp.use(cors());\napp.use(express.json());\napp.use(express.urlencoded({ <span class=\"hljs-attr\">extended<\/span>: <span class=\"hljs-literal\">true<\/span> }));\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> app;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation<\/strong>:<\/p>\n\n\n\n<p>This code sets up an Express server with CORS support, JSON and URL-encoded data parsing, and routes file-related requests to a file-routes module. The server is then exported for use in other parts of the application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Create a server.ts file<\/strong><\/h4>\n\n\n\n<p>Create the src\/<a href=\"http:\/\/server.ts\">server.ts<\/a> and start the Express server on port 8080 and log a message to confirm it&#8217;s running.<\/p>\n\n\n\n<p><strong>&nbsp;src\/server.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> app <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/app\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> PORT = <span class=\"hljs-number\">8080<\/span>;\n\napp.listen(PORT, () =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Server running on http:\/\/localhost:<span class=\"hljs-subst\">${PORT}<\/span>`<\/span>);\n\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>Please import the first app.ts&nbsp; and This code starts the Express server and makes it accessible on the specified port.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. <strong>Run the Project&nbsp; :&nbsp;<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx ts-node src\/server.ts<\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Create Files Upload Post API<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Create controller file in src\/controller folder<\/strong><\/h4>\n\n\n\n<p><strong>src\/controller\/files-upload-controller.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { NextFunction, Request, Response } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"express\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> uploadFiles = <span class=\"hljs-keyword\">async<\/span> (req: Request, <span class=\"hljs-attr\">res<\/span>: Response) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">try<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> files = req.files <span class=\"hljs-keyword\">as<\/span> Express.Multer.File&#091;];\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> uploadResult = <span class=\"hljs-keyword\">await<\/span> uploadFileService(files, req.body.username);\n\n&nbsp;&nbsp;&nbsp;&nbsp;res.status(<span class=\"hljs-number\">200<\/span>).json({\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"Files uploaded successfully\"<\/span>,\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">data<\/span>: uploadResult,\n\n&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;} <span class=\"hljs-keyword\">catch<\/span> (error) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;res.status(<span class=\"hljs-number\">500<\/span>).json({\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">\"File upload failed\"<\/span>,\n\n&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;}\n\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>This controller handles file uploads, uses a service to process the files, and sends a success or failure response back to the client. And you will get import&nbsp; error of service file , Then you need to create service file and required function and then import in controller<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Create service file in src\/service folder&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>&nbsp;src\/service\/file-services.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> path <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"path\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> fs <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"fs\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> uploadFileService = (\n\n&nbsp;&nbsp;files: Express.Multer.File&#091;],\n\n&nbsp;&nbsp;<span class=\"hljs-attr\">username<\/span>: string\n\n) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>&lt;string&#091;]&gt;<span class=\"hljs-function\">(<span class=\"hljs-params\">(resolve, reject<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">try<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> uploadDir = path.join(__dirname, <span class=\"hljs-string\">`..\/..\/uploads\/<span class=\"hljs-subst\">${username}<\/span>`<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">if<\/span> (!fs.existsSync(uploadDir)) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.mkdirSync(uploadDir, { <span class=\"hljs-attr\">recursive<\/span>: <span class=\"hljs-literal\">true<\/span> });\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> filePaths = files.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">file<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> filePath = path.join(uploadDir, file.originalname);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.writeFileSync(filePath, file.buffer);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> username;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(filePaths);\n\n&nbsp;&nbsp;&nbsp;&nbsp;} <span class=\"hljs-keyword\">catch<\/span> (error) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(error);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;});\n\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>This service function saves uploaded files to a user-specific directory using multer and returns the paths where the files were saved.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. <strong>Create routes file in src folder&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>src\/file-routes.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> express <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"express\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> multer <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"multer\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> {\n\n&nbsp;&nbsp;uploadFiles,\n\n} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/controller\/files-upload-controller\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> upload = multer({ <span class=\"hljs-attr\">storage<\/span>: multer.memoryStorage() });\n\n<span class=\"hljs-keyword\">const<\/span> router = express.Router();\n\nrouter.post(<span class=\"hljs-string\">\"\/upload\"<\/span>, upload.array(<span class=\"hljs-string\">\"files\"<\/span>), uploadFiles);\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> router;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>First import the uploadFiles controller function. and&nbsp; this route handles file uploads to a specific folder. It uses the files-upload-controller for handling the logic and multer middleware for managing the file storage.&nbsp;<\/p>\n\n\n\n<p>API URL-&nbsp; &nbsp; POST- <a href=\"http:\/\/localhost:8080\/api\/files\/upload\">http:\/\/localhost:8080\/api\/files\/upload<\/a><\/p>\n\n\n\n<p>Request &#8211; formData&nbsp;<\/p>\n\n\n\n<p><strong>username: <\/strong>user<br><strong>files: <\/strong>(binary)<br><strong>files: <\/strong>(binary)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Add these route codes in <\/strong><a href=\"http:\/\/app.ts\"><strong>app.ts<\/strong><\/a><strong> file and please import fileRoutes<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> fileRoutes <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/file-routes\"<\/span>\napp.use(<span class=\"hljs-string\">\"\/api\/files\"<\/span>, fileRoutes);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>5. Run the project&nbsp;<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx ts-node src\/server.ts<\/code><\/span><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Get Uploaded Files along with these API\u2019s codes<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/drag-drop-react-file-upload.png\" alt=\"Drag and drop file upload feature in React component\" class=\"wp-image-38428\" title=\"Implement Drag-and-Drop in React File Upload\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"294\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20294%22%3E%3C%2Fsvg%3E\" alt=\"Drag and drop file upload feature in React component\" class=\"wp-image-38428 lazyload\" title=\"Implement Drag-and-Drop in React File Upload\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/drag-drop-react-file-upload.png\"><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Create a getUploadedFiles function inside&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>src\/controller\/files-upload-controller.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> getUploadedFiles = <span class=\"hljs-keyword\">async<\/span> (\n\n&nbsp;&nbsp;req: Request,\n\n&nbsp;&nbsp;<span class=\"hljs-attr\">res<\/span>: Response,\n\n&nbsp;&nbsp;<span class=\"hljs-attr\">next<\/span>: NextFunction\n\n) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">try<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> images = <span class=\"hljs-keyword\">await<\/span> getUploadedFilesByUser(req.params.username);\n\n&nbsp;&nbsp;&nbsp;&nbsp;res.status(<span class=\"hljs-number\">200<\/span>).send(images);\n\n&nbsp;&nbsp;} <span class=\"hljs-keyword\">catch<\/span> (error) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> next(error);\n\n&nbsp;&nbsp;}\n\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>It\u2019s causing service function errors, so you need to create a function within the service file. After creating the function, import it into the controller. This function will handle retrieving the images uploaded by the user and send them back in the response, while also managing any errors that may arise during the process.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Create a getUploadedFilesByUser function inside&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>src\/service\/file-services.ts<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> getUploadedFilesByUser = <span class=\"hljs-function\">(<span class=\"hljs-params\">username: string<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> uploadDir = path.join(__dirname, <span class=\"hljs-string\">`..\/..\/uploads\/<span class=\"hljs-subst\">${username}<\/span>`<\/span>);\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> getImageDataURLs(uploadDir);\n\n};\n\n<span class=\"hljs-keyword\">const<\/span> getImageDataURLs = <span class=\"hljs-keyword\">async<\/span> (uploadedDir: string) =&gt; {\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> files = fs.readdirSync(uploadedDir);\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> imageDataURLs: { <span class=\"hljs-attr\">fileName<\/span>: string; dataURL: string }&#091;] = &#091;];\n\n&nbsp;&nbsp;files.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">file<\/span>) =&gt;<\/span> {\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> filePath = path.join(uploadedDir, file);\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> fileType = path.extname(file).substring(<span class=\"hljs-number\">1<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> imageBuffer = fs.readFileSync(filePath);\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> base64Data = imageBuffer.toString(<span class=\"hljs-string\">\"base64\"<\/span>);\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-comment\">\/\/ Create Data URL<\/span>\n\n&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"hljs-keyword\">const<\/span> dataURL = <span class=\"hljs-string\">`data:image\/<span class=\"hljs-subst\">${fileType}<\/span>;base64,<span class=\"hljs-subst\">${base64Data}<\/span>`<\/span>;\n\n&nbsp;&nbsp;&nbsp;&nbsp;imageDataURLs.push({ <span class=\"hljs-attr\">fileName<\/span>: file, dataURL });\n\n&nbsp;&nbsp;});\n\n&nbsp;&nbsp;<span class=\"hljs-keyword\">return<\/span> imageDataURLs;\n\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>This code provides functionality to retrieve user-uploaded images as Data URLs.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>getUploadedFilesByUser(username: string)<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Builds the path to the user&#8217;s upload folder.<\/li>\n\n\n\n<li>Call getImageDataURLs(uploadDir) to fetch image data in that folder.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>getImageDataURLs(uploadedDir: string)<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Reads the image files in the given directory.<\/li>\n\n\n\n<li>Converts each image to a base64-encoded Data URL.<\/li>\n\n\n\n<li>Returns an array of objects containing each image&#8217;s file name and its Data&nbsp;<\/li>\n\n\n\n<li>URL.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Add a route for get uploaded files inside src\/<\/strong><a href=\"http:\/\/file-routes.ts\"><strong>file-routes.ts<\/strong><\/a><\/h4>\n\n\n\n<p>Please add below code&nbsp; for get uploaded files<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> {\n\n&nbsp;&nbsp;getUploadedFiles\n\n} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/controller\/files-upload-controller\"<\/span>;\n\nrouter.get(<span class=\"hljs-string\">\"\/upload\/:username\"<\/span>, getUploadedFiles);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This routes <strong>\/upload\/:username<\/strong> to get uploaded user\u2019s files from folder.<\/p>\n\n\n\n<p>API URL- &nbsp; GET- <a href=\"http:\/\/localhost:8080\/api\/files\/upload\">http:\/\/localhost:8080\/api\/files\/upload<\/a>\/:username<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4.&nbsp; Run the project&nbsp;<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx ts-node src\/server.ts<\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this tutorial, we&#8217;ve learned how to upload multiple files on a website using a React file uploader and display a file upload progress bar to track the upload. We explored how to send files from the frontend (React) to the backend (Node.js) and update the upload progress bar in real-time as files are uploaded.<\/p>\n\n\n\n<p>For instance, in an app where users upload photos, they can select multiple images, and as each image uploads, a progress bar will show how much of the file has been uploaded.<\/p>\n\n\n\n<p>&nbsp;If you are considering Node.js for your backend and need guidance on choosing the right NodeJS development company, you can refer to our detailed guide on<a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/how-to-select-the-right-node-js-development-company\"> <strong>How to Select the Right NodeJS Development Company?<\/strong><\/a>.<\/p>\n\n\n\n<p>With React, you handle the file selection and display the progress bar, while on the Node.js side, tools like Multer manage the actual file uploads. This approach makes the file upload in React JS smoother and provides users with immediate feedback on their uploads.You can find the full source code for this React TypeScript file upload project with backend integration on <a href=\"https:\/\/github.com\/mobisoftinfotech\/react-file-uploader-component-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>GitHub<\/strong><\/a><strong>.<\/strong> Feel free to explore, clone, and adapt it to your needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/contact-us?utm_source=blog&amp;utm_medium=react-file-uploader-progress-bar-nodejs-typescript-cta2\"><noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/stellar-ux-react-development.png\" alt=\"Seamless app development CTA using ReactJS\" class=\"wp-image-38424\" title=\"Seamless Apps, Stellar UX with ReactJS\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20363%22%3E%3C%2Fsvg%3E\" alt=\"Seamless app development CTA using ReactJS\" class=\"wp-image-38424 lazyload\" title=\"Seamless Apps, Stellar UX with ReactJS\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/stellar-ux-react-development.png\"><\/a><\/figure>\n\n\n<div class=\"related-posts-section\"><h2>Related Posts<\/h2><ul class=\"related-posts-list\"><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/apple-intelligence-story-cover-generator\">Apple Intelligence: Building a Story Cover Generator with Image Playground<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/fitness-app-development-trends-stats-success-stories\">The Ultimate Guide to Fitness App Development: Trends, Stats &amp; Success Stories<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-native-push-notifications-tutorial\">React Native Push Notifications Tutorial: How to Implement Push Notifications in React Native<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-native-maps-interactive-google-maps-tutorial\">React Native Maps Tutorial: Master Interactive Google Maps with React Native<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/flutter-charts-tutorial-6-types-with-code-samples\">Flutter Charts: Hands On Tutorial For 6 Different Types Of Charts With Code Samples<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/future-of-mobile-app-development-2026\">The Future of Mobile App Development: Trends Shaping 2026 and Beyond<\/a><\/li><\/ul><\/div>\n\n\n<div class=\"modern-author-card\">\n    <div class=\"author-card-content\">\n        <div class=\"author-info-section\">\n            <div class=\"author-avatar\">\n                <noscript><img decoding=\"async\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/sachin.png\" alt=\"Sachin Kumar\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Sachin Kumar\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/sachin.png\" class=\" lazyload\">\n            <\/div>\n            <div class=\"author-details\">\n                <h3 class=\"author-name\">Sachin Kumar<\/h3>\n                <p class=\"author-title\">Software Engineer<\/p>\n                <a href=\"javascript:void(0);\" class=\"read-more-link read-more-btn\" onclick=\"toggleAuthorBio(this); return false;\">Read more <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"expand\" class=\"read-more-arrow down-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"expand\" class=\"read-more-arrow down-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <div class=\"author-bio-expanded\">\n                    <p>Sachin Kumar is a software engineer at <a href=\"https:\/\/mobisoftinfotech.com\">Mobisoft Infotech<\/a> with over five years of hands-on experience in developing scalable and high-performance applications. He combines deep technical expertise with a passion for solving real-world problems through clean, efficient code.<\/p>\n                    <div class=\"author-social-links\"><div class=\"social-icon\"><a href=\"https:\/\/www.linkedin.com\/in\/sachin-kumar-89076a145\/\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite linkedin\"><\/i><\/a><\/div><\/div>\n                    <a href=\"javascript:void(0);\" class=\"read-more-link read-less-btn\" onclick=\"toggleAuthorBio(this); return false;\" style=\"display: none;\">Read less <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"collapse\" class=\"read-more-arrow up-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"collapse\" class=\"read-more-arrow up-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"share-section\">\n            <span class=\"share-label\">Share Article<\/span>\n            <div class=\"social-share-buttons\">\n                <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fapp-development%2Freact-file-uploader-progress-bar-nodejs-typescript\" target=\"_blank\" class=\"share-btn facebook-share\"><i class=\"fa fa-facebook-f\"><\/i><\/a>\n                <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fapp-development%2Freact-file-uploader-progress-bar-nodejs-typescript\" target=\"_blank\" class=\"share-btn linkedin-share\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<style>\n.hljs-selector-tag {\n    font-weight: normal;\n}\n\n.hljs-keyword {\n    font-weight: normal;\n}\n\n.hljs-attribute {\n    font-weight: normal;\n}\n.post-content h4 {\n    font-size: 22px;\n}\n.post-content h5{\n   font-size: 20px;\n}\n@media only screen and (max-width: 991px) {\n    .post-content li {\n       padding-left: 25px;\n    }\n    .post-content li:before {\n        content: '';\n         width: 9px;\n        height: 9px;\n        background-color: #0d265c;\n        border-radius: 50%;\n        position: absolute;\n        left: 0px;\n        top: 12px;\n    }\n}\n<\/style>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\"\n  },\n  \"headline\": \"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript\",\n  \"description\": \"Learn to build a React file uploader component with a progress bar using TypeScript and NodeJS. Supports multiple file uploads and real-time progress\",\n  \"image\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Sachin Kumar\",\n    \"description\": \"Sachin Kumar is a software engineer at Mobisoft Infotech with over five years of hands-on experience in developing scalable and high-performance applications. He combines deep technical expertise with a passion for solving real-world problems through clean, efficient code.\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Mobisoft Infotech\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n      \"width\": 600,\n      \"height\": 600\n    }\n  },\n  \"datePublished\": \"2025-05-09\",\n  \"dateModified\": \"2025-05-09\"\n}\n<\/script>\n\n\n<script type=\"application\/ld+json\">\n{\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"LocalBusiness\",\n    \"name\": \"Mobisoft Infotech\",\n    \"url\": \"https:\/\/mobisoftinfotech.com\",\n    \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n    \"description\": \"Mobisoft Infotech specializes in custom software development and digital solutions.\",\n    \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"streetAddress\": \"5718 Westheimer Rd Suite 1000\",\n        \"addressLocality\": \"Houston\",\n        \"addressRegion\": \"TX\",\n        \"postalCode\": \"77057\",\n        \"addressCountry\": \"USA\"\n    },\n    \"contactPoint\": [{\n        \"@type\": \"ContactPoint\",\n        \"telephone\": \"+1-855-572-2777\",\n        \"contactType\": \"Customer Service\",\n        \"areaServed\": [\"USA\", \"Worldwide\"],\n        \"availableLanguage\": [\"English\"]\n    }],\n    \"sameAs\": [\n        \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n        \"https:\/\/x.com\/MobisoftInfo\",\n        \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n        \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n        \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n        \"https:\/\/github.com\/MobisoftInfotech\",\n        \"https:\/\/www.behance.net\/MobisoftInfotech\",\n        \"https:\/\/www.youtube.com\/channel\/UCtwuTXKUXFX7k0NSYhsMeTg\"\n    ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Organization\",\n  \"name\": \"Mobisoft Infotech\",\n  \"url\": \"https:\/\/mobisoftinfotech.com\/\",\n  \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/MI_Logo.svg\",\n  \"sameAs\": [\n    \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n    \"https:\/\/twitter.com\/MobisoftInfo\",\n    \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n    \"https:\/\/www.youtube.com\/channel\/UCtwuTXKUXFX7k0NSYhsMeTg\",\n    \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n    \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n    \"https:\/\/github.com\/MobisoftInfotech\"\n  ],\n  \"contactPoint\": [\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+1-855-572-2777\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"US\",\n      \"availableLanguage\": [\"English\"]\n    },\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+91-858-600-8627\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"IN\",\n      \"availableLanguage\": [\"English\"]\n    }\n  ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n    [\n    {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript\",\n            \"caption\": \"A modern React tutorial to build file upload components using NodeJS and TypeScript.\",\n            \"description\": \"A professional banner highlighting a hands-on tutorial for creating a file upload component in React with TypeScript and NodeJS.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-upload-nodejs-backend.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \"React File Upload Integration with NodeJS Backend\",\n            \"caption\": \"Explore how to connect React components with a NodeJS backend for secure file uploads.\",\n            \"description\": \"Diagram showing how the frontend React file upload component communicates with a NodeJS server for backend file handling.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-upload-nodejs-backend.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/drag-drop-react-file-upload.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \" Implement Drag-and-Drop in React File Upload\",\n            \"caption\": \"Enhance UX with a drag-and-drop feature for your React file uploader.\",\n            \"description\": \"Visual representation of a React file uploader that supports intuitive drag-and-drop file selection, enhancing usability.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/drag-drop-react-file-upload.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-upload-progress-bar.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \" Visualizing File Upload Progress in React\",\n            \"caption\": \"See the real-time workflow of file uploads with progress tracking in React and TypeScript.\",\n            \"description\": \"Flowchart of the file upload process in React with a progress bar indicating upload status from 0% to 100%.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-upload-progress-bar.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/next-big-idea-react-development.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \" Your Next Big Idea Needs the Right Tech\",\n            \"caption\": \"Build seamless file upload features with expert ReactJS development.\",\n            \"description\": \"A bold CTA encouraging startups and enterprises to build scalable apps with expert React and NodeJS developers.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/next-big-idea-react-development.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/stellar-ux-react-development.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\n            \"name\": \"Seamless Apps, Stellar UX with ReactJS\",\n            \"caption\": \"Achieve smooth user experiences with our advanced React solutions.\",\n            \"description\": \"Marketing CTA promoting polished user experience design through React-based development for modern digital products.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/stellar-ux-react-development.png\"\n        }\n        ]\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>This blog covers how to implement the functionality of uploading multiple files in a web application using React, Node.js, and TypeScript with a file upload component. You&#8217;ll build a fully functional React file uploader with a progress bar that tracks real-time upload progress. We\u2019ll also integrate a simple Node.js backend using Multer to handle server-side [&hellip;]<\/p>\n","protected":false},"author":110,"featured_media":38448,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[5028],"tags":[5526,5523,5525,5520,5524,5528,5521,5529,5527,5522],"class_list":["post-38411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-file-upload-in-react-js","tag-file-upload-progress-bar","tag-file-upload-react-component","tag-react-file-uploader","tag-react-multiple-file-upload","tag-react-typescript-file-upload","tag-react-upload-file-component","tag-react-uploader","tag-upload-file-in-react-js","tag-upload-progress-bar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React File Uploader with Progress Bar Tutorial<\/title>\n<meta name=\"description\" content=\"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, &amp; handle multiple files easily.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React File Uploader with Progress Bar Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, &amp; handle multiple files easily.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-09T06:18:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T11:01:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/og-React-Tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sachin Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sachin Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\"},\"author\":{\"name\":\"Sachin Kumar\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b\"},\"headline\":\"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript\",\"datePublished\":\"2025-05-09T06:18:18+00:00\",\"dateModified\":\"2025-10-15T11:01:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\"},\"wordCount\":1630,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\"keywords\":[\"file upload in react js\",\"file upload progress bar\",\"file upload react component\",\"react file uploader\",\"react multiple file upload\",\"react typescript file upload\",\"react upload file component\",\"react uploader\",\"upload file in react js\",\"upload progress bar\"],\"articleSection\":[\"App Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\",\"name\":\"React File Uploader with Progress Bar Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\"datePublished\":\"2025-05-09T06:18:18+00:00\",\"dateModified\":\"2025-10-15T11:01:05+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b\"},\"description\":\"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, & handle multiple files easily.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png\",\"width\":855,\"height\":392,\"caption\":\"React file uploader tutorial banner with NodeJS and TypeScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b\",\"name\":\"Sachin Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g\",\"caption\":\"Sachin Kumar\"},\"sameAs\":[\"https:\/\/mobisoftinfotech.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React File Uploader with Progress Bar Tutorial","description":"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, & handle multiple files easily.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript","og_locale":"en_US","og_type":"article","og_title":"React File Uploader with Progress Bar Tutorial","og_description":"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, & handle multiple files easily.","og_url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript","og_site_name":"Mobisoft Infotech","article_published_time":"2025-05-09T06:18:18+00:00","article_modified_time":"2025-10-15T11:01:05+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/og-React-Tutorial.png","type":"image\/png"}],"author":"Sachin Kumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sachin Kumar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript"},"author":{"name":"Sachin Kumar","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b"},"headline":"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript","datePublished":"2025-05-09T06:18:18+00:00","dateModified":"2025-10-15T11:01:05+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript"},"wordCount":1630,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png","keywords":["file upload in react js","file upload progress bar","file upload react component","react file uploader","react multiple file upload","react typescript file upload","react upload file component","react uploader","upload file in react js","upload progress bar"],"articleSection":["App Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript","url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript","name":"React File Uploader with Progress Bar Tutorial","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png","datePublished":"2025-05-09T06:18:18+00:00","dateModified":"2025-10-15T11:01:05+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b"},"description":"Learn how to build a React file uploader with a progress bar using TypeScript and NodeJS. Learn to upload files, track progress, & handle multiple files easily.","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/05\/react-file-uploader-progress-bar-nodejs-typescript.png","width":855,"height":392,"caption":"React file uploader tutorial banner with NodeJS and TypeScript"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-file-uploader-progress-bar-nodejs-typescript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"React Tutorial: Build a React File Uploader Component with a Progress Bar using React, NodeJS, and TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/a05230b1a6f4f0de2d148babb2cd875b","name":"Sachin Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ab43104ac37587d87fdc0c3e5d1ab7cb042bac1a4bb4dd389308abbc4e9d785f?s=96&r=g","caption":"Sachin Kumar"},"sameAs":["https:\/\/mobisoftinfotech.com\/"]}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/38411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=38411"}],"version-history":[{"count":25,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/38411\/revisions"}],"predecessor-version":[{"id":44225,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/38411\/revisions\/44225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/38448"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=38411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=38411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=38411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}