{"id":16061,"date":"2023-02-27T23:35:23","date_gmt":"2023-02-27T18:05:23","guid":{"rendered":"https:\/\/www.stechguide.com\/?p=16061"},"modified":"2023-02-27T23:35:23","modified_gmt":"2023-02-27T18:05:23","slug":"how-to-upload-large-files-as-chunks-using-reactjs","status":"publish","type":"post","link":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/","title":{"rendered":"How to Upload Large Files as Chunks Using ReactJS"},"content":{"rendered":"

Uploading large files can be a real hassle, especially if you’re building an application with a large number of users. The standard approach of uploading a large file all at once can result in slow upload times. Moreover, it imposes a higher risk of network errors and an overall poor user experience. However, we can overcome these challenges by providing our users with a <\/span>ReactJS file upload<\/span><\/a> experience. Filestack is one such example.\u00a0\u00a0<\/span><\/p>\n

When it comes to uploading large files, it can be a real hassle. <\/span>This article will show you how to upload large files as chunks using ReactJS file upload. Let\u2019s get started!<\/span><\/p>\n

\"Upload<\/a><\/p>\n

Why Should We Upload Files as Chunks?<\/b><\/h2>\n

The chunk upload concept involves breaking a large file into smaller chunks. It involves uploading each chunk separately and then combining the chunks on the server side to form the complete file. This approach has several advantages over uploading a large file all at once:<\/span><\/p>\n

Reduced Risk of Network Errors<\/b><\/h3>\n

By uploading smaller chunks, we reduce the risk of network errors during the upload process. If a chunked upload fails, we can retry uploading that chunk without having to start the process all over again.<\/span><\/p>\n

Improved Upload Speed.<\/b><\/h3>\n

Uploading smaller chunks allows for more efficient network bandwidth use and reduces the risk of hitting upload size limits.<\/span><\/p>\n

Better User Experience<\/b><\/h3>\n

Uploading large files in chunks provides a more seamless user experience. The reason is that the users can see the progress of their upload. Moreover, they are less likely to encounter errors during the upload process.<\/span><\/p>\n

\"Upload<\/a><\/p>\n

What Are The Steps To Upload Large Files as Chunks Using React JS?<\/b><\/h2>\n

Here are the steps to upload large files as chunks using ReactJS:<\/span><\/p>\n

Set up a Reactjs Project.<\/b><\/h3>\n

Before we dive into the chunk upload functionality, we need to set up a ReactJS project. If you already have a project set up, feel free to skip this section.<\/span><\/p>\n

Install Node.js and npm: Node.js and npm are essential for setting up a ReactJS project. We can download them from the official website (https:\/\/nodejs.org\/en\/).<\/span><\/p>\n

Create a new project: To create a new project, we can use the following command in our terminal:<\/span><\/p>\n\n\n\n
npx create-react-app my-app<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Navigate to the project directory: After creating a new project, navigate to the project directory using the following command:<\/span><\/p>\n\n\n\n
cd my-app<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Start the development server: Start the development server using the following command:<\/span><\/p>\n\n\n\n
npm start<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Now that we have set up a ReactJS project, let’s dive into the chunk upload functionality.<\/span><\/p>\n

Break the Large File Into Smaller Chunks.<\/b><\/h3>\n

Read the file using the File API in JavaScript. We have to use the <\/span>FileReader<\/b> object to read the file and access its data.<\/span><\/p>\n

The next step is to determine the chunk size. Decide on the desired chunk size, typically in the range of a few kilobytes to several megabytes.<\/span><\/p>\n

Then, we must split the file into chunks. In this case, we have to use the <\/span>slice<\/b> method of the <\/span>Blob<\/b> object to split the file into chunks of the desired size.<\/span><\/p>\n\n\n\n
let<\/b> chunkSize = <\/span>5<\/span> * <\/span>1024<\/span> * <\/span>1024<\/span>; <\/span>\/\/ 5 MB chunk size<\/span><\/i>
\n<\/span>let<\/b> chunks = [];<\/span>
\n<\/span>let<\/b> fileSize = file.size;<\/span>
\n<\/span>let<\/b> start = <\/span>0<\/span>;<\/span>
\n<\/span>let<\/b> end = chunkSize;<\/span>
\n<\/span>
\n<\/span>while<\/b> (start < fileSize) {<\/span>
\n<\/span>\u00a0 chunks.push(file.slice(start, end));<\/span>
\n<\/span>\u00a0 start = end;<\/span>
\n<\/span>\u00a0 end = start + chunkSize;<\/span>
\n<\/span>}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Send Each Chunk to the Server Using Axios or a Similar Library<\/b><\/h3>\n

Then, we have to upload each chunk. For this purpose, we must iterate through the chunks array and send each chunk to the server using Axios. We can also use a similar library for making HTTP requests. This is a basic implementation of breaking a large file into smaller chunks in JavaScript. We can further customize the implementation based on our specific use case and requirements.<\/span><\/p>\n

Axios makes sending HTTP requests easy and handles the response data in a ReactJS project.<\/span><\/p>\n\n\n\n
import<\/b> axios <\/span>from<\/b> ‘axios’<\/span>;<\/span>
\n<\/span>
\n<\/span>let<\/b> uploadPromises = [];<\/span>
\n<\/span>
\n<\/span>chunks.forEach((chunk, index) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> formData = <\/span>new<\/b> FormData();<\/span>
\n<\/span>\u00a0 formData.append(<\/span>‘chunk’<\/span>, chunk, <\/span>`chunk-<\/span>${index}<\/span>`<\/span>);<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> uploadPromise = axios.post(<\/span>‘\/upload’<\/span>, formData);<\/span>
\n<\/span>\u00a0 uploadPromises.push(uploadPromise);<\/span>
\n<\/span>});<\/span>
\n<\/span>
\n<\/span>Promise<\/span>.all(uploadPromises)<\/span>
\n<\/span>\u00a0 .then(responses => {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>console<\/span>.log(<\/span>‘All chunks uploaded successfully!’<\/span>);<\/span>
\n<\/span>\u00a0 })<\/span>
\n<\/span>\u00a0 .catch(error => {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>console<\/span>.error(<\/span>‘Error uploading chunks:’<\/span>, error);<\/span>
\n<\/span>\u00a0 });<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

