Merge pull request #88 from microsoft/dev

[deploy] fix an error with file upload

Author: Chenglong-MS

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "data_formulator"
-version = "0.1.5"
+version = "0.1.5.1"
 
 requires-python = ">=3.9"
 authors = [

src/views/ConceptCard.tsx

@@ -278,7 +278,7 @@ export const ConceptCard: FC<ConceptCardProps> = function ConceptCard({ field })
                 <Typography className="draggable-card-title" sx={{ fontSize: 13, height: 28, width: "100%" }} component={'span'} gutterBottom>
                     {typeIconMenu}
                     {fieldNameEntry}
-                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", fontStyle: 'italic'}}>-- {field.semanticType}</Typography> : ""}
+                    {field.semanticType ? <Typography sx={{fontSize: "xx-small", marginLeft: "6px", fontStyle: 'italic', whiteSpace: 'nowrap'}}>-- {field.semanticType}</Typography> : ""}
                     {/* {field.source == "custom" ? exampleToComponent(field.domain.values, 3) : ""} */}
                 </Typography>
                 <Box className='draggable-card-action-button' sx={{ position: "absolute", right: 1, background: 'rgba(255, 255, 255, 0.95)' }}>{cardHeaderOptions}</Box>

src/views/TableSelectionView.tsx

@@ -255,17 +255,15 @@ export interface TableUploadDialogProps {
 }
 
 export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElement, disabled }) => {
-
     const dispatch = useDispatch<AppDispatch>();
-
-    let $uploadInputFile = React.createRef<HTMLInputElement>();
-
-    let handleFileUpload = (event: React.FormEvent<HTMLElement>): void => {
-        const target: any = event.target;
-        if (target && target.files) {
-            for (let file of target.files) {
-                //const file: File = target.files[0];
-                (file as File).text().then((text) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    let handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const files = event.target.files;
+        
+        if (files) {
+            for (let file of files) {
+                file.text().then((text) => {
                     let table = loadDataWrapper(file.name, text, file.type);
                     if (table) {
                         dispatch(dfActions.addTable(table));
@@ -276,14 +274,30 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
         }
     };
 
-    return <Button sx={{fontSize: "inherit"}} variant="text" color="primary" 
-                   disabled={disabled}>
-                <Input inputProps={{ accept: '.csv,.tsv,.json', multiple: true  }} id="upload-data-file"
-                    type="file"  sx={{ display: 'none' }} aria-hidden={true} 
-                    ref={$uploadInputFile} onChange={handleFileUpload}
-                />
+    return (
+        <>
+            <Input
+                inputProps={{ 
+                    accept: '.csv,.tsv,.json',
+                    multiple: true,
+                }}
+                id="upload-data-file"
+                type="file"
+                sx={{ display: 'none' }}
+                inputRef={inputRef}
+                onChange={handleFileUpload}
+            />
+            <Button 
+                sx={{fontSize: "inherit"}} 
+                variant="text" 
+                color="primary" 
+                disabled={disabled}
+                onClick={() => inputRef.current?.click()}
+            >
                 {buttonElement}
-            </Button>;
+            </Button>
+        </>
+    );
 }