Merge branch '1.0-develop' into develop
This commit is contained in:
commit
e64e28839b
8 changed files with 73 additions and 60 deletions
|
@ -33,7 +33,7 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
|
|||
|
||||
const FileUploadList = () => {
|
||||
const { close } = useContext(DialogWrapperContext);
|
||||
const removeFileUpload = ServerContext.useStoreActions(actions => actions.files.removeFileUpload);
|
||||
const cancelFileUpload = ServerContext.useStoreActions(actions => actions.files.cancelFileUpload);
|
||||
const clearFileUploads = ServerContext.useStoreActions(actions => actions.files.clearFileUploads);
|
||||
const uploads = ServerContext.useStoreState(state =>
|
||||
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b)),
|
||||
|
@ -50,7 +50,7 @@ const FileUploadList = () => {
|
|||
</Tooltip>
|
||||
<Code className={'flex-1 truncate'}>{name}</Code>
|
||||
<button
|
||||
onClick={removeFileUpload.bind(this, name)}
|
||||
onClick={cancelFileUpload.bind(this, name)}
|
||||
className={'text-gray-500 hover:text-gray-200 transition-colors duration-75'}
|
||||
>
|
||||
<XIcon className={'w-5 h-5'} />
|
||||
|
|
|
@ -60,9 +60,6 @@ export default ({ className }: WithClassname) => {
|
|||
|
||||
const onUploadProgress = (data: ProgressEvent, name: string) => {
|
||||
setUploadProgress({ name, loaded: data.loaded });
|
||||
if (data.loaded >= data.total) {
|
||||
timeouts.value.push(setTimeout(() => removeFileUpload(name), 500));
|
||||
}
|
||||
};
|
||||
|
||||
const onFileSubmission = (files: FileList) => {
|
||||
|
@ -74,20 +71,25 @@ export default ({ className }: WithClassname) => {
|
|||
|
||||
const uploads = list.map(file => {
|
||||
const controller = new AbortController();
|
||||
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
|
||||
pushFileUpload({
|
||||
name: file.name,
|
||||
data: { abort: controller, loaded: 0, total: file.size },
|
||||
});
|
||||
|
||||
return () =>
|
||||
getFileUploadUrl(uuid).then(url =>
|
||||
axios.post(
|
||||
url,
|
||||
{ files: file },
|
||||
{
|
||||
signal: controller.signal,
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
params: { directory },
|
||||
onUploadProgress: data => onUploadProgress(data, file.name),
|
||||
},
|
||||
),
|
||||
getFileUploadUrl(uuid).then((url) =>
|
||||
axios
|
||||
.post(
|
||||
url,
|
||||
{ files: file },
|
||||
{
|
||||
signal: controller.signal,
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
params: { directory },
|
||||
onUploadProgress: (data) => onUploadProgress(data, file.name),
|
||||
}
|
||||
)
|
||||
.then(() => timeouts.value.push(setTimeout(() => removeFileUpload(file.name), 500)))
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@ interface ServerFileStore {
|
|||
setUploadProgress: Action<ServerFileStore, { name: string; loaded: number }>;
|
||||
clearFileUploads: Action<ServerFileStore>;
|
||||
removeFileUpload: Action<ServerFileStore, string>;
|
||||
cancelFileUpload: Action<ServerFileStore, string>;
|
||||
}
|
||||
|
||||
const files: ServerFileStore = {
|
||||
|
@ -71,6 +72,15 @@ const files: ServerFileStore = {
|
|||
return;
|
||||
}
|
||||
|
||||
delete state.uploads[payload];
|
||||
}),
|
||||
|
||||
cancelFileUpload: action((state, payload) => {
|
||||
const upload = state.uploads[payload];
|
||||
if (upload === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Abort the request if it is still in flight. If it already completed this is
|
||||
// a no-op.
|
||||
upload.abort.abort();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue