I am getting the following error while trying to upload files to Firebase Storage:
TypeError: Cannot read properties of undefined (reading 'path')
Following is my firebase SDK:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: ...
authDomain: ...
databaseURL: ...
projectId: ...
storageBucket: ...
messagingSenderId: ...
appId: ...
measurementId: ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);
const firestore = getFirestore(app);
const storage = getStorage(app);
// }
export { database, auth, app, firestore, storage };
The following is the the upload functionality of the app:
import {
getDownloadURL,
ref as storageRef,
uploadBytes,
} from "firebase/storage";
.
.
.
const handleImageChange = (event) => {
const file = event.target.files[0];
setImage(file);
};
const handleUpload = () => {
if (!image) {
console.error('No image selected');
return;
}
try {
const imageRef = storageRef(storage, `images/{user.uid}/{image.name}`);
uploadBytes(imageRef, image)
.then((snapshot) => {
getDownloadURL(snapshot.ref)
.then((url) => {
console.log(url)
})
.catch((error) => {
alert("failure");
});
})
.catch((error) => {
alert("failure below");
});
} catch (error) {
console.error('Error uploading image:', error);
}
};
.
.
.
<div>
<input type="file" onChange={handleImageChange} />
<Button variant="contained" onClick={handleUpload}>Upload Image</Button>
</div>
Also after uploading the file onto Storage I want to get the downloadURL as I want to push the same onto the database. Any help regarding this is highly appreciated!