On the Server Side, Receive and Store Each Chunk.<\/b><\/h3>\n

In the server-side code, you can create an endpoint using Node.js and Express to temporarily receive and store the chunks. A middleware library such as Multer can be used to handle the file upload and access the uploaded file data.<\/span><\/p>\n\n\n\n
const<\/b> express = <\/span>require<\/span>(<\/span>‘express’<\/span>);<\/span>
\n<\/span>const<\/b> multer = <\/span>require<\/span>(<\/span>‘multer’<\/span>);<\/span>
\n<\/span>const<\/b> app = express();<\/span>
\n<\/span>const<\/b> port = process.env.PORT || <\/span>5000<\/span>;<\/span>
\n<\/span>
\n<\/span>const<\/b> upload = multer();<\/span>
\n<\/span>
\n<\/span>app.post(<\/span>‘\/upload’<\/span>, upload.single(<\/span>‘chunk’<\/span>), (req, res) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> chunk = req.file;<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>\/\/ Store the chunk temporarily<\/span><\/i>
\n<\/span>});<\/span>
\n<\/span>
\n<\/span>app.listen(port, () => {<\/span>
\n<\/span>\u00a0 <\/span>console<\/span>.log(<\/span>`Server is listening on port <\/span>${port}<\/span>`<\/span>);<\/span>
\n<\/span>});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

After All, the Chunks Have Been Uploaded, Combine Them to Form the Complete File<\/b><\/h3>\n

This can be done by creating a new Blob object and concatenating all the chunks using the <\/span>Blob.concat<\/b> method. Once the complete file has been formed, it can be saved to a permanent storage location such as a database or a file system.<\/span><\/p>\n\n\n\n
let<\/b> chunks = [];<\/span>
\n<\/span>
\n<\/span>app.post(<\/span>‘\/upload’<\/span>, upload.single(<\/span>‘chunk’<\/span>), (req, res) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> chunk = req.file;<\/span>
\n<\/span>
\n<\/span>\u00a0 chunks.push(chunk);<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>\/\/ Once all the chunks have been uploaded, combine them to form the complete file<\/span><\/i>
\n<\/span>\u00a0 <\/span>if<\/b> (chunks.length === totalChunks) {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> completeFile = <\/span>new<\/b> Blob(chunks);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>\/\/ Save the complete file to a permanent storage location<\/span><\/i>
\n<\/span>\u00a0 }<\/span>
\n<\/span>});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

It’s important to keep track of the number of chunks that have been uploaded and the total number of chunks to ensure that all chunks have been uploaded before combining them to form the complete file. Additionally, it’s also a good idea to implement some error handling to ensure that the complete file is only formed and saved if all chunks have been uploaded successfully.<\/span><\/p>\n

