resumable js is triggering fileSuccess while the chunks are not getting assembled in the server

Question

I am trying to upload a 400MB+ file to a server using resumable.js with pion/laravel-chunk-upload. It allows me to upload smaller files, without any error, but when I try uploading 400MB files, it just fails.

Server side code :

$receiver = new FileReceiver("file", $request, HandlerFactory::classFromRequest($request));
    if ($receiver->isUploaded() === false) {
        throw new UploadMissingFileException();
    }
    $save = $receiver->receive();

    // check if the upload has finished (in chunk mode it will send smaller files)
    if ($save->isFinished()) {
        return $this->saveFile($save->getFile());
    }
    $handler = $save->handler();

    return response()->json([
        "done" => $handler->getPercentageDone(),
    ]);

the saveFile method will save the file and return an array, that I use in vue.js to show that file is uploaded.

Server configuration :

PHP 7.3.15-3+ubuntu18.04.1, nginx

JS side code :

var vm = this;
     var $fileUpload = $('#resumable-browse');
     var $fileUploadDrop = $('#resumable-drop');

     if ($fileUpload.length > 0 && $fileUploadDrop.length > 0) {
      vm.uploader.resumable = new Resumable({
           chunkSize: 10 * 1024 * 1024, // 10MB
           simultaneousUploads: 1,
           testChunks: false,
           throttleProgressCallbacks: 1,
           // Get the url from data-url tag
           target: '/api/media',
           withCredentials : true,
           headers : { "X-CSRF-TOKEN": document.head.querySelector('meta[name="csrf-token"]').content },
        });

        if (!vm.uploader.resumable.support) {
           vm.uploader.isSupported = false;
        } 
        else {
           vm.uploader.initialized = true;
           vm.uploader.resumable.assignDrop($fileUploadDrop[0]);
           vm.uploader.resumable.assignBrowse($fileUploadDrop[0]);
           vm.uploader.resumable.on('fileAdded', vm.fileAdded);
           vm.uploader.resumable.on('fileSuccess', vm.fileSuccess);
           vm.uploader.resumable.on('fileError', vm.fileError);
        }
     }

fileSuccess(file, message) {
         let vm = this;
         let response = JSON.parse(message);
         // setting the value of s3 url and mux url for copy to clipboard
         if(response.uploadedMedia.file_type == "Videos")
         {
           file.mux_url = response.uploadedMedia.mux_url;
           file.file_type = "Videos";
         }
         else {
           file.s3_url = response.uploadedMedia.s3_url;
           file.file_type = "OtherThanVideoFile";
         }
         // setting the status message after upload success 
         let fileResponseMessage = response.uploadedMedia.status;
         if(fileResponseMessage == 'Completed') {
           file.fileUploadMessage = 'Success';
         }
         else if(fileResponseMessage == 'Processing') { 
           file.fileUploadMessage = 'The file is queued for processing'; 
         }
         else if(fileResponseMessage == 'Error') {
           file.fileUploadMessage = 'Failed';
         }
         //  special case for video setting the status message after upload success
         if(response.uploadedMedia.file_type == "Videos") { file.fileUploadMessage = 'The file is queued for processing'; }

         if(!response.is_success) {
           vm.$alert(response.errorMessage);
         }   
        //vm.uploader.resumable.removeFile(file)
        vm.loadMedia(1);
      }

Debugging I did:

I have checked and the chunks are going to server-side and getting stored, but when the last chunk is received by the server, the isFinished() method is not getting called, hence I'm getting error in my vue.js.

On the fileSuccess event of resumable.js, I'm calling a function fileSuccess(file, message) and in this I am trying to read a property that is being returned by the saveFile() method from server. After the last chunk is uploaded to server, I get return as "{"done": 97}" but I should get the return of saveFile method from server.

What am I missing here??