feat(storage): pass file metadata through uploadFile to storage.put c…

…alls - #720

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 }) => (
-  <div>
-    <Dropzone onDrop={onFilesDrop}>
-      <div>Drag and drop files here or click to select</div>
-    </Dropzone>
-    {uploadedFiles && (
-      <div>
-        <h3>Uploaded file(s):</h3>
-        {map(uploadedFiles, (file, key) => (
-          <div key={file.name + key}>
-            <span>{file.name}</span>
-            <button onClick={() => onFileDelete(file, key)}>Delete File</button>
-          </div>
-        ))}
-      </div>
-    )}
-  </div>
-);
+)
+
+function Uploader({ uploadedFiles, onFileDelete, onFilesDrop }) {
+  return (
+    <div>
+      <Dropzone onDrop={onFilesDrop}>
+        <div>Drag and drop files here or click to select</div>
+      </Dropzone>
+      {uploadedFiles && (
+        <div>
+          <h3>Uploaded file(s):</h3>
+          {map(uploadedFiles, (file, key) => (
+            <div key={file.name + key}>
+              <span>{file.name}</span>
+              <button onClick={() => onFileDelete(file, key)}>
+                Delete File
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
 
 Uploader.propTypes = {
   firebase: PropTypes.object.isRequired,
   uploadedFiles: PropTypes.object
-};
+}
 
 // Apply enhancer to component on export
-export default enhance(Uploader);
+export default enhance(Uploader)
 ```
 
-### Change File Metadata
-When uploading files as in the above example, you can modify how the file's meta data is written to the database.
+### Include File Metata Data
+
+As described in [the upload file section of the Firebase docs](https://firebase.google.com/docs/storage/web/upload-files#add_file_metadata), it is possible to include file metadata while uploading. To do so, include the `metadata` property in the options object:
 
 ```js
+const storagePath = 'avatars'
+const dbPath = 'avatarFilesInfo'
+const fileMetadata = { contentType: 'image/jpeg' }
+
+firebase
+  .uploadFile(storagePath, file, dbPath, { metadata: fileMetadata })
+  .then(() => {
+    console.log('File uploaded successfully')
+  })
+```
+
+### Change Info Stored In Database
 
+When uploading files as in the above example, you can modify how the file's meta data is written to the database.
+
+```js
 // within your createStore.js or store.js file include the following config
 const config = {
   fileMetadataFactory: (uploadRes, firebase, metadata, downloadURL) => {