Viewing File: /home/markqprx/iniasli.pro/client/uploads/uploader/use-active-upload.ts
import {useCallback, useRef} from 'react';
import {useFileUploadStore} from './file-upload-provider';
import {UploadedFile} from '../uploaded-file';
import {UploadStrategyConfig} from './strategy/upload-strategy';
import {openUploadWindow} from '../utils/open-upload-window';
import {useDeleteFileEntries} from '@common/uploads/requests/delete-file-entries';
interface DeleteEntryProps {
onSuccess: () => void;
entryPath?: string;
}
export function useActiveUpload() {
const deleteFileEntries = useDeleteFileEntries();
// use ref for setting ID to avoid extra renders, zustand selector
// will pick up changed selector on first progress event
const uploadIdRef = useRef<string>();
const uploadSingle = useFileUploadStore(s => s.uploadSingle);
const _abortUpload = useFileUploadStore(s => s.abortUpload);
const updateFileUpload = useFileUploadStore(s => s.updateFileUpload);
const activeUpload = useFileUploadStore(s =>
uploadIdRef.current ? s.fileUploads.get(uploadIdRef.current) : null,
);
const uploadFile = useCallback(
(file: File | UploadedFile, config?: UploadStrategyConfig) => {
uploadIdRef.current = uploadSingle(file, config);
},
[uploadSingle],
);
const selectAndUploadFile = useCallback(
async (config?: UploadStrategyConfig) => {
const files = await openUploadWindow({
types: config?.restrictions?.allowedFileTypes,
});
uploadFile(files[0], config);
return files[0];
},
[uploadFile],
);
const deleteEntry = useCallback(
({onSuccess, entryPath}: DeleteEntryProps) => {
const handleSuccess = () => {
if (activeUpload) {
updateFileUpload(activeUpload.file.id, {
...activeUpload,
entry: undefined,
});
}
onSuccess();
};
if (!entryPath && !activeUpload?.entry?.id) {
handleSuccess();
return;
}
deleteFileEntries.mutate(
{
paths: entryPath ? [entryPath] : undefined,
entryIds: activeUpload?.entry?.id
? [activeUpload?.entry?.id]
: undefined,
deleteForever: true,
},
{onSuccess: handleSuccess},
);
},
[deleteFileEntries, activeUpload, updateFileUpload],
);
const abortUpload = useCallback(() => {
if (activeUpload) {
_abortUpload(activeUpload.file.id);
}
}, [activeUpload, _abortUpload]);
return {
uploadFile,
selectAndUploadFile,
percentage: activeUpload?.percentage || 0,
uploadStatus: activeUpload?.status,
entry: activeUpload?.entry,
deleteEntry,
isDeletingEntry: deleteFileEntries.isPending,
activeUpload,
abortUpload,
};
}
Back to Directory
File Manager