Store the Complete File in a Database or on the File System.\u00a0<\/b><\/h3>\n

Storing the complete file in a database or on the file system is the final step in the process of uploading large files as chunks using ReactJS.<\/span><\/p>\n

When storing the file in a database, it’s common to use a binary large object (BLOB) data type to store the file data. The BLOB data type can store large amounts of binary data, such as an image, audio, or video file. To store the complete file in a database, we can convert the Blob object to a binary string using the FileReader API. Then, we can save the binary string in the BLOB field in the database.<\/span><\/p>\n\n\n\n
let<\/b> chunks = [];<\/span>
\n<\/span>
\n<\/span>app.post(<\/span>‘\/upload’<\/span>, upload.single(<\/span>‘chunk’<\/span>), (req, res) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> chunk = req.file;<\/span>
\n<\/span>
\n<\/span>\u00a0 chunks.push(chunk);<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>\/\/ Once all the chunks have been uploaded, combine them to form the complete file<\/span><\/i>
\n<\/span>\u00a0 <\/span>if<\/b> (chunks.length === totalChunks) {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> completeFile = <\/span>new<\/b> Blob(chunks);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> reader = <\/span>new<\/b> FileReader();<\/span>
\n<\/span>\u00a0 \u00a0 reader.readAsDataURL(completeFile);<\/span>
\n<\/span>\u00a0 \u00a0 reader.onload = <\/span>function<\/b>() {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>let<\/b> binaryString = reader.result;<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>\/\/ Store the binary string in the BLOB field in the database<\/span><\/i>
\n<\/span>\u00a0 \u00a0 };<\/span>
\n<\/span>\u00a0 }<\/span>
\n<\/span>});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

We can also use the <\/span>fs<\/b> module in Node.js to write the complete file to a permanent storage location.<\/span><\/p>\n\n\n\n
let<\/b> chunks = [];<\/span>
\n<\/span>
\n<\/span>app.post(<\/span>‘\/upload’<\/span>, upload.single(<\/span>‘chunk’<\/span>), (req, res) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> chunk = req.file;<\/span>
\n<\/span>
\n<\/span>\u00a0 chunks.push(chunk);<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>\/\/ Once all the chunks have been uploaded, combine them to form the complete file<\/span><\/i>
\n<\/span>\u00a0 <\/span>if<\/b> (chunks.length === totalChunks) {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> completeFile = <\/span>new<\/b> Blob(chunks);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> reader = <\/span>new<\/b> FileReader();<\/span>
\n<\/span>\u00a0 \u00a0 reader.readAsArrayBuffer(completeFile);<\/span>
\n<\/span>\u00a0 \u00a0 reader.onload = <\/span>function<\/b>() {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>let<\/b> buffer = Buffer.from(reader.result);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>\/\/ Write the buffer to a permanent storage location on the file system<\/span><\/i>
\n<\/span>\u00a0 \u00a0 \u00a0 fs.writeFile(<\/span>`.\/uploads\/<\/span>${completeFile.name}<\/span>`<\/span>, buffer, <\/span>function<\/b>(err) {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 <\/span>if<\/b> (err) {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>console<\/span>.error(err);<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 } <\/span>else<\/b> {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>console<\/span>.log(<\/span>‘File uploaded successfully’<\/span>);<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 }<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 });<\/span>
\n<\/span>\u00a0 \u00a0 };<\/span>
\n<\/span>\u00a0 }<\/span>
\n<\/span>});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Return a Successful Response to the Client to Indicate That the Upload Was Successful.<\/b><\/h3>\n

Once the complete file has been stored in a database or on the file system, it’s important to return a successful response to the client to indicate that the upload was successful.<\/span><\/p>\n

In a ReactJS application, we can use the fetch API or a library like Axios to make a POST request to the server and receive the response. The response from the server can be a JSON object that indicates whether the upload was successful or not.<\/span><\/p>\n

