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;
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
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.