Add a File Uploader Widget

examples/file_uploader.py

@@ -0,0 +1,42 @@
+# -*- coding: utf-8 -*-
+# Copyright 2018-2019 Streamlit Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Example of file uploader."""
+
+import streamlit as st
+import csv
+
+st.title("Streamlit file_uploader widget")
+
+file_csv = st.file_uploader("Upload a CSV file", type=([".csv"]))
+
+if file_csv:
+
+    file_csv_bytes = st.file_reader(file_csv)
+    data_csv = file_csv_bytes.decode('utf-8').splitlines()
+    reader = csv.reader(data_csv, quoting=csv.QUOTE_MINIMAL)
+
+    results = []
+    for row in reader: # each row is a list
+        results.append(row)
+
+    st.dataframe(results)
+
+
+file_png = st.file_uploader("Upload a PNG image", type=([".png"]))
+
+if file_png:
+    file_png_bytes = st.file_reader(file_png)
+    st.image(file_png_bytes)

frontend/src/App.tsx

@@ -52,6 +52,7 @@ import {
   IBackMsg,
   SessionState,
   Initialize,
+  FileUploadStatus,
 } from "autogen/proto"
 
 import { RERUN_PROMPT_MODAL_DIALOG } from "lib/baseconsts"
@@ -220,6 +221,7 @@ class App extends PureComponent<Props, State> {
   handleMessage(msgProto: ForwardMsg): void {
     // We don't have an immutableProto here, so we can't use
     // the dispatchOneOf helper
+
     const dispatchProto = (obj: any, name: string, funcs: any): any => {
       const whichOne = obj[name]
       if (whichOne in funcs) {
@@ -259,6 +261,20 @@ class App extends PureComponent<Props, State> {
           }
           this.openDialog(newDialog)
         },
+        fileUploadStatus: (fileUploadStatus: FileUploadStatus) => {
+          if (
+            fileUploadStatus.state ===
+              FileUploadStatus.FileUploadState.FINISHED ||
+            fileUploadStatus.state === FileUploadStatus.FileUploadState.DELETED
+          ) {
+            // FINISHED TO UPLOAD
+            this.widgetMgr.setStringValue(
+              fileUploadStatus.id,
+              fileUploadStatus.fileId,
+              { fromUi: true }
+            )
+          }
+        },
       })
     } catch (err) {
       logError(err)

frontend/src/components/core/Block/Block.tsx

@@ -62,6 +62,9 @@ const Progress = React.lazy(() => import("components/elements/Progress/"))
 const Radio = React.lazy(() => import("components/widgets/Radio/"))
 const Selectbox = React.lazy(() => import("components/widgets/Selectbox/"))
 const Slider = React.lazy(() => import("components/widgets/Slider/"))
+const FileUploader = React.lazy(() =>
+  import("components/widgets/FileUploader/")
+)
 const TextArea = React.lazy(() => import("components/widgets/TextArea/"))
 const TextInput = React.lazy(() => import("components/widgets/TextInput/"))
 const TimeInput = React.lazy(() => import("components/widgets/TimeInput/"))
@@ -303,6 +306,15 @@ class Block extends PureComponent<Props> {
           {...widgetProps}
         />
       ),
+      fileUploader: (el: SimpleElement) => (
+        <FileUploader
+          key={el.get("id")}
+          element={el}
+          width={width}
+          widgetStateManager={widgetProps.widgetMgr}
+          disabled={widgetProps.disabled}
+        />
+      ),
       textArea: (el: SimpleElement) => (
         <TextArea
           key={el.get("id")}

frontend/src/components/widgets/FileUploader/FileUploader.scss

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2018-2019 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "src/assets/css/variables";
+
+.file-uploader button:focus {
+  outline: 0;
+}
+
+.file-uploader-error {
+  outline: 0;
+  line-height: 1.6;
+  font-weight: normal;
+  font-size: 1rem;
+  font-family: "IBM Plex Sans", sans-serif;
+
+  height: 10rem;
+  -webkit-box-pack: center;
+  justify-content: center;
+  width: 100%;
+  padding-left: 1rem;
+  padding-bottom: 32px;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  outline: 0px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  display: flex;
+  box-sizing: border-box;
+  border-width: 2px;
+  border-color: rgb(128, 132, 149);
+  background-color: rgb(240, 242, 246);
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.file-uploader-error__text {
+  line-height: 1.6;
+  font-weight: normal;
+  font-size: 1rem;
+  font-family: "IBM Plex Sans", sans-serif;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  color: $red;
+}
+
+.file-uploader-error__button {
+  margin-top: 2rem;
+  color: $red;
+}

frontend/src/components/widgets/FileUploader/FileUploader.tsx

@@ -0,0 +1,158 @@
+/**
+ * @license
+ * Copyright 2018-2019 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { Map as ImmutableMap } from "immutable"
+import { WidgetStateManager } from "lib/WidgetStateManager"
+import { FileUploader as FileUploaderBaseui } from "baseui/file-uploader"
+import { fileUploaderOverrides } from "lib/widgetTheme"
+import "./FileUploader.scss"
+import { Button } from "reactstrap"
+
+interface Props {
+  disabled: boolean
+  element: ImmutableMap<string, any>
+  widgetStateManager: WidgetStateManager
+  width: number
+}
+
+interface State {
+  status: "READY" | "READING" | "UPLOADING"
+  errorMessage?: string
+}
+
+class FileUploader extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+    this.state = {
+      status: "READY",
+    }
+  }
+
+  private handleFileRead = (
+    ev: ProgressEvent<FileReader>,
+    file: File
+  ): any => {
+    if (ev.target !== null) {
+      if (ev.target.result instanceof ArrayBuffer) {
+        this.props.widgetStateManager.sendUploadFileMessage(
+          this.props.element.get("id"),
+          file.name,
+          file.lastModified,
+          new Uint8Array(ev.target.result)
+        )
+      }
+    }
+    this.setState({ status: "UPLOADING" })
+  }
+
+  private dropHandler = (
+    acceptedFiles: File[],
+    rejectedFiles: File[],
+    event: React.SyntheticEvent<HTMLElement>
+  ): void => {
+    const { element } = this.props
+    const maxSize = element.get("maxUploadSize")
+
+    if (rejectedFiles.length > 0) {
+      this.setState({
+        status: "READY",
+        errorMessage: `${rejectedFiles[0].type} files are not allowed`,
+      })
+      return
+    }
+
+    this.setState({ status: "READING" })
+    acceptedFiles.forEach((file: File) => {
+      const fileSilzeMB = file.size / 1024 / 1024
+      if (fileSilzeMB < maxSize) {
+        const fileReader = new FileReader()
+        fileReader.onloadend = (ev: ProgressEvent<FileReader>) =>
+          this.handleFileRead(ev, file)
+        fileReader.readAsArrayBuffer(file)
+      } else {
+        this.setState({
+          status: "READY",
+          errorMessage: `The max file size allowed is ${maxSize}MB`,
+        })
+      }
+    })
+  }
+
+  public componentDidUpdate(): void {
+    const uiValue = this.props.widgetStateManager.getStringValue(
+      this.props.element.get("id")
+    )
+    if (uiValue !== undefined && this.state.status === "UPLOADING") {
+      this.setState({ status: "READY" })
+    }
+  }
+
+  closeErrorMessage = (): void => {
+    this.setState({ status: "READY", errorMessage: undefined })
+  }
+
+  renderErrorMessage = () => {
+    const { errorMessage } = this.state
+    return (
+      <div className="file-uploader-error">
+        <span className="file-uploader-error__text">{errorMessage}</span>
+        <Button
+          className="file-uploader-error__button"
+          outline
+          onClick={this.closeErrorMessage}
+        >
+          Ok
+        </Button>
+      </div>
+    )
+  }
+
+  public render = (): React.ReactNode => {
+    const { status, errorMessage } = this.state
+    const { element } = this.props
+    const accept: string[] = element.get("type").toArray()
+    const label: string = element.get("label")
+    return (
+      <div className="file-uploader">
+        <label>{label}</label>
+        {errorMessage ? (
+          this.renderErrorMessage()
+        ) : (
+          <FileUploaderBaseui
+            onDrop={this.dropHandler}
+            errorMessage={errorMessage}
+            accept={accept}
+            progressMessage={status !== "READY" ? status : undefined}
+            onRetry={() =>
+              this.setState({ status: "READY", errorMessage: undefined })
+            }
+            onCancel={() => {
+              this.setState({ status: "READY", errorMessage: undefined })
+              this.props.widgetStateManager.sendDeleteFileMessage(
+                this.props.element.get("id")
+              )
+            }}
+            overrides={fileUploaderOverrides}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+export default FileUploader

frontend/src/components/widgets/FileUploader/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2018-2019 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from "./FileUploader"