{"id":20075,"date":"2018-01-23T16:15:14","date_gmt":"2018-01-23T14:15:14","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=20075"},"modified":"2018-01-22T14:19:39","modified_gmt":"2018-01-22T12:19:39","slug":"node-js-file-upload-progress-bar-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/","title":{"rendered":"Node.js File Upload with Progress Bar Example"},"content":{"rendered":"

In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is a Server side JavaScript framework which has shot to prominence recently. A lot of people with existing skills in JavaScript are now able to use the same for server side logic. We now have the option to build the server side and client side artifacts using the same language, JavaScript.<\/p>\n

1. Tools & Technologies<\/h2>\n

I have used the following toolset to build the example in this post.<\/p>\n

    \n
  1. Node.js v6.3.0<\/a><\/li>\n
  2. Formidable Module v1.1.1<\/a><\/li>\n
  3. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    You can navigate to the tools page to get them by clicking on the hyperlinks above. Although I have used Visual Studio Code IDE you can switch to other tools that you are comfortable with. Node.js is the server side JavaScript development framework. The formidable module is an additional dependency required for this demo since the native Node.js modules lack certain capabilities we will need to implement this example, notably processing HTML forms posted from the client side.
    \n[ulp id=’7Yp6ijpjjxyeaN8A’]<\/p>\n

    2. Project Layout<\/h2>\n

    We follow the below folder structure in the example we will build. This is what the final application layout would look like:<\/p>\n

    \"\"<\/a>
    Project Layout<\/figcaption><\/figure>\n\n\n\n\n\n\n
    index.js<\/td>\nThis file hosts all of our server side logic and exposes the API we use for Uploading.<\/td>\n<\/tr>\n
    file.uploader.js<\/td>\nThis file contains the client side logic and is referenced in our index.html landing page.<\/td>\n<\/tr>\n
    index.html<\/td>\nIt is our landing page with all our HTML markup to build a file uploader.<\/td>\n<\/tr>\n
    file.uploader.css<\/td>\nOur styles reside in this css file.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    3. Server side Implementation<\/h2>\n

    The server side implementation resides in the file index.js. In this file we create a web server using the http<\/code> module that comes with Node itself. But there is no way to handle or process incoming HTML forms which are POSTed to the server. So we leverage a module called formidable<\/code>. This module allows us to parse the incoming form and access the form data from the request object. The http module provides us both the request and response object. Files uploaded using POST requests get saved to a temporary location on the server. We then access these files and move them to a folder on our server. Let us see what our code looks like followed by explanation of the same.<\/p>\n

    index.js<\/em><\/span><\/p>\n

    var http = require(\"http\");\r\nvar url = require(\"url\");\r\nvar fs = require(\"fs\");\r\nvar formidable = require(\"formidable\");\r\nvar port = 8090;\r\nvar host = \"localhost\";\r\n\r\nhttp.createServer(function (req, res) {\r\n    var path = url.parse(req.url, true);\r\n    if(path.pathname.endsWith(\"html\")){\r\n        fs.readFile(\".\" + path.pathname, function(err, data){\r\n            res.writeHead(200, \"ok\", { \"Content-Type\": \"text\/html\"});\r\n            res.write(data);\r\n            res.end();\r\n        });\r\n    } else if(path.pathname.endsWith(\"js\")){\r\n        fs.readFile(\".\" + path.pathname, function(err, data){\r\n            res.writeHead(200, \"ok\", { \"Content-Type\": \"text\/javascript\"});\r\n            res.write(data);\r\n            res.end();\r\n        });\r\n    } else if(path.pathname.endsWith(\"css\")){\r\n        fs.readFile(\".\" + path.pathname, function(err, data){\r\n            res.writeHead(200, \"ok\", {\"Content-Type\": \"text\/css\"});\r\n            res.write(data);\r\n            res.end();\r\n        });\r\n    } else if(path.pathname.endsWith(\"uploadFile\")){\r\n        var form = new formidable.IncomingForm();\r\n        form.parse(req, function(err, fields, files){\r\n            var oldpath = files.file.path;\r\n            var newpath = 'C:\/Users\/siddharth\/' + files.file.name;\r\n            fs.rename(oldpath, newpath, function (err) {\r\n              if (err) throw err;\r\n              res.write('File uploaded and moved!');\r\n              res.end();\r\n            });\r\n            \r\n        });\r\n       \r\n    }\r\n\r\n}).listen(port, host);\r\n<\/pre>\n
    As you can see in the code above we implement a web server using http<\/code> module. Firstly we parse the URL using the url<\/code> module. We check if the incoming request is for a resource file. In case the request is for a html, js, css<\/code> file we return the same to the browser. But if the request is for uploadFile<\/code> URL then we proceed to process the posted files. We hand over the request object provided by http module to the formidable<\/code> module’s IncomingForm<\/code> object using its parse<\/code> method. It returns us, among other things, a list of files uploaded to our callback function. We then move the files from their temporary location to a folder in the Users directory. Afterwards we return an OK<\/code> response to the browser.<\/p>\n
    4. Client side Implementation<\/h2>\n
    On the client end we will use an input<\/code> tag with type attribute as file<\/code> and decorat it with multiple<\/code> attribute. This tag will be hidden though and we will trigger it’s click<\/code> when we need to show the Open File Dialog. Later we will listen to its change<\/code> to get the list of selected files to upload. We will use a button<\/code> on the UI for the user to use the feature. Once we have the list of files to upload we will initialize our progress bar and update it on the progress<\/code> event of the XMLHttpRequest<\/code> object’s upload<\/code> property. We will use AJAX<\/code> to post the files to the server side. The progress event handler is called with data like the total number of bytes and number of bytes uploaded. The progress bar is actually two divs one inside the other. The inner div has a background color of green and a width of 0%. As the upload progresses we increase the width of the inner div to show progress of the upload. The code for all this resides in the file.uploader.js<\/code> file and looks like below:<\/p>\n
    file.uploader.js<\/em><\/span><\/p>\n
    var browse = document.getElementsByClassName('selectFiles')[0];\r\nvar fileDialog = document.createElement(\"INPUT\");\r\nfileDialog.setAttribute(\"type\", \"file\");\r\nfileDialog.setAttribute(\"multiple\", \"true\");\r\nfileDialog.style.display = \"none\";\r\nvar uploadProgress = document.getElementsByClassName(\"uploadProgressDetails\")[0];\r\nvar progress;\r\nsetupProgressBar();\r\nbrowse.addEventListener(\"click\", function(){    \r\n    fileDialog.click();\r\n    \r\n});\r\n\r\nfileDialog.addEventListener(\"change\", function(){\r\n    \r\n    processFiles(fileDialog.files);\r\n\r\n});\r\n\r\nfunction processFiles(files){\r\n    \r\n    resetProgressBar();\r\n    var request = new XMLHttpRequest();       \r\n    request.upload.addEventListener(\"progress\", showProgress);\r\n    request.open(\"POST\", \"\/uploadFile\");\r\n    var formData = new FormData();\r\n    for(var file = 0; file < files.length; file++){         \r\n        \r\n        formData.append(\"file\" + file, files[file], files[file].name);\r\n        \r\n    } \r\n    request.send(formData);  \r\n}\r\nfunction showProgress(evt){   \r\n    \r\n    progress.style.width = (((evt.loaded\/evt.total)*100))+ \"%\";\r\n\r\n}\r\nfunction resetProgressBar(){\r\n    progress.style.width = \"0%\";\r\n}\r\nfunction setupProgressBar(){\r\n    var progressBar = document.createElement(\"DIV\");\r\n    progressBar.className = \"progressBar\";\r\n    uploadProgress.appendChild(progressBar);\r\n    var innerDIV = document.createElement(\"DIV\");\r\n    innerDIV.className = \"progress\";\r\n    progressBar.appendChild(innerDIV);\r\n    progress = document.getElementsByClassName(\"progress\")[0];\r\n}\r\n<\/pre>\n
    5. Running the Application<\/h2>\n
    To run the example application we have built you need to run the following commands in order at the root of the application.
    \nFirst execute<\/p>\n
    > npm install\r\n<\/pre>\n
    then<\/p>\n
    > node index.js\r\n<\/pre>\n
    Now, we can navigate to the URL http:\/\/localhost:8090\/index.html<\/code> to test out the File upload functionality we just implemented. The landing page should look like below:<\/p>\n
    \"\"<\/a>
    Index.html — Landing Page<\/figcaption><\/figure>\n
    On clicking the “Browse” button a File Open Dialog should open. We can select a single file or multiple files using Shift<\/code> or CTRL<\/code> keys while making selections. As we click the Open button the upload would begin and we can see the progress bar updating to reflect the progress.<\/p>\n
    6. Download the Source Code<\/h2>\n
    This wraps up our effort to write an application for Node.js File Uploading with Progress Bar.<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here :     WCG — Node.js File Upload with Progress Bar<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is a Server side JavaScript framework which has shot to prominence recently. A lot of people with existing skills in JavaScript are now able to …<\/p>\n","protected":false},"author":213,"featured_media":924,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[347,509],"class_list":["post-20075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-nodejs","tag-nodejs-file-upload"],"yoast_head":"\nNode.js File Upload with Progress Bar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Node.js File Upload with Progress Bar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-23T14:15:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Node.js File Upload with Progress Bar Example\",\"datePublished\":\"2018-01-23T14:15:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\"},\"wordCount\":887,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"keywords\":[\"nodejs\",\"nodejs file upload\"],\"articleSection\":[\"Node.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\",\"name\":\"Node.js File Upload with Progress Bar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"datePublished\":\"2018-01-23T14:15:14+00:00\",\"description\":\"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Node.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/node-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Node.js File Upload with Progress Bar Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Node.js File Upload with Progress Bar Example - Web Code Geeks - 2026","description":"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is","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:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/","og_locale":"en_US","og_type":"article","og_title":"Node.js File Upload with Progress Bar Example - Web Code Geeks - 2026","og_description":"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-01-23T14:15:14+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Node.js File Upload with Progress Bar Example","datePublished":"2018-01-23T14:15:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/"},"wordCount":887,"commentCount":3,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","keywords":["nodejs","nodejs file upload"],"articleSection":["Node.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/","name":"Node.js File Upload with Progress Bar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","datePublished":"2018-01-23T14:15:14+00:00","description":"In this post we will look at how to upload files using Node.js and show the user a progress bar with the status of the operation. Node.js, as you know, is","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/nodejs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/node-js\/node-js-file-upload-progress-bar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Node.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/node-js\/"},{"@type":"ListItem","position":4,"name":"Node.js File Upload with Progress Bar Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=20075"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/924"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=20075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=20075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=20075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}