React Js Firebase Dosya Yükleme

React js Firebase dosya yükleme aslında oldukça basit. Bunun için firebase konusunda biraz bilgi sahibi olmak gerekiyor.

En temelde firebase bize 2 paket sunuyor. Sunucu taraflı çalışan firebase-admin paketi ve client taraflı çalışan firebase paketi. Bizim kullanacağımız client taraflı çalışan paket olacak. Şimdi adım adım react js ile firebase dosya yükleme işlemi nasıl oluyor ona geçelim.

React Uygulaması Oluşturalım

Burada bir komut ile react projesi oluşturacağız.

npx create-react-app my-app

Burada npm değil npx yazdığınızdan emin olun. npm ve npx arasındaki fark için buraya göz atabilirsiniz. İşlem tamamlandıktan sonra proje dizinine girip npm run start deyip localhost:3000 adresine gidip her şeyin düzgün çalıştığından emin olabilirsiniz.

Firebase Projesi Oluşturalım

Bu adrese giderek bir firebase projesi oluşturalım. Proje oluşturma işlemi oldukça basit. Daha sonra karşımıza çıkan ekranın üst kısmından Uygulama Ekle‘ye tıklayalım ve Web projesini seçelim. Uygulamaya bir isim verelim Uygulamayı Kaydet diyelim. Karşımıza bir kod bloğu çıkacak altta belirttiğim alanı kopyalayalım bu değerleri birazdan react uygulamamızla firebase’in iletişim kurması için kullanacağız.

Son olarak Firebase sayfasında solda bulunan Storage kısmına tıklayarak Storage modulünü aktif edelim.

Dikkat:

Firebase Storage kullanırken güvenlik amaçlı çeşitli kurallar tanımlanmaktadır. Storage’i aktif ettiğinizde varsayılan ayarlarda eğer kullanıcı oturum açmamışsa dosya yazma/okuma işlemleri kısıtlanmıştır. Bunu deneme amaçlı kapatmak için Storage penceresini açalım ve üstte Kurallar/Rules yazan yere tıklayalım. Şuan deneme yaptığımız için kullanıcı oturum açmasa da storage kısmına dosya yükleyebilsin demek için kodları aşağıdaki gibi düzenleyin.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

Firebase Paketini Kuralım

Firebase konsolunda şu anlık yapmamız gereken bir kısım kalmadı. Tekrar react uygulamamıza geçelim.

npm install firebase

Paket yükleme işlemi bittikten sonra src klasörü içinde firebase-client.js adında dosya oluşturalım ve içeriğini şu şekilde düzenleyelim.

import firebaseClient from "firebase/app";
import "firebase/storage";

const CLIENT_CONFIG = {
    apiKey: "---api-key---",
    authDomain: "fir-e2e00.firebaseapp.com",
    databaseURL: "https://fir-e2e00.firebaseio.com",
    projectId: "fir-e2e00",
    storageBucket: "fir-e2e00.appspot.com",
    messagingSenderId: "257922006170",
    appId: "1:257922006170:web:ede309131b59f59fb3f323"
};

if (typeof window !== "undefined" && !firebaseClient.apps.length) {
  firebaseClient.initializeApp(CLIENT_CONFIG);
}
export { firebaseClient };

Siz CLIENT_CONFIG kısmını kendi proje ayarlarınıza göre düzenleyin.

App.js İçinde Form Oluşturalım

src klasörü içindeki App.js içerisine bir form oluşturalım. Varsayılan olarak gelen App fonksiyonumuz başlangıçta şu şekilde olmalı.

function App() {
  return (
    <div className="App">
      <form method="POST" encType="multipart/form-data">
        <input type="file" className="filetype" />
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}

onSubmit ve onChange Olayları

Şu an yapmamız gereken dosya yükleme input’umuzun onChange eventine yani bir dosya seçildiği anda yapılacak işlemi ve form’umuzun submit yani Upload butonuna basıldığında gerçekleşecek olayları oluşturmak. App.js’in son hâli aşağıdaki gibi olmalıdır

import { useState } from "react";
import "./App.css";
import { firebaseClient } from "./firebase-client";

function App() {
  const [image, setImage] = useState('');
  const [imageUrl, setUrl] = useState();

  const uploadImageToFirebase = async (event) => {
    event.preventDefault();
    const ref = firebaseClient.storage().ref('myFolder/myImage.png');
    const put = await ref.put(image)
    const url = await put.ref.getDownloadURL();
    setUrl(url);
  };

  const changeImage = async (event) => {
    await setImage(event.target.files[0]);
  };

  return (
    <div className="App">
      <h1>{imageUrl}</h1>
      <form method="POST" encType="multipart/form-data" onSubmit={uploadImageToFirebase} >
        <input type="file" className="filetype" onChange={changeImage}  />
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}
export default App;

Burada input içerisinde bir dosya değişikliği olduğunda onu React hooks kullanarak bir state içerisine attık. Daha sonra form submit olduğunda sayfayı yenilemenin önüne geçmek için event.preventDefault() yazdık.

ref ile dosyayı yükleyeceğimiz alanı seçtik.
put ile state içerisindeki dosyamızı storage kısmına yükledik
url ile de bu dosyaya ulaşabileceğimiz linki elde etmiş olduk.
h1 etiketi içerisinde yüklemiş olduğumuz dosyanın linkini ekrana basmış olduk.

Projeyi Github profilime de ekledim isterseniz direkt oradan da ulaşabilirsiniz. React ve Firebase ile ilgili sorularınız varsa bana Linkedin ya da Twitter üzerinden ulaşıp sorabilirsiniz ya da yorumlara yazarsanız elimden geldiğince yardımcı olmaya çalışırım. Nodejs ile ilgili diğer yazılara göz atmak için buraya tıklayabilirisiniz.