CODEWITHSUNDEEP
javascriptreactjsfirebase-storage
sebvm
sebvm

Reputation: 1

How do I upload multiple files to Firebase from React and get the file name?

I'm trying to set up React with Firebase. Currently i have an input form, where i can upload pictures to my firebase. My issue is that i can't;

  1. Upload more than one file (the new overwrites the old one)
  2. I can't get the files name.
import { getStorage, ref, uploadBytes, } from "firebase/storage";
import { app } from './base'

function SubmitApp (){


    const onChange = (e) => {
        const file = e.target.files[0]
        const storage = getStorage(app)
        const storageRef = ref(storage, 'images') // this names the files images, but can't delete
        uploadBytes(storageRef, file).then(() => {
            console.log('Uploaded to Firebase')
        })
    }
        

    return (
        <form onChange={onChange} >
             <input  type='file' name='file' />
             <button>Submit</button>
        </form>

       
    )
}

export default SubmitApp

Upvotes: 0

Views: 385

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599776

To upload all files:

const onChange = (e) => {
  const storage = getStorage(app)
  const storageRef = ref(storage, 'images')
  const now = Date.now()
  e.target.files.forEach((file, index) => {
    uploadBytes(storageRef.child("file_"+now+"_"+index), file).then(() => {
      console.log('Uploaded to Firebase')
    })
  })
}

Here we loop over all files the user selected, and name them after the current time and their index on the server.

Upvotes: 1

Related Questions