feat: upload panel fixes (#388)

visgl · Dec 5, 2024 · 7e74986 · 7e74986
1 parent c34bd18
commit 7e74986
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/components/bookmarks-panel/bookmarks-panel.tsx b/src/components/bookmarks-panel/bookmarks-panel.tsx
@@ -284,9 +284,11 @@ export const BookmarksPanel = ({
           onEditBookmarks={onEditBookmarksClickHandler}
           onClearBookmarks={onClearBookmarksClickHandler}
           onUploadBookmarks={() => {
-            setPopoverType(
-              bookmarks.length ? PopoverType.uploadWarning : PopoverType.upload
-            );
+            setTimeout(() => {
+              setPopoverType(
+                bookmarks.length ? PopoverType.uploadWarning : PopoverType.upload
+              );
+            }, 1);
           }}
           onDownloadBookmarks={onDownloadBookmarks}
           onCollapsed={onCollapsed}

diff --git a/src/components/layers-panel/insert-panel/insert-panel.tsx b/src/components/layers-panel/insert-panel/insert-panel.tsx
@@ -247,8 +247,9 @@ export const InsertPanel = ({
             onChange={handleInputChange}
           />
           <UploadPanel
-            dragAndDropText={"Drag and drop your SLPK file here"}
+            dragAndDropText={"Drag and drop your .slpk file here"}
             noPadding={true}
+            accept=".slpk"
             onFileEvent={(files) => { handleInputChange({ target: { files, name: "URL" } }); }}
             fileType={FileType.binary}
           />

diff --git a/src/components/upload-panel/upload-panel.tsx b/src/components/upload-panel/upload-panel.tsx
@@ -43,6 +43,10 @@ const FileTextItem = styled.div`
 
 const DragAndDropFileText = styled(FileTextItem)`
   color: ${({ theme }) => theme.colors.fontColor};
+`;
+
+const UploadedFileText = styled(FileTextItem)`
+  color: ${({ theme }) => theme.colors.fontColor};
   word-break: break-all;
 `;
 
@@ -62,6 +66,7 @@ interface UploadProps {
   fileType: FileType;
   multipleFiles?: boolean;
   noPadding?: boolean;
+  accept?: string;
   onCancel?: () => void;
   onFileUploaded?: (fileUploaded: FileUploaded) => Promise<void> | void;
   onFileEvent?: (files: FileList) => void;
@@ -73,6 +78,7 @@ export const UploadPanel = ({
   fileType,
   multipleFiles,
   noPadding,
+  accept,
   onCancel,
   onFileUploaded,
   onFileEvent,
@@ -117,6 +123,9 @@ export const UploadPanel = ({
     e.stopPropagation();
     setDragActive(false);
     if (e.dataTransfer.files?.[0]) {
+      if (accept && !e.dataTransfer.files?.[0].name.endsWith(accept)) {
+        return;
+      }
       setFileUploaded(e.dataTransfer.files[0].name);
       onFileEvent?.(e.dataTransfer.files);
       readFile(e.dataTransfer.files).catch(() => {
@@ -146,6 +155,7 @@ export const UploadPanel = ({
         type="file"
         multiple={multipleFiles ?? undefined}
         onChange={onUploadChangeHandler}
+        accept={accept}
       />
       <FileInteractionContainer
         data-testid="upload-file-label"
@@ -176,7 +186,7 @@ export const UploadPanel = ({
         {fileUploaded && (
           <>
             <UploadIcon style={{ marginBottom: "10" }} />
-            <DragAndDropFileText>{fileUploaded}</DragAndDropFileText>
+            <UploadedFileText>{fileUploaded}</UploadedFileText>
           </>
         )}
       </FileInteractionContainer>