Skip to content

Commit 98e42be

Browse files
authored
v2.3.0
* feat(storage): pass file metadata through `uploadFile` to `storage.put` calls - prescottprue#720 * fix(auth): pass `updateProfile` options to action - prescottprue#701 - @cruzdanilo * fix(profile): only include `providerData` if it is not an empty array in Firestore - prescottprue#699 * feat(webpack): add `lodash-webpack-plugin` to shrink bundle size
2 parents 14879f7 + 446fbfa commit 98e42be

File tree

14 files changed

+44677
-19124
lines changed

14 files changed

+44677
-19124
lines changed

docs/recipes/upload.md

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
11
# Upload
22

33
## File Drag/Drop Upload with Delete
4+
45
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.
56

67
**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.
78

89
```js
9-
import React from 'react';
10-
import PropTypes from 'prop-types';
11-
import { connect } from 'react-redux';
12-
import { map } from 'lodash';
13-
import { compose, withHandlers, setPropTypes } from 'recompose';
14-
import { firebaseConnect } from 'react-redux-firebase';
15-
import Dropzone from 'react-dropzone';
10+
import React from 'react'
11+
import PropTypes from 'prop-types'
12+
import { connect } from 'react-redux'
13+
import { map } from 'lodash'
14+
import { compose, withHandlers, setPropTypes } from 'recompose'
15+
import { firebaseConnect } from 'react-redux-firebase'
16+
import Dropzone from 'react-dropzone'
1617

1718
// Path within Database for metadata (also used for file Storage path)
18-
const filesPath = 'uploadedFiles';
19+
const filesPath = 'uploadedFiles'
1920

2021
const handlers = {
2122
// Uploads files and push's objects containing metadata to database at dbPath
2223
onFilesDrop: props => files => {
2324
// uploadFiles(storagePath, files, dbPath)
24-
return props.firebase.uploadFiles(filesPath, files, filesPath);
25+
return props.firebase.uploadFiles(filesPath, files, filesPath)
2526
},
2627
onFileDelete: props => (file, key) => {
2728
// deleteFile(storagePath, dbPath)
28-
return props.firebase.deleteFile(file.fullPath, `${filesPath}/${key}`);
29+
return props.firebase.deleteFile(file.fullPath, `${filesPath}/${key}`)
2930
}
30-
};
31+
}
3132

3233
const enhancerPropsTypes = {
3334
firebase: PropTypes.object.isRequired
34-
};
35+
}
3536

3637
// Component Enhancer that adds props.firebase and creates a listener for
3738
// files them passes them into props.uploadedFiles
@@ -46,41 +47,61 @@ const enhance = compose(
4647
setPropTypes(enhancerPropsTypes),
4748
// Add handlers as props
4849
withHandlers(handlers)
49-
);
50-
51-
const Uploader = ({ uploadedFiles, onFileDelete, onFilesDrop }) => (
52-
<div>
53-
<Dropzone onDrop={onFilesDrop}>
54-
<div>Drag and drop files here or click to select</div>
55-
</Dropzone>
56-
{uploadedFiles && (
57-
<div>
58-
<h3>Uploaded file(s):</h3>
59-
{map(uploadedFiles, (file, key) => (
60-
<div key={file.name + key}>
61-
<span>{file.name}</span>
62-
<button onClick={() => onFileDelete(file, key)}>Delete File</button>
63-
</div>
64-
))}
65-
</div>
66-
)}
67-
</div>
68-
);
50+
)
51+
52+
function Uploader({ uploadedFiles, onFileDelete, onFilesDrop }) {
53+
return (
54+
<div>
55+
<Dropzone onDrop={onFilesDrop}>
56+
<div>Drag and drop files here or click to select</div>
57+
</Dropzone>
58+
{uploadedFiles && (
59+
<div>
60+
<h3>Uploaded file(s):</h3>
61+
{map(uploadedFiles, (file, key) => (
62+
<div key={file.name + key}>
63+
<span>{file.name}</span>
64+
<button onClick={() => onFileDelete(file, key)}>
65+
Delete File
66+
</button>
67+
</div>
68+
))}
69+
</div>
70+
)}
71+
</div>
72+
)
73+
}
6974

7075
Uploader.propTypes = {
7176
firebase: PropTypes.object.isRequired,
7277
uploadedFiles: PropTypes.object
73-
};
78+
}
7479

7580
// Apply enhancer to component on export
76-
export default enhance(Uploader);
81+
export default enhance(Uploader)
7782
```
7883

79-
### Change File Metadata
80-
When uploading files as in the above example, you can modify how the file's meta data is written to the database.
84+
### Include File Metata Data
85+
86+
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:
8187

8288
```js
89+
const storagePath = 'avatars'
90+
const dbPath = 'avatarFilesInfo'
91+
const fileMetadata = { contentType: 'image/jpeg' }
92+
93+
firebase
94+
.uploadFile(storagePath, file, dbPath, { metadata: fileMetadata })
95+
.then(() => {
96+
console.log('File uploaded successfully')
97+
})
98+
```
99+
100+
### Change Info Stored In Database
83101

102+
When uploading files as in the above example, you can modify how the file's meta data is written to the database.
103+
104+
```js
84105
// within your createStore.js or store.js file include the following config
85106
const config = {
86107
fileMetadataFactory: (uploadRes, firebase, metadata, downloadURL) => {

0 commit comments

Comments
 (0)