{"id":67007,"date":"2024-10-21T11:27:37","date_gmt":"2024-10-21T05:57:37","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=67007"},"modified":"2024-10-21T15:55:52","modified_gmt":"2024-10-21T10:25:52","slug":"handling-large-file-uploads-in-react-the-multipart-upload-approach","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/handling-large-file-uploads-in-react-the-multipart-upload-approach\/","title":{"rendered":"Handling Large File Uploads in React: The Multipart Upload Approach"},"content":{"rendered":"

In my last project, I ran into a problem: how to handle large file uploads in a React app. The single request file upload wasn\u2019t working for files over 100MB. Network instability, slow speeds, and interruptions caused failed uploads and a bad user experience. That\u2019s when I looked into multipart file uploads\u2014a technique that involves splitting the file into smaller chunks and uploading one by one.<\/p>\n

The Challenge<\/h3>\n

Users were uploading large video files and we needed a solution that could handle these uploads without failure. The main challenge was to make sure the file upload wouldn\u2019t have to restart from scratch if something went wrong during the upload. Restarting an upload from scratch when a network issue occurs can be frustrating for users especially if the file is large. That\u2019s where multipart uploads came to the rescue.<\/p>\n

The Multipart Upload Approach<\/h3>\n

With multipart file uploads you split the file into smaller chunks (in our case 50MB each). These chunks are then uploaded individually to the server. Once all the parts are uploaded the server assembles them into a single file.<\/p>\n

The process involves several steps:<\/em><\/p>\n

    \n
  1. Initialize the multipart upload<\/strong>: The first step is to notify the server that an upload is starting which returns an upload session ID that tracks the entire process.<\/li>\n
  2. Split the file into parts<\/strong>: The file is divided into smaller parts based on a predefined size limit.<\/li>\n
  3. Get pre-signed URLs<\/strong>: For each file part, the server provides a pre-signed URL. This URL allows the client to upload each file chunk directly to cloud storage.<\/li>\n
  4. Upload each part<\/strong>: Using the pre-signed URLs each part is uploaded to the server.<\/li>\n
  5. Complete the upload<\/strong>: After all parts are uploaded the server is notified to assemble them into the final file.<\/li>\n<\/ol>\n

    Progress Tracking and User Feedback<\/h3>\n

    One of the best things about this approach is that we can track progress. By monitoring each part upload we can calculate the total percentage of the file uploaded and show it to the user. This improves the user experience and gives the user an idea of whether the upload is on track or if something went wrong.<\/p>\n

    Cancelling the upload<\/h3>\n

    We also implemented the ability to cancel the upload mid-way. So if the user changes their mind they don\u2019t have to wait for the entire file to finish uploading before stopping the process. Using Axios\u2019 CancelToken we were able to implement a simple cancel feature that stops all active file uploads instantly.<\/p>\n

    Conclusion<\/h3>\n

    Multipart file uploads in React were a total game-changer for handling files of a larger size. We could split files into manageable pieces and upload them one by one. This made our uploads much more reliable and user-friendly. This approach enabled us to deliver file uploads resilient to interruptions; we were able to track the progress in real-time, and even offer an option to cancel the upload at any point.<\/p>\n

    Next time you are faced with the need to upload large files in your React application, do it using this multipart upload approach. It is a powerful method that saves time, improves user experience, and ensures reliable yet efficient uploads.<\/p>\n

    Code –<\/strong><\/em><\/p>\n

    \"multipart

    multipart file upload code<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

    In my last project, I ran into a problem: how to handle large file uploads in a React app. The single request file upload wasn\u2019t working for files over 100MB. Network instability, slow speeds, and interruptions caused failed uploads and a bad user experience. That\u2019s when I looked into multipart file uploads\u2014a technique that involves […]<\/p>\n","protected":false},"author":1996,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":538},"categories":[5876],"tags":[6625,55,6627,6626,2046],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67007"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1996"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=67007"}],"version-history":[{"count":17,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67007\/revisions"}],"predecessor-version":[{"id":68437,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67007\/revisions\/68437"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=67007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=67007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=67007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}