To download a file, you will need to get a reference to that file using either https:// or gs:// URL of the file, or you can construct it by appending child paths to the storage root.

The next code snippet shows these methods:

var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/folder/file.jpg')

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage..../file.jpg')

We will extend our HelpDesk application to allow the user to view the snapshot for a ticket if uploaded any. You will need to update code in the ViewTickets.jsx file under the ticket-listing folder. We already get a URL from our database, so we don't need to get a reference to get the download URL:

 componentDidMount() {
    const itemsRef = firebase.database().ref('/helpdesk/tickets/'+this.props.userId);

    itemsRef.on('value', (snapshot) => {
      let tickets = snapshot.val();
      if(tickets != null){
        let ticketKeys = Object.keys(tickets);
        let newState = [];
        for (let ticket in tickets) {
          newState.push({
            id:ticketKeys,
            email:tickets[ticket].email,
            issueType:tickets[ticket].issueType,
            department:tickets[ticket].department,
            comments:tickets[ticket].comments,
            status:tickets[ticket].status,
            date:tickets[ticket].date,
            snapshotURL: tickets[ticket].snapshotURL
        });
      }
        this.setState({
          tickets: newState
        });
      }
    });
}

render() {
    return (
        <table className="table">
        <thead>
        <tr> 
            <th>Email</th>
            <th>Issue Type</th> 
            <th>Department</th> 
            <th>Comments</th>
            <th>Status</th> 
            <th>Date</th> 
            <th>Snapshot</th> 
        </tr>
        </thead>
        <tbody>
              {
                
                this.state.tickets.length > 0 ?
                this.state.tickets.map((item,index) => {
                return (
                  
                  <tr key={item.id[index]}>
                    <td>{item.email}</td>
                    <td>{item.issueType}</td> 
                    <td>{item.department}</td> 
                    <td>{item.comments}</td>
                    <td>{item.status === 'progress'?'In Progress':''}</td> 
                    <td>{item.date}</td> 
                    <th><a target="_blank" href={item.snapshotURL}>View</a></th> 
                  </tr>
                )
              }) :
              <tr>
                <td colSpan="5" className="text-center">No tickets found.</td>
              </tr>
            }
        </tbody>
        </table>
    );

Like for file upload, you need to handle errors for download in a similar manner as well.

Now, let's see how we can delete files from Cloud Storage.