Hi everyone, I hope you all are safe and doing fine!
Here, we will be uploading an image in firebase storage.
If you're already familiar with JavaScript, React and Firebase, then you'll be able to get moving with this quickly!
Explanation
First create the project using command
npx create-react-app firebase-tutorial
then install the packages that needed for the navigations
yarn add firebase
After installing the project add new folder named as firebase and create new file in folder. The file structure should be as follows
Now its time to create new project on firebase.
Click here.
Click on Add Project
Enter your project name.
Click on create project.
Now add Web app on clicking </> this.
Register your app name.Ex- firebase-image. Click on Register app.
copy this snippet and paste this snippet in firebase.js file.
firebase.js should look like this.
import firebase from 'firebase'
var firebaseConfig = {
apiKey: "******rBJcUIyThYVrIqg",
authDomain: "********.firebaseapp.com",
projectId: "************",
storageBucket: "**********.appspot.com",
messagingSenderId: "***************",
appId: "*****************df5dfbbee0"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Click on storage icon on left sidebar. Now click on Rules. your rules should look like this.
Change the code and publish.Now your rules changes and should look like this.
Now its time to code. Open App.js and follow the below code.
import React, { Component } from 'react'
import './App.css';
import firebase from "./firebase/firebase"
export default class App extends Component {
constructor(){
super();
this.state = {
image: null,
progress:0,
downloadURL: null
}
}
handleChange = (e) =>{
if(e.target.files[0]){
this.setState({
image: e.target.files[0]
})
}
// console.log(e.target.files[0])
}
handleUpload = () =>{
// console.log(this.state.image);
let file = this.state.image;
var storage = firebase.storage();
var storageRef = storage.ref();
var uploadTask = storageRef.child('folder/' + file.name).put(file);
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) =>{
var progress = Math.round((snapshot.bytesTransferred/snapshot.totalBytes))*100
this.setState({progress})
},(error) =>{
throw error
},() =>{
// uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) =>{
uploadTask.snapshot.ref.getDownloadURL().then((url) =>{
this.setState({
downloadURL: url
})
})
document.getElementById("file").value = null
}
)
}
render() {
return (
<div className="App">
<h4>upload image</h4>
<label>
Choose file
<input type="file" id="file" onChange={this.handleChange} />
</label>
{this.state.progress}
<button className="button" onClick={this.handleUpload}>Upload</button>
<img
className="ref"
src={this.state.downloadURL || "https://via.placeholder.com/400x300"}
alt="Uploaded Images"
height="300"
width="400"
/>
</div>
)
}
}
CSS
.App {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
label{
align-items: center;
padding: 12px;
background: red;
display: table;
color: #fff;
/* margin-left: 700px; */
/* padding-inline: 40px; */
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.ref{
margin-top: auto;
}
input[type="file"] {
display: none;
}
Now run the file using command
npm start
AND DONE
I hope you liked the article!
Thank You!
Top comments (0)