random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Clean file input after uploading files

Browse Source 
- Enhance file upload component to trigger re-renders on state changes
This commit is contained in:
Dmitrii Shilov 2025-07-14 15:04:05 +02:00
parent 6ec909a97b
commit 01588223f0
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
View File

@ -13,7 +13,7 @@ import {
import { Upload } from "Common/Upload/Upload";
import { UploadDetailsRecord } from "Contracts/ViewModels";
import { logConsoleError } from "Utils/NotificationConsoleUtils";
import React, { ChangeEvent, FunctionComponent, useState } from "react";
import React, { ChangeEvent, FunctionComponent, useReducer, useState } from "react";
import { getErrorMessage } from "../../Tables/Utilities";
import { useSelectedNode } from "../../useSelectedNode";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
@ -57,6 +57,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
const [formError, setFormError] = useState<string>("");
const [isExecuting, setIsExecuting] = useState<boolean>();
const [reducer, setReducer] = useReducer((x) => x + 1, 1);
const onSubmit = () => {
setFormError("");
@ -75,6 +76,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
(uploadDetails) => {
setUploadFileData(uploadDetails.data);
setFiles(undefined);
setReducer(); // Trigger a re-render to update the UI with new upload details
// Emit the upload details to the parent component
onUpload && onUpload(uploadDetails.data);
},
@ -95,6 +97,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
const props: RightPaneFormProps = {
formError,
isExecuting: isExecuting,
isSubmitButtonDisabled: !files || files.length === 0,
submitButtonText: "Upload",
onSubmit,
};
@ -192,6 +195,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
<RightPaneForm {...props}>
<div className="paneMainContent">
<Upload
key={reducer} // Force re-render on state change
label="Select JSON Files"
onUpload={updateSelectedFiles}
accept="application/json"