Here’s an example of how to return a successful response in a Node.js server:<\/span><\/p>\n\n\n\n
app.post(<\/span>‘\/upload’<\/span>, upload.single(<\/span>‘chunk’<\/span>), (req, res) => {<\/span>
\n<\/span>\u00a0 <\/span>let<\/b> chunk = req.file;<\/span>
\n<\/span>
\n<\/span>\u00a0 chunks.push(chunk);<\/span>
\n<\/span>
\n<\/span>\u00a0 <\/span>\/\/ Once all the chunks have been uploaded, combine them to form the complete file<\/span><\/i>
\n<\/span>\u00a0 <\/span>if<\/b> (chunks.length === totalChunks) {<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> completeFile = <\/span>new<\/b> Blob(chunks);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 <\/span>let<\/b> reader = <\/span>new<\/b> FileReader();<\/span>
\n<\/span>\u00a0 \u00a0 reader.readAsArrayBuffer(completeFile);<\/span>
\n<\/span>\u00a0 \u00a0 reader.onload = <\/span>function<\/b>() {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>let<\/b> buffer = Buffer.from(reader.result);<\/span>
\n<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 <\/span>\/\/ Write the buffer to a permanent storage location on the file system<\/span><\/i>
\n<\/span>\u00a0 \u00a0 \u00a0 fs.writeFile(<\/span>`.\/uploads\/<\/span>${completeFile.name}<\/span>`<\/span>, buffer, <\/span>function<\/b>(err) {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 <\/span>if<\/b> (err) {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>console<\/span>.error(err);<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 } <\/span>else<\/b> {<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>\/\/ Return a successful response to the client<\/span><\/i>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.status(<\/span>200<\/span>).json({ message: <\/span>‘File uploaded successfully’<\/span> });<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0 }<\/span>
\n<\/span>\u00a0 \u00a0 \u00a0 });<\/span>
\n<\/span>\u00a0 \u00a0 };<\/span>
\n<\/span>\u00a0 }<\/span>
\n<\/span>});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Why Should We Choose Filestack For Large Files Uploading?<\/b><\/h2>\n

Filestack is a cloud-based file-handling and file-uploading platform that provides a convenient and efficient way to handle large files. Filestack can handle a large volume of file uploads and transfers, making it ideal for businesses and applications that handle a lot of data.<\/span><\/p>\n

Filestack uses a globally distributed network of servers to ensure that file uploads and transfers are fast, reliable, and secure. Moreover, it is optimized for performance, which means that large files can be uploaded and transferred quickly and efficiently. Filestack provides a simple and intuitive user interface that makes it easy for users to upload large files and manage their files.<\/span><\/p>\n

Apart from that, it provides a wide range of integration options, including a REST API and an SDK. Filestack also comes with cost-effective and secure file-uploading solutions.\u00a0<\/span><\/p>\n

\"Upload<\/a><\/p>\n

Final Thoughts<\/b><\/h2>\n

It’s important to keep in mind that chunk uploads can add complexity to the overall file upload process, so make sure to thoroughly test your implementation before deploying it to production.\u00a0<\/span><\/p>\n

Additionally, we should consider using a backend service such as Amazon S3 or Google Cloud Storage to handle the actual storage of the uploaded file chunks, as this can simplify the process and ensure that the uploaded files are stored securely.\u00a0<\/span><\/p>\n

FAQs<\/b><\/h2>\n

What Is a File Juggler?<\/b><\/h3>\n

File Juggler is used for automatic file management.\u00a0<\/span><\/p>\n

What Is CDN Filestack Content?<\/b><\/h3>\n

Filestack uses CDN to help us secure and fast access our assets.<\/span><\/p>\n

Is Facebook a File-Sharing Site?<\/b><\/h3>\n

Yes. Facebook has made it a lot easier to share our daily activities.\u00a0<\/span><\/p>\n

Is CDN a Database?<\/b><\/h3>\n

