Storage
Firebase Storage is available within components by using this.props.firebase.storage()
. This method is equivalent to Firebase's firebase.storage()
method, meaning you can reference the Firebase Storage Docs for the full list of methods and examples.
For Examples of how to use these methods, please visit the recipes section.
uploadFiles
Upload an array of files to a location on Firebase storage. This includes the option to also write meta data for the object to Firebase database.
Available on props.firebase
if using firebaseConnect
HOC or using getFirebase
.
Parameters
path
String - Path within Firebase Storage at which to upload File.files
Array - Array of File Blobs to upload to Firebase Storage.databasePath
String - Path within Firebase Database at which to write files metadata.options
Object - Options for uploadoptions.name
String | Function - Name of file or function that returns the name of the file. If a function is passed the argument syntax is(file, internalFirebase, uploadConfig)
wherefile
is the file object (file.name
is used as default if no name option is passed).
Returns
Promise Resolves with an array of uploadFile
promises results (described below).
uploadFile
Upload a single file to a location.
Available on props.firebase
if using firebaseConnect
HOC or using getFirebase
.
Parameters
path
String - Path within Firebase Storage at which to upload File.file
Blob - File Blob to upload to Firebase Storage.databasePath
String - Path within Firebase Database at which to write file metadata.options
Object - Options for uploadoptions.name
String | Function - Name of file or function that returns the name of the file. If a function is passed the argument syntax is(file, internalFirebase, uploadConfig)
wherefile
is the file object (file.name
is used as default if no name option is passed).
Returns
Promise Resolves with an object containing uploadTaskSnaphot
which is the firebase.storage.UploadTaskSnaphot returned from the storageRef.put
call which happens internally. If databasePath
is provided snapshot
, key
, File
, and metaDataSnapshot
parameters are also included.
Examples
Dropzone File Upload/Delete
deleteFile
Delete a file from Firebase storage with the option to remove metadata from real time database.
Available on props.firebase
if using firebaseConnect
HOC or using getFirebase
.
Parameters
path
String - Path within Firebase Storage of File to delete.databasePath
String - Path within Firebase Database from which to remove File metadata.
Returns
Example
import React from 'react'
import PropTypes from 'prop-types'
import { firebaseConnect } from 'react-redux-firebase'
const Uploader = ({ deleteFile }) =>
<div>
<h1>Example File Delete</h1>
<span>Deletes `index.txt` from storage</span>
<button onClick={() => deleteFile('index.txt')}>
Delete
</button>
</div>
Uploader.propTypes = {
firebase: PropTypes.shape({ // comes from firebaseConnect
deleteFile: PropTypes.func.isRequired
})
}
export default firebaseConnect()(Uploader)
Other Storage Methods
Access to Firebase's storage
is available. This is useful for calling methods such as putString
. Below is an example of Uploading a string as a File to Firebase Storage.
Example
File String Upload
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { firebaseConnect } from 'react-redux-firebase'
class Uploader extends Component {
static propTypes = {
firebase: PropTypes.object
}
addTestFile = () => {
const { firebase: { storage } } = this.props;
const storageRef = storage().ref()
const fileRef = storageRef.child('test.txt')
return fileRef.putString('Some File Contents')
.then(snap => console.log('upload successful', snap))
.catch(err => console.error('error uploading file', err))
}
render() {
return (
<div>
<h1>Example Upload</h1>
<button onClick={this.addTestFile}>
Upload Example File
</button>
</div>
)
}
}
export default firebaseConnect()(Uploader)