Skip to content

Commit

Permalink
v2.3.0
Browse files Browse the repository at this point in the history
* feat(storage): pass file metadata through `uploadFile` to `storage.put` calls - #720
* fix(auth): pass `updateProfile` options to action - #701 - @cruzdanilo
* fix(profile): only include `providerData` if it is not an empty array in Firestore - #699
* feat(webpack): add `lodash-webpack-plugin` to shrink bundle size
  • Loading branch information
prescottprue committed Jul 13, 2019
2 parents 14879f7 + 446fbfa commit 98e42be
Show file tree
Hide file tree
Showing 14 changed files with 44,677 additions and 19,124 deletions.
93 changes: 57 additions & 36 deletions docs/recipes/upload.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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) => {
Expand Down

0 comments on commit 98e42be

Please sign in to comment.