fully compatible with workaround interview

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 yarn-error.log
+dist

package.json

@@ -8,7 +8,8 @@
     "storybook": "start-storybook -p 6006",
     "build": "npm run build:formatter",
     "build:format": "babel --plugins=babel-plugin-flow-runtime --presets=@babel/preset-flow ./src/material-survey-format.js.flow --out-file=./src/material-survey-format.js",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "build:babel": "NODE_ENV=production babel ./src --presets=react-app --out-dir=./dist"
   },
   "author": "Severin Ibarluzea, CollegeAI Inc.",
   "license": "ISC",
@@ -21,23 +22,26 @@
     "@material-ui/core": "^3.6.1",
     "@material-ui/icons": "^3.0.1",
     "@material-ui/lab": "^3.0.0-alpha.24",
-    "@seveibar/k-choice-sort": "^1.0.8",
     "@storybook/addon-actions": "^4.1.0-alpha.11",
     "@storybook/addon-links": "^4.1.0-alpha.11",
     "@storybook/addons": "^4.1.0-alpha.11",
     "@storybook/react": "next",
     "babel-loader": "^8.0.4",
     "babel-plugin-flow-runtime": "^0.17.0",
+    "babel-preset-react-app": "^6.1.0",
     "flow-runtime": "^0.17.0",
     "lodash": "^4.17.11",
     "prettier": "^1.15.3",
-    "react": "alpha",
     "react-hot-loader": "next",
-    "react-select": "^2.1.2",
-    "styled-components": "^4.1.2",
     "zipcodes": "^8.0.0"
   },
   "dependencies": {
-    "surveyjs-expression-eval": "^1.0.1"
+    "surveyjs-expression-eval": "^1.0.1",
+    "styled-components": "^4.1.2",
+    "lodash": "^4.17.11",
+    "@seveibar/k-choice-sort": "^1.0.8",
+    "react": "alpha",
+    "react-dropzone": "^8.0.1",
+    "react-select": "^2.1.2"
   }
 }

src/components/FileQuestion/index.js

@@ -0,0 +1,63 @@
+// @flow
+
+import type { FileQuestion } from "../../material-survey-format.js.flow"
+import React, { useState } from "react"
+import QuestionContainer from "../QuestionContainer"
+import styled from "styled-components"
+import QuestionText from "../QuestionText"
+import useQuestionAnswer from "../../hooks/use-question-answer"
+import Dropzone from "react-dropzone/dist/es"
+
+const Box = styled.div`
+  && {
+    border: 2px dashed #ccc;
+    font-family: Roboto, sans-serif;
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    cursor: pointer;
+  }
+`
+
+export default ({
+  question,
+  onChangeAnswer,
+  onFileUpload
+}: {
+  question: FileQuestion,
+  onChangeAnswer: Function,
+  onFileUpload: File => Promise<string>
+}) => {
+  const [{ answer, error }, changeAnswer] = useQuestionAnswer(
+    question,
+    onChangeAnswer
+  )
+  const [uploading, changeUploadingState] = useState(false)
+  return (
+    <QuestionContainer question={question} answered={answer !== undefined}>
+      <Dropzone
+        onDrop={async (file: File) => {
+          const fileUrl = await onFileUpload(file)
+          changeAnswer(fileUrl)
+        }}
+      >
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <Box {...getRootProps()}>
+            <input {...getInputProps()} />
+            {isDragActive ? (
+              <p>Drop file here...</p>
+            ) : (
+              <div>
+                {answer ? (
+                  <p>File successfully uploaded! Click to replace.</p>
+                ) : (
+                  <p>Drag and drop a file here, or click to select file.</p>
+                )}
+              </div>
+            )}
+          </Box>
+        )}
+      </Dropzone>
+    </QuestionContainer>
+  )
+}

src/components/FileQuestion/index.story.js

@@ -0,0 +1,20 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+
+import FileQuestion from "./"
+
+storiesOf("FileQuestion", module).add("Basic", () => (
+  <FileQuestion
+    onChangeAnswer={action("onChangeAnswer")}
+    onFileUpload={async () => "http://url.com"}
+    question={{
+      name: "file-example",
+      title: "Upload your resume below",
+      type: "file"
+    }}
+  />
+))

