React.js Kullanarak Dosyaları Firebase Storage'a Yükleme

Firebase depolama, resimler, videolar ve ses dosyaları gibi kullanıcı tarafından oluşturulan verileri depolamanın basit bir yolunu sunar. Firebase kimlik doğrulamasıyla bütünleşir, böylece dosyalara kimin erişimi olduğunu kontrol edebilirsiniz.

İhtiyaçlarınıza göre otomatik olarak ölçeklendiği için Firebase'i kullanarak büyük miktarda içerik depolayabilirsiniz. React JavaScript kitaplığı gibi üçüncü taraf bir çerçeveyle kullanımı kolaydır

Proje Kurulumu

Dosyaları yüklemek için Firebase depolama, kullanıcıların dosya sisteminden bir dosya seçmesine izin veren bir web formu oluşturmanız gerekir.

La başlamak bir React uygulaması oluşturma create-tepki-app kullanarak. adlı bir React projesi oluşturmak için bu komutu çalıştırın. firebase-yükleme:

npx oluşturmak-react-app firebase-yükleme

Basit tutmak için, yalnızca dosyaları kabul eden bir giriş düğmesine ve bir yükleme düğmesine ihtiyacınız var. İçeriğini değiştirin App.js aşağıdaki kod ile.

içe aktarmak {useState} itibaren "tepki"
işlevUygulama() {
 const [dosya, setFile] = useState("");





instagram viewer

// Girişi yönetir değişiklikEtkinlikve güncelleme durumu
işlevkoluDeğiştir(Etkinlik) {
setFile(Etkinlik.hedef.Dosyalar[0]);
 }
dönüş (
<div>
<giriş türü="dosya" kabul et="resim/*" onChange={handleChange}/>
<buton>Firebase'e yükle</button>
</div>
 );
}
ihracatvarsayılan Uygulama;

Yukarıdaki kodda, giriş etiketler kabul öznitelik yalnızca resimlere izin verecek şekilde ayarlanmıştır. bu tutamakChange() işlevi, girdi değişikliğini işler ve alınan dosyayı depolamak için durumu günceller.

Firebase'i kurun

Dosyayı Firebase deposuna yüklemeden önce bir Firebase projesi oluşturmanız gerekir.

Firebase Projesi Oluşturun

Bir Firebase projesi oluşturmak için aşağıdaki talimatları izleyin:

1. şuraya git Firebase konsol sayfası ve tıklayın proje ekle veya Proje oluştur (ilk kez bir proje oluşturuyorsanız).
2. Projenize istediğiniz ismi verin ve tıklayın. Devam etmek.
3. Bu proje için ihtiyacınız olmadığından Google Analytics'in seçimini kaldırın ve Proje oluşturun.
4. Tıklamak Devam etmek proje hazır olduğunda.
5. Tıkla web simgesi Bir web uygulamasını kaydetmek için projeye genel bakış sayfasında
6. Uygulamanıza bir takma ad verin ve tıklayın Kayıt olmak.
7. Sağlanan yapılandırma nesnesini kopyalayın. Uygulamanızı Firebase'e bağlamak için buna ihtiyacınız olacak.

Bulut Depolama Paketi Oluşturun

Firebase, dosyaları bir bulut depolama paketinde depolar. Oluşturmak için aşağıdaki adımları izleyin:

1. Projeye genel bakış sayfasında, üzerine tıklayın. Depolamak sol gezinme panelindeki sekme.
2. Tıklamak Başlamak ve seçin Test modu.
3. Varsayılan depolama kovası konumunu seçin ve Tamamlandı.

Artık Firebase depolama alanına dosya yüklemeye hazırsınız.

React'e Firebase ekleyin

Terminalinizde React proje klasörünüze gidin. Firebase SDK'yı yüklemek için aşağıdaki komutu çalıştırın:

npm Yüklemek ateş üssü

Yeni bir dosya oluşturun, firebaseConfig.jsve Firebase'i başlatın.

