diff --git a/docs/recipes/upload.md b/docs/recipes/upload.md
index a8b9ee2e7..a852d3c44 100644
--- a/docs/recipes/upload.md
+++ b/docs/recipes/upload.md
@@ -1,37 +1,38 @@
# Upload
## File Drag/Drop Upload with Delete
+
This example component uses `react-dropzone` to allow for drag/drop uploading directly to Firebase storage. `props.uploadFiles()` provides the capability to update Firebase database with Files metadata, which is perfect for showing your upload results cleaning in the same component.
**NOTE:** The third argument provided to the `uploadFiles` and `deleteFiles` calls below is the database path where File Metadata will be written/deleted from. This is out of convenience only, simply remove the third argument if you don't want metadata written/deleted to/from database.
```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { map } from 'lodash';
-import { compose, withHandlers, setPropTypes } from 'recompose';
-import { firebaseConnect } from 'react-redux-firebase';
-import Dropzone from 'react-dropzone';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { map } from 'lodash'
+import { compose, withHandlers, setPropTypes } from 'recompose'
+import { firebaseConnect } from 'react-redux-firebase'
+import Dropzone from 'react-dropzone'
// Path within Database for metadata (also used for file Storage path)
-const filesPath = 'uploadedFiles';
+const filesPath = 'uploadedFiles'
const handlers = {
// Uploads files and push's objects containing metadata to database at dbPath
onFilesDrop: props => files => {
// uploadFiles(storagePath, files, dbPath)
- return props.firebase.uploadFiles(filesPath, files, filesPath);
+ return props.firebase.uploadFiles(filesPath, files, filesPath)
},
onFileDelete: props => (file, key) => {
// deleteFile(storagePath, dbPath)
- return props.firebase.deleteFile(file.fullPath, `${filesPath}/${key}`);
+ return props.firebase.deleteFile(file.fullPath, `${filesPath}/${key}`)
}
-};
+}
const enhancerPropsTypes = {
firebase: PropTypes.object.isRequired
-};
+}
// Component Enhancer that adds props.firebase and creates a listener for
// files them passes them into props.uploadedFiles
@@ -46,41 +47,61 @@ const enhance = compose(
setPropTypes(enhancerPropsTypes),
// Add handlers as props
withHandlers(handlers)
-);
-
-const Uploader = ({ uploadedFiles, onFileDelete, onFilesDrop }) => (
-