How to get meta data of files in firebase storage using ReactJS ?
Within the domain of web development, effective file management is a frequent necessity, and Firebase Storage emerges as a resilient solution. This article explores the nuances of extracting metadata from files housed in Firebase Storage through the lens of ReactJS.
Prerequisites:
Steps to create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app myapp
Step 2: After creating your project folder i.e. myapp, move to it using the following command:
cd myapp
Step 3: After creating the ReactJS application, Install the firebase module using the following command:
npm install firebase@8.3.1 --save
Step 4: Go to your firebase dashboard and create a new project and copy your credentials.
const firebaseConfig = {
apiKey: "your api key",
authDomain: "your credentials",
projectId: "your credentials",
storageBucket: "your credentials",
messagingSenderId: "your credentials",
appId: "your credentials"
};
Step 5: Initialize the Firebase into your project by creating firebase.js file with the following code.
import firebase from 'firebase';
const firebaseConfig = {
// Your Credentials
};
firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
export default storage;
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"firebase": "^8.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Here, We are going to use a method called getMetadata which helps us to get the meta data of files in firebase storage.
Javascript
import { useState } from 'react' ;
import storage from './firebase' ;
function App() {
const [image, setImage] = useState( '' );
const [show, setShow] = useState( false );
const [value, setValue] = useState( '' );
const upload = () => {
if (image == null )
return ;
storage.ref(`/images/${image.name}`).put(image)
.on( "state_changed" , alert( "success" ), alert, () => {
storage.ref( "images" )
.child(image.name)
.getMetadata()
.then((data) => {
setValue(data);
setShow( true );
})
});
}
return (
<div className= "App"
style={{ marginTop: 250 }}>
<center>
<input type= "file"
onChange={
(e) => { setImage(e.target.files[0]) }} />
<button
onClick={upload}>
Upload
</button>
<br /><br /><br /><br />
{
show ?
<div>
<h2>Name :
{value.name}
</h2>
<h2>Size :
{value.size}
</h2>
<h2>Path :
{value.fullpath}
</h2>
<h2>Time :
{value.timeCreated}
</h2>
</div>
:
<div></div>
}
</center>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Last Updated :
04 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...