içe aktarmak { initializeApp } itibaren "firebase/uygulama";
içe aktarmak { getStorage } itibaren "firebase/depolama";
// Firebase'i başlat
const app = initializeApp ({
 APIAnahtarı: <APIAnahtarı>,
 authDomain: <authDomain>,
 proje kimliği: <proje kimliği>,
 depolamaKepçe: <depolamaKepçe>,
 mesajlaşmaSenderId: <mesajlaşmaSenderId>,
 uygulama kimliği: <uygulama kimliği>,
 ölçüm kimliği: <ölçüm kimliği>,
});
// Firebase depolama referansı
const depolama = getStorage (uygulama);
ihracatvarsayılan depolamak;

Firebase uygulamasını başlatmak için Firebase projesini oluşturduktan sonra edindiğiniz yapılandırma nesnesini kullanın.

Son satır, uygulamanızın geri kalanından bu örneğe erişebilmeniz için Firebase depolama referansını dışa aktarır.

Görüntüleri Firebase'e Yüklemek için Bir İşleyici İşlevi Oluşturun

Yükleme düğmesine tıklamak, dosyayı Firebase depolama alanına yüklemekten sorumlu işlevi tetiklemelidir. Bu fonksiyonu oluşturalım.

İçinde App.js, işlevi ekle koluYükle. İşlevde, bir kullanıcı bir dosya seçmeden önce yükleme düğmesine tıklayabileceğinden dosyanın boş olup olmadığını kontrol edin. Dosya yoksa, kullanıcıya önce bir dosya yüklemesini söyleyen bir uyarı verin.

işlevkoluYükle() {
 if (!dosya) {
 uyarmak("Lütfen önce bir dosya seçin!")
 }
}

Dosya varsa, bir depolama referansı oluşturun. Bir depolama referansı, üzerinde çalışmak istediğiniz Buluttaki dosyaya bir işaretçi görevi görür.

Oluşturduğunuz depolama hizmetini içe aktararak başlayın. firebaseConfig.js dosya.

içe aktarmak depolamak itibaren "./firebaseConfig.js"

İçe aktarmak referans Firebase depolama örneğinden alın ve depolama hizmetini ve dosya yolunu bağımsız değişken olarak iletin.

içe aktarmak {ref} itibaren "firebase/depolama"
işlevkoluYükle() {
 if (!dosya) {
 uyarmak("Lütfen önce bir dosya seçin!")
 }
const depolamaRef = başvuru (depolama, `/dosyalar/${dosya.name}`)
}

Ardından, Firebase depolama örneğini şuraya ileterek bir yükleme görevi oluşturun. uploadBytesResumable() işlev. Kullanabileceğiniz birkaç yöntem vardır, ancak bu yöntem bir yüklemeyi duraklatmanıza ve devam ettirmenize olanak tanır. Ayrıca ilerleme güncellemelerini de gösterir.

bu uploadBytesResumable() işlevi, depolama referansını ve yüklenecek dosyayı kabul eder.

içe aktarmak {
 referans,
 uploadBytesResumable 
} itibaren "firebase/depolama";
işlevkoluYükle() {
Eğer (!dosya) {
 alert("Lütfen önce bir dosya seçiniz!")
 }
const depolamaRef = başvuru (depolama, `/dosyalar/${dosya.name}`)
const uploadTask = uploadBytesResumable (storageRef, dosya);
}

Dosya yüklenirken ilerlemeyi izlemek ve hataları işlemek için durum değişikliklerini, hataları ve tamamlamayı dinleyin.

