markdown editor file upload -- show progress and upload area

- even more disconcerting to NOT have this, since you don't know
  progress
- nice to have, since can easily then upload more docs
- i fixed the X

Author: williamstein

src/packages/frontend/editors/slate/upload.tsx

@@ -20,7 +20,7 @@ function uploadTarget(path: string, file: { name: string }): string {
 
 export default function useUpload(
   editor: SlateEditor,
-  body: JSX.Element
+  body: JSX.Element,
 ): JSX.Element {
   const dropzoneRef = useRef<Dropzone>(null);
   const { actions, project_id, path } = useFrameContext();
@@ -50,7 +50,7 @@ export default function useUpload(
           if (file != null) {
             const blob = file.slice(0, -1, item.type);
             dropzoneRef?.current?.addFile(
-              new File([blob], `paste-${Math.random()}`, { type: item.type })
+              new File([blob], `paste-${Math.random()}`, { type: item.type }),
             );
           }
           return; // what if more than one ?
@@ -95,8 +95,6 @@ export default function useUpload(
     };
   }, []);
 
-  // Note: using show_upload={false} since showing the upload right in the
-  // wysiwyg editor is really disconcerting.
   return (
     <FileUploadWrapper
       className="smc-vfill"

src/packages/frontend/file-upload.tsx

@@ -35,6 +35,14 @@ const CHUNK_SIZE_MB = 8;
 
 const TIMEOUT_S = 100;
 
+const CLOSE_BUTTON_STYLE = {
+  position: "absolute",
+  right: 0,
+  zIndex: 1, // so it floats above text/markdown buttons
+  background: "white",
+  cursor: "pointer",
+} as const;
+
 /*
 CHUNK_SIZE_MB being set properly is critical for cloudflare to work --
 we want this to be as big as possible, but MUST be smaller than
@@ -123,7 +131,7 @@ export const FileUpload: React.FC<FileUploadProps> = (props) => {
 
   function render_close_button() {
     return (
-      <div className="close-button pull-right">
+      <div className="close-button" style={CLOSE_BUTTON_STYLE}>
         <span
           onClick={props.close_button_onclick}
           className="close-button-x"
@@ -311,7 +319,7 @@ export const FileUploadWrapper: React.FC<FileUploadWrapperProps> = (props) => {
 
     return (
       <div style={style}>
-        <div className="close-button pull-right">
+        <div className="close-button" style={CLOSE_BUTTON_STYLE}>
           <span
             onClick={() => {
               close_preview();