Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodliblog
No Result
View All Result

React Js Firebase Dosya Yükleme

Enes Can Güneş by Enes Can Güneş
Aralık 25, 2020
in nodejs, react

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.

ShareTweetShareSend
Enes Can Güneş

Enes Can Güneş

Yazılım Mühendisliği öğrencisi. Yazılım ile problem çözmekle uğraşan bir yazılım geliştirici. Javascript - Nodejs - Php

Related Posts

Joi kullanımı
nodejs

Nodejs Joi Kullanımı ve Örnekleri

Herhangi bir uygulama için bir REST API hazırladığınızı düşünün. Hem client hem server tarafında kontrol edilmesi gereken çok fazla parametre...

Ocak 24, 2021
1
nodejs express kullanımı
expressjs

Nodejs Express Kullanımı

Kısaca expressjs nedir ondan bahsedeyim daha sonra adım adım nodejs express kullanımı konumuza geçelim. Expressjs Nodejs tabanlı bir frameworkdür. Hızlı...

Aralık 4, 2020
9
Nodejs terminal uygulaması
nodejs

NodeJs Terminal Uygulaması Nasıl Yapılır?

CLI yani command line interface uygulamasını nodejs ile yapmak çok kolay olmaktadır. Nodejs terminal uygulaması yapımına geçmeden önce kısaca cli...

Temmuz 26, 2020
96
Next Post
javascript var let const değişken tanımlama ve değişken türleri

JavaScript Değişken Tanımlama - var, let, const

Joi kullanımı

Nodejs Joi Kullanımı ve Örnekleri

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önerilenler

Unity Matematik Metotları

Unity Matematik Metotları – En Çok Kullanılanlar

Temmuz 19, 2020
189
Javascriptil ilçe

Javascript Json İl İlçe Seçimi

Ağustos 23, 2020
256
javascript var let const değişken tanımlama ve değişken türleri

JavaScript Değişken Tanımlama – var, let, const

Ocak 2, 2021
29
unity sürükle bırak nasıl yapılır

Unity 3D Sürükle Bırak Nasıl Yapılır?

Ağustos 16, 2020
135

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Kodlib Hakkında

Kodlib Yazılım Hakkında bloglar içerir. Yazılım süreçleri, mühendislik ve bu süreçte yaşanan deneyimleri blog şeklinde sunar.
#EvdeKal
Copyright 2020 @kodlibcom

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Sosyal Medya

No Result
View All Result
  • React Native
  • Php
  • Javascript
  • Unity