You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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
Copy file name to clipboardExpand all lines: docs/recipes/upload.md
+57-36Lines changed: 57 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,37 +1,38 @@
1
1
# Upload
2
2
3
3
## File Drag/Drop Upload with Delete
4
+
4
5
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.
5
6
6
7
**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.
<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
+
}
69
74
70
75
Uploader.propTypes= {
71
76
firebase:PropTypes.object.isRequired,
72
77
uploadedFiles:PropTypes.object
73
-
};
78
+
}
74
79
75
80
// Apply enhancer to component on export
76
-
exportdefaultenhance(Uploader);
81
+
exportdefaultenhance(Uploader)
77
82
```
78
83
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:
0 commit comments