How to return multiple file in laravel

Language used : php with laravel and js with react

I am trying to send a response as file from server side (laravel) to client side (react).

$generatedFiles is an array who contain all docx to return.

To know : It's working when I return only one file, but I don't know how to return multiple

SERVER SIDE :

 $generatedFiles[] = public_path() . '/' . $fileName . '.docx'; //  
    return response()->file(Here need to return all file in generatedFiles);

This is how i return one file (working)

return response()->file(public_path() . '/' . $fileName . '.docx');

This is how I get the response in my client (react) side

export const postProject = (datas) => async (dispatch) => {
  console.log(datas);
  dispatch(setPostLoading(true));

  await axios({
    method: 'post',
    url: `${process.env.REACT_APP_API}/api/projects`,
    data: datas,
    responseType: 'blob',
    headers: {
      Accept:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    },
  }).then((res) => {
    if (!res.data) {
      dispatch(setError(true));
    } else {
      var blob = new Blob([res.data], {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });
      saveAs(blob, 'test.docx');
    }
  });
  /* .then(() => {
      dispatch(deleteDocxFile());
    });*/
  dispatch(setPostLoading(false));
};

What I have tried :

• tried to implement zip but got "The compressed zip folder is invalid"

  foreach ($generatedFiles as $file) {
  $zip->addFile($file, basename($file)); // Add each generated docx file to the zip
  }

   $zip->close();
  
   // Read the zip file and send its contents as a response
   $fileContents = file_get_contents($zipPath);
   $response = response()->make($fileContents, 200, [
       'Content-Type' => 'application/zip',
       'Content-Disposition' => 'attachment; filename="generated_files.zip"',
   ]);
  
   // Clean up the temporary files
   unlink($zipPath);
  
   return $response;
  

• tried to return my generatedFiles array as json and map through it in client side but then I don't know what to do with the element from generatedFiles map

return response()->json($generatedFiles);

Resolved :

I have used zip from laravel to pass all my files in a zip.

  $zipFileName = 'generated_files.zip';
    $zipPath = public_path($zipFileName);
    $zip = new ZipArchive();

    if ($zip->open($zipPath, ZipArchive::CREATE | ZipArchive::OVERWRITE) !== true) {
        // Unable to create the ZIP file
        return response()->json(['error' => 'Failed to create ZIP file'], 500);
    }

    foreach ($generatedFiles as $generatedFile) {
        // Add each generated DOCX file to the ZIP archive
        $docxFileName = basename($generatedFile);
        $zip->addFile($generatedFile, $docxFileName);
    }

    $zip->close();

    // Remove the individual generated DOCX files (optional)
    foreach ($generatedFiles as $generatedFile) {
        unlink($generatedFile);
    }

    // Return the ZIP file as the response
    return response()->download($zipPath)->deleteFileAfterSend(true);µ

and then client side :

 export const postProject = (datas) => async (dispatch) => {
  console.log(datas);
  dispatch(setPostLoading(true));

  await axios({
    method: 'post',
    url: `${process.env.REACT_APP_API}/api/projects`,
    data: datas,
    responseType: 'blob',
  }).then((res) => {
    if (!res.data) {
      dispatch(setError(true));
    } else {
      const blob = new Blob([res.data], {
        type: 'application/zip', // Set the correct content type for the ZIP file
      });
      saveAs(blob, 'generated_files.zip');
    }
  });
  /* .then(() => {
      dispatch(deleteDocxFile());
    });*/
  dispatch(setPostLoading(false));
};