fix: enhance folder download endpoint with zip file support (#4706)

* expanding download folder to zip file

* run formatter

* Update src/backend/base/langflow/api/v1/folders.py

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

* changing model to flowRead

* run formatter

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-11-19 15:41:37 -03:00 • committed by GitHub
commit 9e8715cf4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 80 additions and 30 deletions

View file

@ -125,7 +125,7 @@ const SideBarFoldersButtonsComponent = ({
});
};
const { mutate: mutateDownloadFolder } = useGetDownloadFolders();
const { mutate: mutateDownloadFolder } = useGetDownloadFolders({});
const handleDownloadFolder = (id: string) => {
mutateDownloadFolder(
@ -133,20 +133,29 @@ const SideBarFoldersButtonsComponent = ({
folderId: id,
},
{
onSuccess: (data) => {
data.folder_name = data?.name || "folder";
data.folder_description = data?.description || "";
const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(data),
)}`;
onSuccess: (response) => {
// Create a blob from the response data
const blob = new Blob([response.data], {
type: "application/x-zip-compressed",
});
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = jsonString;
link.download = `${data?.name}.json`;
link.href = url;
// Get filename from header or use default
const filename =
response.headers?.["content-disposition"]
?.split("filename=")[1]
?.replace(/['"]/g, "") ?? "flows.zip";
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
track("Folder Exported", { folderId: id! });
link.remove();
window.URL.revokeObjectURL(url);
track("Folder Exported", { folderId: id });
},
onError: () => {
setErrorData({

View file

@ -1,4 +1,5 @@
import { useMutationFunctionType } from "@/types/api";
import { UseMutationResult } from "@tanstack/react-query";
import { api } from "../../api";
import { getURL } from "../../helpers/constants";
import { UseRequestProcessor } from "../../services/request-processor";
@ -8,22 +9,31 @@ interface IGetDownloadFolders {
}
export const useGetDownloadFolders: useMutationFunctionType<
undefined,
any, // Changed to any since we're getting the full response
IGetDownloadFolders
> = (options?) => {
const { mutate } = UseRequestProcessor();
const downloadFoldersFn = async (
data: IGetDownloadFolders,
): Promise<void> => {
const res = await api.get(`${getURL("FOLDERS")}/download/${data.folderId}`);
return res.data;
payload: IGetDownloadFolders,
): Promise<any> => {
const response = await api.get<any>(
`${getURL("FOLDERS")}/download/${payload.folderId}`,
{
responseType: "blob",
headers: {
Accept: "application/x-zip-compressed",
},
},
);
return response;
};
const mutation = mutate(
const mutation: UseMutationResult<any, any, IGetDownloadFolders> = mutate(
["useGetDownloadFolders"],
downloadFoldersFn,
options,
);
return mutation;
};