How to properly zip and send files with laraval/php? - php

Question

I'm trying to send some files from my server but after zipping, sending and downloading the files on the client side the files inside the zip are corrupted.
I've tried to save and open the files directly from the backend to verify that the files are ok and it worked.
my php code:
public function download(Procedure $procedureId, UserInfo $userId,Request $request)
{
$userFiles = $userId->files()->where("procedure_id",$procedureId->id)->get()->toArray();
$collectFiles = collect($userFiles);
$files = $collectFiles->map(function($file){
return ['path'=>$file['path'],'fileName'=>$file['real_name']];
});
// $procedureUserInfo = ProcedureUserInfo::find($request->procedureUserInfoId)->attributesToArray();
// $signedPdf = $procedureUserInfo->pdfPath;
$zip = new ZipArchive;
$zipFile ='app/public/compressedZips/'."{$procedureId->name}_{$userId->firstName}.zip";
if( $zip->open(storage_path($zipFile),ZipArchive::CREATE)===TRUE){
foreach($files as $file){
$filePath = Storage::disk("public")->path($file['path']);
$zip->addFile($filePath,$file["fileName"]);
}
$zip->close();
}
return response()->download(storage_path($zipFile),
"{$procedureId->name}_{$userId->firstName}".Carbon::now().".zip"
,["Content-Type"=>'application/zip','Content-Transfer-Encoding'=>"binary"]);
}
my client code (reactjs):
const downloadFile = async ({procedureUserInfoId, procedureTypetype, userId,procedureId,})=> {
try {
let url = "";
store.dispatch(startLoading("downloading..."));
const { data } = await Axios.get(
`procedures/files/${procedureId}/${userId}/download`,
{
params: { procedureUserInfoId, procedureId },
headers: { Authorization: `Bearer ${store.getState().auth?.token}` },
responseType: "arraybuffer",
}
);
if (data) {
let bytes = new Uint8Array(data);
const blob = new Blob([data], { type: "application/zip" });
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.click();
}
} catch (error) {
console.log(error);
// store.dispatch(setError());
} finally {
store.dispatch(stopLoading());
}
};