içe aktarmak {
 referans,
 uploadBytesResumable,
 getDownloadURL 
} itibaren "ateş tabanı/depolama";
işlevkoluYükle() {
 if (!dosya) {
 uyarmak("Lütfen önce bir dosya seçin!")
 }
const depolamaRef = başvuru (depolama,`/dosyalar/${dosya.name}`)
const uploadTask = uploadBytesResumable (storageRef, dosya);
yükleGörev.üzerinde(
"state_changed",
 (anlık görüntü) => {
const yüzde = Matematik.yuvarlak(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// ilerleme durumunu güncelle
 setPercent (yüzde);
 },
 (hata) => konsol.log (hata),
 () => {
// url'yi indir
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsol.log (url);
 });
 }
 ); 
}

burada, state_changed event'in üç geri arama işlevi vardır. İlk işlevde, yükleme ilerlemesini takip ediyor ve ilerleme durumunu yüklüyorsunuz. İkinci geri arama işlevinde, yükleme başarısız olursa bir hatayı işleyin.

Son işlev, yükleme tamamlandığında çalışır ve indirme URL'sini alır ve ardından bunu konsolda görüntüler. Gerçek hayattaki bir uygulamada, onu bir veritabanına kaydedebilirsiniz.

Yüzde durumunu kullanarak yüklemenin ilerleme durumunu görüntüleyebilirsiniz. Ayrıca bir ekleyin tıklamada tetiklemek için yükleme düğmesindeki olay koluYükle işlev.

içe aktarmak { useState } itibaren "tepki";
işlevUygulama() {
const [yüzde, setPercent] = useState(0);
dönüş (
<div>
<giriş türü="dosya" onChange={handleChange} kabul="" />
<buton onClick={handleUpload}>Firebase'e yükle</button>
<p>{yüzde} "% tamamlamak"</p>
</div>
 )
}

İşte tam kod App.js:

içe aktarmak { useState } itibaren "tepki";
içe aktarmak { depolamak } itibaren "./firebaseConfig";
içe aktarmak { ref, uploadBytesResumable, getDownloadURL } itibaren "firebase/depolama";
işlevUygulama() {
// Yüklenen dosyanın saklanacağı durum
 const [dosya, setFile] = useState("");
// ilerlemek
const [yüzde, setPercent] = useState(0);
// Dosya yükleme olayını ve güncelleme durumunu işle
işlevkoluDeğiştir(Etkinlik) {
setFile(Etkinlik.hedef.Dosyalar[0]);
 }
const handUpload = () => {
 if (!dosya) {
 uyarmak("Lütfen önce bir resim yükleyin!");
 }
const depolamaRef = başvuru (depolama, `/dosyalar/${dosya.name}`);
// ilerleme duraklatılabilir ve devam ettirilebilir. Ayrıca ilerleme güncellemelerini de gösterir.
// Depolama referansını ve yüklenecek dosyayı alır.
const uploadTask = uploadBytesResumable (storageRef, dosya);
yükleGörev.üzerinde(
"state_changed",
 (anlık görüntü) => {
const yüzde = Matematik.yuvarlak(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// ilerleme durumunu güncelle
 setPercent (yüzde);
 },
 (hata) => konsol.log (hata),
 () => {
// url'yi indir
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsol.log (url);
 });
 }
 );
 };
dönüş (
<div>
<giriş türü="dosya" onChange={handleChange} kabul="/image/*" />
<buton onClick={handleUpload}>Firebase'e yükle</button>
<p>{yüzde} "% tamamlamak"</p>
</div>
 );
}
ihracatvarsayılan Uygulama;

Firebase Storage ile Daha Fazlasını Yapın

Dosya yüklemek, Firebase depolamanın en temel özelliklerinden biridir. Ancak, Firebase depolamasının yapmanıza izin verdiği başka şeyler de vardır. Dosyalarınıza erişebilir, görüntüleyebilir, düzenleyebilir ve silebilirsiniz.

Daha karmaşık bir uygulamada, kullanıcıların yalnızca dosyalarıyla etkileşim kurmalarına izin vermek için kimliklerini doğrulamak isteyebilirsiniz.

Firebase & React ile Kullanıcıların Kimliklerinin Doğrulanması

Sonrakini Oku

Yazar hakkında