Để cập nhật ảnh sử dụng Firebase trong ứng dụng ReactJS, bạn cần thực hiện một số bước cơ bản. Dưới đây là hướng dẫn chi tiết:
1. Thiết lập Firebase:
Trước hết, bạn cần phải thiết lập dự án Firebase và lấy các thông tin cần thiết như apiKey, authDomain, projectId, và storageBucket từ bảng điều khiển Firebase.
<a href="https://youtu.be/eLBosOQdFIs" target="_blank">Video hướng dẫn</a>&nbsp;
2. Cài đặt Firebase SDK:
Sử dụng Firebase SDK để kết nối ứng dụng ReactJS của bạn với dự án Firebase. Cài đặt Firebase SDK bằng cách chạy lệnh sau trong thư mục dự án của bạn:
<pre>npm install firebase</pre>
3. Cấu hình Firebase:
Tạo một tập tin cấu hình Firebase (ví dụ: firebaseConfig.js) và thêm các thông tin dự án của bạn vào đó:
<pre>// firebaseConfig.js</pre>
<pre>// Import the functions you need from the SDKs you need</pre>
<pre>import { initializeApp } from "firebase/app";</pre>
<pre>import { getStorage } from "firebase/storage";</pre>
<pre></pre>
<pre>// Your web app's Firebase configuration</pre>
<pre>// For Firebase JS SDK v7.20.0 and later, measurementId is optional</pre>
<pre>const firebaseConfig = {</pre>
<pre>&nbsp;&nbsp;apiKey: "your-key",</pre>
<pre>&nbsp;&nbsp;authDomain: "react-firebase-learning-62f42.firebaseapp.com",</pre>
<pre>&nbsp;&nbsp;projectId: "react-firebase-learning-62f42",</pre>
<pre>&nbsp;&nbsp;storageBucket: "react-firebase-learning-62f42.appspot.com",</pre>
<pre>&nbsp;&nbsp;messagingSenderId: "901466498759",</pre>
<pre>&nbsp;&nbsp;appId: "1:901466498759:web:ea623d13ebabf382e440e2",</pre>
<pre>&nbsp;&nbsp;measurementId: "G-XKZVQRS74Q"</pre>
<pre>};</pre>
<pre></pre>
<pre>// Initialize Firebase</pre>
<pre>const app = initializeApp(firebaseConfig);</pre>
<pre>export const storage = getStorage(app);</pre>
<pre></pre>
4. Tạo component chọn ảnh và tải ảnh lên Store Firebase :
Trong phần hướng dẫn này, tôi sử dụng thư viện Tailwindcss để xây dựng nhanh giao diện, tham khảo tích hợp thư viện Tailwind tại <a href="https://tailwindcss.com/docs/guides/create-react-app" target="_blank">đây</a>&nbsp;
- Tạo giao diện chọn ảnh
<pre>// src/components/ImageUpload.js</pre>
<pre>import React, { useState } from 'react';</pre>
<pre></pre>
<pre>const ImageUpload = () =&gt; {</pre>
<pre>	const [image, setImage] = useState(null); // state lưu ảnh sau khi chọn</pre>
<pre>	const [progress, setProgress] = useState(0); // state hiển thị phần trăm tải ảnh lên store</pre>
<pre></pre>
<pre>	const handleChange = (e) =&gt; {</pre>
<pre>		if (e.target.files[0]) {</pre>
<pre>			setImage(e.target.files[0]);</pre>
<pre>		}</pre>
<pre>	};</pre>
<pre></pre>
<pre>	const handleUpload = () =&gt; {</pre>
<pre>		// xử lý chọn ảnh</pre>
<pre>	};</pre>
<pre></pre>
<pre>	return (</pre>
<pre>		&lt;div className="py-10"&gt;</pre>
<pre>			&lt;div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg"&gt;</pre>
<pre>				&lt;div className="mb-4"&gt;</pre>
<pre>					&lt;input</pre>
<pre>						type="file"</pre>
<pre>						onChange={handleChange}</pre>
<pre>						className="hidden"</pre>
<pre>						id="imageInput"</pre>
<pre>					/&gt;</pre>
<pre>					&lt;label</pre>
<pre>						htmlFor="imageInput"</pre>
<pre>						className="block bg-blue-500 text-white px-4 py-2 rounded-lg cursor-pointer"</pre>
<pre>					&gt;</pre>
<pre>						Select Image</pre>
<pre>					&lt;/label&gt;</pre>
<pre>					{image &amp;&amp; &lt;p className="mt-2"&gt;Selected: {image.name}&lt;/p&gt;}</pre>
<pre>					{image &amp;&amp; (</pre>
<pre>						&lt;img</pre>
<pre>							src={URL.createObjectURL(image)}</pre>
<pre>							alt="Preview"</pre>
<pre>							className="mt-2 rounded-lg shadow-md"</pre>
<pre>							style={{ maxWidth: '100%', maxHeight: '200px' }}</pre>
<pre>						/&gt;</pre>
<pre>					)}</pre>
<pre>				&lt;/div&gt;</pre>
<pre>				{progress &gt; 0 &amp;&amp; (</pre>
<pre>					&lt;progress value={progress} max="100" className="w-full" /&gt;</pre>
<pre>				)}</pre>
<pre>				{image &amp;&amp; (</pre>
<pre>					&lt;button</pre>
<pre>						onClick={handleUpload}</pre>
<pre>						className="bg-green-500 text-white px-4 py-2 rounded-lg"</pre>
<pre>					&gt;</pre>
<pre>						Upload</pre>
<pre>					&lt;/button&gt;</pre>
<pre>				)}</pre>
<pre>			&lt;/div&gt;</pre>
<pre>		&lt;/div&gt;</pre>
<pre>	);</pre>
<pre>};</pre>
<pre></pre>
<pre>export default ImageUpload;</pre>
<pre></pre>
Xử lý tải lên ảnh:
<pre>// src/components/ImageUpload.js</pre>
<pre>// code khác</pre>
<pre>import { storage } from '../firebaseConfig';</pre>
<pre>import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';</pre>
<pre>const metadata = {</pre>
<pre>	contentType: 'image/jpeg',</pre>
<pre>};</pre>
<pre>// code khác</pre>
<pre>	const handleUpload = () =&gt; {</pre>
<pre>		const storageRef = ref(storage, `images/${image.name}`); // tạo 1 địa chỉ để chứa ảnh chuẩn bị tải lên store</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const uploadTask = uploadBytesResumable(storageRef, image, metadata); // hàm tải ảnh lên store&nbsp;</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Đoạn code này để tạo tính năng lắng nghe quá trình tải ảnh, trả về tiến trình để làm tính năng phần trăm tải ảnh</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uploadTask.on(</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'state_changed',</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(snapshot) =&gt; {</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Observe state change events such as progress, pause, and resume</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const progress =</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(snapshot.bytesTransferred / snapshot.totalBytes) * 100;</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setProgress(progress);</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Upload is ' + progress + '% done');</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (snapshot.state) {</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'paused':</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Upload is paused');</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'running':</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Upload is running');</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(error) =&gt; {</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Xử lý trường hợp tải ảnh thất bại</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;() =&gt; {</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Xử lý trường hợp tải ảnh thành công</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Lấy về đường link của ảnh vừa tải thành công</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) =&gt; {</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Upload image successfully, download URL: ' +</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadURL</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// reset các trạng thái sau khi tải ảnh thành công</pre>
<pre>setImage(null);</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setProgress(0);</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('File available at', downloadURL);</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);</pre>
<pre>	};</pre>

Demo: <a href="https://react-firebase-full-options.vercel.app/" target="_blank">https://react-firebase-full-options.vercel.app/</a>&nbsp;
Source tham khảo: <a href="https://github.com/hoanganhtuanbkdn/react-firebase-full-opptions" target="_blank">https://github.com/hoanganhtuanbkdn/react-firebase-full-opptions</a>&nbsp;
Hãy nhớ rằng việc cập nhật ảnh thường cần xử lý việc lưu URL của ảnh đã tải lên vào cơ sở dữ liệu của bạn để sau đó hiển thị ảnh đó trong ứng dụng của bạn.

Mở rộng khả năng của ứng dụng ReactJS của bạn bằng cách học cách tích hợp Firebase để cập nhật ảnh một cách dễ dàng. Đọc hướng dẫn này để biết cách tải lên và quản lý ảnh trong ứng dụng ReactJS của bạn bằng Firebase, mang lại trải nghiệm tốt hơn cho người dùng của bạn.

HD: Sử dụng Firebase để Lưu trữ Ảnh trong Dự Án ReactJS của Bạn