Clear Dropzone Previews After Submission & On Location Change

Also use correct mutation for Other Media Submission

frontend/src/Student/actions.js

@@ -4,6 +4,7 @@ import pdf from 'assets/pdf.svg'
 
 export const UPLOAD_IMAGE = 'UPLOAD_IMAGE'
 export const UPLOAD_PDF = 'UPLOAD_PDF'
+export const CLEAR_PREVIEW = 'CLEAR_PREVIEW'
 
 export const uploadImage = (file) => (dispatch, getState, client) => {
   // Endpoint expects 'multipart/form-data' w/ key 'image'
@@ -44,3 +45,9 @@ export const uploadPDF = (file) => (dispatch, getState, client) => {
     }))
     .catch(console.error) // TODO: Handle the error
 }
+
+export const clearPreview = () => (dispatch, getState, client) => {
+  dispatch({
+    type: CLEAR_PREVIEW
+  })
+}

frontend/src/Student/components/OtherMediaSubmissionForm.js

@@ -38,7 +38,8 @@ class OtherSubmissionForm extends Component {
     handlePDFUpload: PropTypes.func.isRequired,
     previewFile: PropTypes.object.isRequired,
     create: PropTypes.func.isRequired,
-    done: PropTypes.func.isRequired
+    done: PropTypes.func.isRequired,
+    clearPreview: PropTypes.func.isRequired
   }
 
   static defaultProps = {
@@ -50,6 +51,11 @@ class OtherSubmissionForm extends Component {
     this.state = {
       showModal: false
     }
+    // We clear any uploaded files.
+    // This resets the field if a user uploads a file, navigates to another page,
+    // and comes back to this form, or a user makes a submission and comes back to
+    // this page to make another submission.
+    props.clearPreview()
   }
 
   renderFileUpload = (field, form) => {

frontend/src/Student/components/PhotoSubmissionForm.js

@@ -38,7 +38,8 @@ class PhotoSubmissionForm extends Component {
     handleUpload: PropTypes.func.isRequired,
     previewImage: PropTypes.object.isRequired,
     create: PropTypes.func.isRequired,
-    done: PropTypes.func.isRequired
+    done: PropTypes.func.isRequired,
+    clearPreview: PropTypes.func.isRequired
   }
 
   static defaultProps = {
@@ -50,6 +51,11 @@ class PhotoSubmissionForm extends Component {
     this.state = {
       showModal: false
     }
+    // We clear any uploaded files.
+    // This resets the field if a user uploads a file, navigates to another page,
+    // and comes back to this form, or a user makes a submission and comes back to
+    // this page to make another submission.
+    props.clearPreview()
   }
 
   renderFileUpload = (field, form) => {

frontend/src/Student/containers/OtherMediaSubmissionForm.js

@@ -2,10 +2,10 @@ import { graphql, compose } from 'react-apollo'
 import { push } from 'connected-react-router'
 import { connect } from 'react-redux'
 
-import { uploadImage, uploadPDF } from '../actions'
+import { uploadImage, uploadPDF, clearPreview } from '../actions'
 
 import OtherMediaSubmissionForm from '../components/OtherMediaSubmissionForm'
-import CreateOtherMediaEntry from '../mutations/createVideoEntry.graphql'
+import CreateOtherMediaEntry from '../mutations/createOtherMediaEntry.graphql'
 
 const mapStateToProps = (state) => ({
   previewFile: state.student.ui.submission.previewFile || {},
@@ -15,7 +15,8 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
   done: () => dispatch(push('/')),
   handlePDFUpload: (file) => dispatch(uploadPDF(file)),
-  handleImageUpload: (file) => dispatch(uploadImage(file))
+  handleImageUpload: (file) => dispatch(uploadImage(file)),
+  clearPreview: () => dispatch(clearPreview())
 })
 
 const withRedux = connect(mapStateToProps, mapDispatchToProps)(OtherMediaSubmissionForm)

frontend/src/Student/containers/PhotoSubmissionForm.js

@@ -2,7 +2,7 @@ import { graphql, compose } from 'react-apollo'
 import { push } from 'connected-react-router'
 import { connect } from 'react-redux'
 
-import { uploadImage } from '../actions'
+import { uploadImage, clearPreview } from '../actions'
 
 import PhotoSubmissionForm from '../components/PhotoSubmissionForm'
 import CreatePhotoEntry from '../mutations/createPhotoEntry.graphql'
@@ -14,7 +14,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   done: () => dispatch(push('/')),
-  handleUpload: (file) => dispatch(uploadImage(file))
+  handleUpload: (file) => dispatch(uploadImage(file)),
+  clearPreview: () => dispatch(clearPreview())
   // TODO: Removing an image -> you upload, but change your mind; put a 'x' on the top right corner
 })
 

frontend/src/Student/reducers.js

@@ -26,6 +26,14 @@ const ui = (state = {
           previewFile: action.payload
         }
       }
+    case actions.CLEAR_PREVIEW:
+      return {
+        ...state,
+        submission: {
+          ...state.submission,
+          previewFile: {}
+        }
+      }
     default:
       return state
   }

frontend/src/shared/components/FormikSelectInput.js

@@ -18,7 +18,8 @@ class FormikSelectInput extends Component {
           PropTypes.shape({
             value: PropTypes.string,
             label: PropTypes.string
-          }))
+          })),
+        PropTypes.string // '' when empty
       ]),
       onChange: PropTypes.func, // setFieldValue
       onBlur: PropTypes.func // setFieldTouched