92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import { Button, Space } from "antd";
|
|
import axios from "axios";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
import cleanAxios from "../../utils/CleanAxios";
|
|
import formatBytes from "../../utils/formatbytes";
|
|
|
|
export default function JobsDocumentsDownloadButton({
|
|
galleryImages,
|
|
identifier,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [download, setDownload] = useState(null);
|
|
const imagesToDownload = [
|
|
...galleryImages.images.filter((image) => image.isSelected),
|
|
...galleryImages.other.filter((image) => image.isSelected),
|
|
];
|
|
const handleDownload = () => {
|
|
logImEXEvent("jobs_documents_download");
|
|
|
|
axios
|
|
.post("/media/download", {
|
|
ids: imagesToDownload.map((_) => _.key),
|
|
})
|
|
.then((r) => {
|
|
// window.open(r.data);
|
|
downloadAs(
|
|
r.data,
|
|
`${identifier || "images"}.zip`,
|
|
(progressEvent) => {
|
|
const percentage = Math.round(
|
|
(progressEvent.loaded * 100) / progressEvent.total
|
|
);
|
|
console.log(progressEvent, percentage);
|
|
setDownload((currentDownloadState) => {
|
|
return {
|
|
downloaded: progressEvent.loaded || 0,
|
|
speed:
|
|
(progressEvent.loaded || 0) -
|
|
((currentDownloadState && currentDownloadState.downloaded) ||
|
|
0),
|
|
};
|
|
});
|
|
},
|
|
() => setDownload(null)
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
loading={!!download}
|
|
disabled={imagesToDownload.length < 1}
|
|
onClick={handleDownload}
|
|
>
|
|
<Space>
|
|
<span>{t("documents.actions.download")}</span>
|
|
{download && (
|
|
<span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(
|
|
download.speed
|
|
)} / second)`}</span>
|
|
)}
|
|
</Space>
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const downloadAs = (url, name, onDownloadProgress, onCompleted) => {
|
|
cleanAxios
|
|
.get(url, {
|
|
headers: {
|
|
"Content-Type": "application/octet-stream",
|
|
},
|
|
responseType: "blob",
|
|
onDownloadProgress: onDownloadProgress,
|
|
})
|
|
.then((response) => {
|
|
onCompleted && onCompleted();
|
|
const a = document.createElement("a");
|
|
const url = window.URL.createObjectURL(response.data);
|
|
a.href = url;
|
|
a.download = name;
|
|
a.click();
|
|
})
|
|
.catch((err) => {
|
|
console.log("error", err);
|
|
});
|
|
};
|