src/components/QuestionContainer/index.js

@@ -41,7 +41,7 @@ export default ({
         style={{ paddingRight: 40 }}
         title={
           <span>
-            {question.title}
+            {question.title || question.name}
             {fadedTitle && <FadedTitle> {fadedTitle}</FadedTitle>}
           </span>
         }

src/components/Survey/index.js

@@ -20,11 +20,13 @@ const SurveyActions = styled.div`
 
 export default ({
   form,
+  onFileUpload,
   onFinish,
   autocompleteRequest
 }: {
   form: SurveyMaterialFormat,
   autocompleteRequest?: AutocompleteRequestFunction,
+  onFileUpload?: File => Promise<string>,
   onFinish: Object => any
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
@@ -57,6 +59,7 @@ export default ({
           <SurveyQuestion
             key={q.name}
             question={q}
+            onFileUpload={onFileUpload}
             onChangeAnswer={(newAnswer: any) => {
               setAnswerMap({
                 ...answerMap,

src/components/Survey/index.story.js

@@ -22,6 +22,7 @@ storiesOf("Survey", module)
     <Survey
       form={workaroundInterview}
       autocompleteRequest={zipCodeAutocompleteRequest}
+      onFileUpload={() => Promise.resolve("http://path.to/file")}
       onFinish={action("onFinish")}
     />
   ))

src/components/Survey/workaround-interview.sample.js

@@ -1458,13 +1458,13 @@ export default {
             "Waste Management and Remediation Services ",
             "Wholesale Trade "
           ]
+        },
+        {
+          type: "file",
+          name: "Upload your CV or Resume",
+          description: "(optional)",
+          maxSize: 0
         }
-        // {
-        //   type: "file",
-        //   name: "Upload your CV or Resume",
-        //   description: "(optional)",
-        //   maxSize: 0
-        // }
       ]
     },
     {

src/components/SurveyQuestion/index.js

@@ -18,20 +18,33 @@ import USRegionQuestion from "../USRegionQuestion"
 import CheckboxQuestion from "../CheckboxQuestion"
 import APIAutocompleteQuestion from "../APIAutocompleteQuestion"
 import DynamicMatrixQuestion from "../DynamicMatrixQuestion"
+import FileQuestion from "../FileQuestion"
+import styled from "styled-components"
 
 export type Props = {
   question: SurveyQuestion,
   onChangeAnswer: Function,
-  autocompleteRequest?: AutocompleteRequestFunction
+  autocompleteRequest?: AutocompleteRequestFunction,
+  onFileUpload?: File => Promise<string>
 }
 
+const Red = styled.div`
+  color: red;
+`
+
 class SurveyQuestionComponent extends Component {
   shouldComponentUpdate = (nextProps: Props) => {
     return nextProps.question !== this.props.question
   }
   onChangeAnswer = (...args: any) => this.props.onChangeAnswer(...args)
   render = () => {
-    const { question, onChangeAnswer, autocompleteRequest } = this.props
+    const {
+      question,
+      onChangeAnswer,
+      autocompleteRequest,
+      onFileUpload
+    } = this.props
+
     switch (question.type) {
       case "slider": {
         return (
@@ -140,7 +153,20 @@ class SurveyQuestionComponent extends Component {
         )
       }
       case "file": {
-        return <div>asd</div>
+        if (!onFileUpload)
+          return (
+            <Red>
+              File Question Type requires an upload handler. Specify
+              onFileUpload.
+            </Red>
+          )
+        return (
+          <FileQuestion
+            question={question}
+            onFileUpload={onFileUpload}
+            onChangeAnswer={this.onChangeAnswer}
+          />
+        )
       }
       default: {
         throw new Error(`Invalid Question Type: "${question.type}"`)

src/material-survey-format.js.flow

@@ -141,6 +141,12 @@ export type RatingQuestion = {
   maxRateDescription?: string
 }
 
+export type FileQuestion = {
+  ...BaseQuestion,
+  type: "file",
+  maxSize?: number
+}
+
 export type SliderQuestion = {
   ...BaseQuestion,
   type: "slider",