add "Upload" link at top of +New page

Author: williamstein

src/packages/frontend/file-upload.tsx

@@ -101,6 +101,7 @@ interface FileUploadProps {
   dropzone_handler?: DropzoneComponentHandlers;
   close_button_onclick?: (event) => void;
   show_header: boolean;
+  config?: object; // All supported dropzone.js config options
 }
 
 export const FileUpload: React.FC<FileUploadProps> = (props) => {
@@ -140,7 +141,10 @@ export const FileUpload: React.FC<FileUploadProps> = (props) => {
       {props.show_header ? <Header /> : undefined}
       <div style={DROPSTYLE}>
         <DropzoneComponent
-          config={{ postUrl: postUrl(props.project_id, props.current_path) }}
+          config={{
+            postUrl: postUrl(props.project_id, props.current_path),
+            ...props.config,
+          }}
           eventHandlers={props.dropzone_handler}
           djsConfig={{
             previewTemplate: ReactDOMServer.renderToStaticMarkup(
@@ -475,3 +479,29 @@ const DropzonePreview: React.FC<DropzonePreviewProps> = ({ project_id }) => {
     </div>
   );
 };
+
+export function UploadLink({
+  project_id,
+  path,
+  onUpload,
+  style,
+}: {
+  project_id: string;
+  path: string;
+  onUpload?: Function;
+  style?;
+}) {
+  return (
+    <FileUploadWrapper
+      project_id={project_id}
+      dest_path={path}
+      event_handlers={{ complete: onUpload }}
+      config={{ clickable: ".cocalc-upload-link" }}
+      style={{ display: "inline" }}
+    >
+      <a style={style} className="cocalc-upload-link">
+        Upload
+      </a>
+    </FileUploadWrapper>
+  );
+}

src/packages/frontend/project/new/new-file-page.tsx

@@ -24,7 +24,7 @@ import {
   Tip,
 } from "@cocalc/frontend/components";
 import FakeProgress from "@cocalc/frontend/components/fake-progress";
-import { FileUpload } from "@cocalc/frontend/file-upload";
+import { FileUpload, UploadLink } from "@cocalc/frontend/file-upload";
 import { special_filenames_with_no_extension } from "@cocalc/frontend/project-file";
 import { ProjectMap } from "@cocalc/frontend/todo-types";
 import { filename_extension, is_only_downloadable } from "@cocalc/util/misc";
@@ -265,7 +265,17 @@ export default function NewFilePage(props: Props) {
     <SettingBox
       show_header
       icon={"plus-circle"}
-      title={<>Create or Upload New File or Folder</>}
+      title={
+        <>
+          Create or{" "}
+          <UploadLink
+            project_id={project_id}
+            path={current_path}
+            onUpload={() => getActions().fetch_directory_listing()}
+          />{" "}
+          New File or Folder
+        </>
+      }
       subtitle={
         <div>
           <PathNavigator