In this episode, we kick off the chunked uploads feature for our app! If you're new to chunked uploading, don't worry—it's just a way to break up really big files into smaller pieces (chunks) before sending them to the server. This makes uploads more reliable for large files, since if anything goes wrong, you only have to resend a small piece rather than the whole file.
We start by outlining how chunked uploading works, both on the frontend (breaking things into chunks and sending them) and the backend (stitching the chunks back together). To keep things simple on the client side, we pull in a package called upchunk
which handles a lot of the heavy lifting for us — breaking up the file, handling chunked requests, and so on. We set up a startChunkedUpload
function that gets triggered when we want to upload a file, and we make sure it's flexible enough to track progress and allow things like pause, resume, or cancel.
We lay out our upload endpoint and create a basic controller in our backend for handling files, even if it doesn't actually do much yet (we'll get to that in a later episode). While wiring this up, we bump into an important gotcha: Laravel's CSRF (Cross-Site Request Forgery) protection. Since we're sending requests with xhr
, we need to manually include the CSRF token, and we show how to make that token available everywhere in your app with a tweak to our Inertia middleware.
Once that's sorted, we test everything. We see each chunk being sent over the network (and even slow down the network in Chrome DevTools just to make debugging easier). Now, uploads are being sent in chunks, and we're in a good spot to start listening for progress and handling multiple simultaneous uploads.
Next up: taking care of things on the backend, where we'll stitch all the pieces back into a complete file with even more handy packages!