No, CDN (Content Delivery Network) is not a database. A CDN is a system of distributed servers that deliver web content to a user based on their geographic location, the origin of the webpage, and the content delivery server.<\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Uploading large files can be a real hassle, especially if you’re building an application with a large number of users. The standard approach of uploading a large file all at once can result in slow upload times. Moreover, it imposes a higher risk of network errors and an overall poor user experience. However, we can <\/p>\n","protected":false},"author":1,"featured_media":16062,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[14],"tags":[15151],"jetpack_publicize_connections":[],"yoast_head":"\nHow to Upload Large Files as Chunks Using ReactJS<\/title>\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.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Upload Large Files as Chunks Using ReactJS\" \/>\n<meta property=\"og:description\" content=\"Uploading large files can be a real hassle, especially if you’re building an application with a large number of users. The standard approach of uploading a large file all at once can result in slow upload times. Moreover, it imposes a higher risk of network errors and an overall poor user experience. However, we can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"STechGuide\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/stechguide\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/stechguide\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-27T18:05:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.stechguide.com\/wp-content\/uploads\/2023\/02\/Upload-Large-Files-as-Chunks-Using-ReactJS.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"342\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sumit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sTechGuide\" \/>\n<meta name=\"twitter:site\" content=\"@stechguide\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sumit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/\",\"url\":\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/\",\"name\":\"How to Upload Large Files as Chunks Using ReactJS\",\"isPartOf\":{\"@id\":\"https:\/\/www.stechguide.com\/#website\"},\"datePublished\":\"2023-02-27T18:05:23+00:00\",\"dateModified\":\"2023-02-27T18:05:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.stechguide.com\/#\/schema\/person\/b46e405fdc018996326a4c26ad134b06\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.stechguide.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Upload Large Files as Chunks Using ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.stechguide.com\/#website\",\"url\":\"https:\/\/www.stechguide.com\/\",\"name\":\"STechGuide\",\"description\":\"Tech News, Tips and Rooting Guide\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.stechguide.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.stechguide.com\/#\/schema\/person\/b46e405fdc018996326a4c26ad134b06\",\"name\":\"Sumit\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.stechguide.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96f450f95b8a5dcb93928aed450ba912?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96f450f95b8a5dcb93928aed450ba912?s=96&d=mm&r=g\",\"caption\":\"Sumit\"},\"description\":\"Sumit is a Tech and Gadget freak and loves writing about Android and iOS, his favourite past time is playing video games.\",\"sameAs\":[\"https:\/\/www.stechguide.com\/\",\"https:\/\/www.facebook.com\/stechguide\/\",\"https:\/\/twitter.com\/sTechGuide\"],\"url\":\"https:\/\/www.stechguide.com\/author\/sumit227\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Upload Large Files as Chunks Using ReactJS","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.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"How to Upload Large Files as Chunks Using ReactJS","og_description":"Uploading large files can be a real hassle, especially if you’re building an application with a large number of users. The standard approach of uploading a large file all at once can result in slow upload times. Moreover, it imposes a higher risk of network errors and an overall poor user experience. However, we can","og_url":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/","og_site_name":"STechGuide","article_publisher":"https:\/\/www.facebook.com\/stechguide\/","article_author":"https:\/\/www.facebook.com\/stechguide\/","article_published_time":"2023-02-27T18:05:23+00:00","og_image":[{"width":512,"height":342,"url":"https:\/\/www.stechguide.com\/wp-content\/uploads\/2023\/02\/Upload-Large-Files-as-Chunks-Using-ReactJS.jpeg","type":"image\/jpeg"}],"author":"Sumit","twitter_card":"summary_large_image","twitter_creator":"@sTechGuide","twitter_site":"@stechguide","twitter_misc":{"Written by":"Sumit","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/","url":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/","name":"How to Upload Large Files as Chunks Using ReactJS","isPartOf":{"@id":"https:\/\/www.stechguide.com\/#website"},"datePublished":"2023-02-27T18:05:23+00:00","dateModified":"2023-02-27T18:05:23+00:00","author":{"@id":"https:\/\/www.stechguide.com\/#\/schema\/person\/b46e405fdc018996326a4c26ad134b06"},"breadcrumb":{"@id":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.stechguide.com\/how-to-upload-large-files-as-chunks-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.stechguide.com\/"},{"@type":"ListItem","position":2,"name":"How to Upload Large Files as Chunks Using ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.stechguide.com\/#website","url":"https:\/\/www.stechguide.com\/","name":"STechGuide","description":"Tech News, Tips and Rooting Guide","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.stechguide.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.stechguide.com\/#\/schema\/person\/b46e405fdc018996326a4c26ad134b06","name":"Sumit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.stechguide.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96f450f95b8a5dcb93928aed450ba912?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96f450f95b8a5dcb93928aed450ba912?s=96&d=mm&r=g","caption":"Sumit"},"description":"Sumit is a Tech and Gadget freak and loves writing about Android and iOS, his favourite past time is playing video games.","sameAs":["https:\/\/www.stechguide.com\/","https:\/\/www.facebook.com\/stechguide\/","https:\/\/twitter.com\/sTechGuide"],"url":"https:\/\/www.stechguide.com\/author\/sumit227\/"}]}},"jetpack_featured_media_url":"https:\/\/www.stechguide.com\/wp-content\/uploads\/2023\/02\/Upload-Large-Files-as-Chunks-Using-ReactJS.jpeg","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/posts\/16061"}],"collection":[{"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/comments?post=16061"}],"version-history":[{"count":1,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/posts\/16061\/revisions"}],"predecessor-version":[{"id":16065,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/posts\/16061\/revisions\/16065"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/media\/16062"}],"wp:attachment":[{"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/media?parent=16061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/categories?post=16061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stechguide.com\/wp-json\/wp\/v2\/tags?post=16061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}