express-fileuploaded

Express Fileupload İle Adım Adım Dosya Yükleme

Yorum bırakın / Express JS, Genel / Yazan

Uygulama geliştirirken ihtiyacımız olan şeylerden bir tanesi de dosyalardır. Bazen dosyalara yazmamız, bazen okumamız ve bazende onları bir yerlerde saklamamız gerekebilir. Bu nedenle dosya işlemlerini bilmek bizim için önemlidir.

Bu yazımızda express-fileupload paketini kullanarak bir express js uygulamasında sunucuya web sitemizden nasıl dosya yükleneceğini adım adım göreceğiz. Böylelikle kullanıcının bir web sayfası üzerinden bir dosyayı nasıl yükleyeceğini öğrenmiş olacağız.

express-fileupload Nedir?

express-fileupload paketi, express js uygulamalarında kolayca dosya yüklemek için kullanılmaktadır. Web sayfasında yüklemek istediğimiz dosyayı seçerek sunucuya göndeririz ve express-fileupload ile bu dosyayı yakalayarak sunucu üzerinde istediğimiz yere kayıt edebiliriz.

Mesela bir fotoğtaf galerisi yaptığımızı düşünelim, web sayfamız üzerinden fotoğraflarımızı ekleyerek sunucu üzerinde saklayabiliriz.

Şimdi express js kullanarak bir uygulama yazalım ve bu uygulama ile dosya yükleme işlemini görelim.

express-fileupload Nasıl Kullanılır?

express-fileupload bir orta katman (middleware) fonksiyonudur. Bu neden uygulamaya eklendikten sonra çağrılması gerekir. Uygulamaya eklemek için

const fileupload = require("express-fileupload");

şeklide çağırıyoruz. Sonrasında orta katman çağrılarını yaparken fileupload metodunu da çağrıyoruz.

app.use(fileupload());

Bu kadar. Evet bu iki satır ile bu paketi uygulamamıza eklemiş olduk. Artık request nesnemizin içerisine files edinda yeni bir özellik gelecek ve bu özellik ile de biz form ile gönderdiğimiz dosyayı, ismi ile yakalayacağız. Mesela

<input type="file" name="image" />

şekline bir resim dosyası yüklemek için bir alan oluşturduk ve name özelliğini image olarak ayarlarsak, bu dosyaya requies nesnesi üzerinden

require.files.image

şeklinde ulaşabiliriz. Mesela bir post işlemi sonrasında bu dosyaya ulaşmak istersek.

app.post("/photos", (req, res) => {
    const file = req.files.image;
    ...
});

Şeklinde ulaşabiliriz.

Özellikler

express-fileupload ile bir dosya yüklendiğinde, request.files üzerinden o dosyaya ve özelliklerine ulaşabiliriz. Bu özellikler şunlardır.

  • req.files.foo.name dosya adını barındırır, örneğin “cicek.jpg” gibi.
  • req.files.foo.mv dosyayı istenilen bir yere taşımak için kullanılan bir fonksiyon, callback veya promise döner.
  • req.files.foo.mimetype dosyanın mimetype bilgisini verir.
  • req.files.foo.data dosyanın arabellik bilgisini tutar. useTempFiles true olarak ayarlanırsa boş bir arabellek dönderir.
  • req.files.foo.tempFilePath önbellek için bir dosya yolu belirtir. Bunun için useTempFiles true olarak ayarlanması gerekir.
  • req.files.foo.truncated dosya boyutunun üstlimiti geçip geçmediğini belirten bir boolean değişkendir.
  • req.files.foo.size byte cinsinden dosya boyutu.
  • req.files.foo.md5 MD5 checksum bilgisini tutar.

**NOT: ** Burada dikkat edilmesi gereken, foo yazan yere, form üzerinde dosya için kullandığımız input etiketine verdiğimiz name özelliğinin değeridir. Yani eğer input etiketi için name=”image” dediysek bu durumda dosya ismini req.files.image.name olarak alabiliriz.

Ayar Parametreleri

Express-fileuploadkullanırkan bazı ayarlamalar yapabiliriz. Mesela önbellek için bir klasör belirtmek gibi. Bunu middleware olarak tanımlarken yapmamız gerekiyor.

app.use(fileupload({
    // parametreler bir nesne olarak girilir.
}));

Parametreleri bir nesne olarak giriyoruz. Mesela bir önbellek dosyası kullanacaksak bunu yapmak için useTempFiles ve tempFileDir ayarlarını belirlememiz gerekiyor.

app.use(fileupload({
    useTempFiles: true,
    tempFileDir: '/temp/'
}));

Şeklinde bir ayarlama ile önbellek için temp klasörünü kullanabiliriz. Bunun gibi diğer ayarları paketin web sayfasından bulabilirsiniz.

Şimdi express-fileupload kütüphanesini incelediğimize göre adım adım bir dosya yükleme uygulaması yapalım.

Npm İle Bir Uygulama Başlatalım

İlk olarak projeyi oluşturacağımız klasörü oluşturalım. Sonra terminali açalım ve terminal üzerinden proje klasörümüze gelelim.

npm init -y

Sonrasında yukarıdaki komutu çalıştırarak projemizi başladtalım. Oluşturacağımız uygulama için gerekli ön işlemler yapılacak ve package.json dosyası oluşturulacaktır. Uygulama çatımız oluşturulduğuna göre artık ikinci adıma geçebiliriz.

Gerekli Paketleri Kuralım

Yine komut satırından

npm i express

komutunu çalıştırarak express js paketini uygulamamıza ekleyelim. Express paketini kurduktan sonra sırada express-fileupload paketini uygulamamıza ekleylim.

npm i express-fileupload

Bu iki paketi ekledikten sonra uygulamamızı oluşturmaya başlayabiliriz.

Uygulamamızı Geliştirmeye Başalayalım

Gerekli paketleri kurduğumuza göre artık uygulamamızı yazmaya başlayabiliriz. Uygulamamızda bir form sayfamız, formu gönderildiğinde form bilgilerini alacağımız ve dosyamızı istediğimiz yere kayıt edeceğimiz bir karşılama sayfamız olacak.

İlk olarak proje klasörümüz içerisinde app.js dosyasını oluşturalım ve içeriğini aşağıdaki gibi dolduralım.

const express = require("express");
const fileupload = require("express-fileupload");

const app = express();
const port = 5000;

app.use(fileupload());

app.listen(port, () => console.log("Uygulama başlatıldı."));

Sunucumuzu oluşturduk fakat herhangi bir endpoint vermedik. Şimdi form için bir sayfa oluşturalım. Sayfa oluşturmak için üç adet değişken hazırlıyoruz. pageHeader html sayfanın üst bölümü, form formun bulunduğu sayfa ve pageFooter html sayfanın alt bölümü. Bunları kullanarak çıktının bir html sayfası olmasını temin edeceğiz.

const pageHeader = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
`;

const pageFooter = `
    </div>
</body>
</html>
`;

const form = `
        <h2>Dosya Yükleme</h2>
        <hr />
        <form action="/upload" method="POST" encType="multipart/form-data">
            <label for="image">Resim</label>
            <input type="file" name="image" id="image" />
            <button type="submit">Gönder</button>
        </form>
`;

Sayfa bölümlerini oluşturduğumuza göre ilk olarak

app.get("/upload", (req, res) => {
    res.send(pageHeader + form + pageFooter);
});

şeklinde form sayfası için bir end point ekledik. Bu şekilde http://localhost:5000/upload sayfası tarayıcıdan çağrıldığında form sayfası ekrana gelecektir.

Yine aynı endpointte post metodu için bir karşılama yapıyoruz. Böylece form gönderildiğinde onu yakalayabileceğiz. Bu böümde sırası ile

  • Bir dosya gönderilmiş mi kontorl ediyoruz. if (!req.files || Object.keys(req.files).length === 0) Eğer bir dosya gelmemiş veya dosya boyutu 0 byte ise dosya gönderilmedi mesajı gönderiyoruz.
  • Sonra const imageFile = req.files.image; ve const uploadPath = __dirname + '/photos/' + imageFile.name; şeklinde dosya ve dosyanın yükleneceği yol için birer değişken oluşturuyoruz. Burada __dirname o an dosyanın çalıştığı dizini belirtir.
  • Şimdi req.files içerisinde bulunan dosya için oluşturulmuş olan nesnenin mv metodunu kullanarak dosyamızı istediğimiz yere taşıyalım. Bu mettod dosyanın yükleneceği yerin yolunu ve bir de callback fonksiyonu parametre olarak alır. imageFile.mv(uploadPath, callback)
  • Şimdi callback fonskiyonunun içini dolduralım. callback fonksiyonuna mv fonksiyonu eğer oluştuysa hata bilgisini gönderir. Biz bunu err değişkeni ile yakalıyoruz. Sonra eğer bir hata oluştu ise hata mesajını geri dönderiyoruz return res.status(500).send(pageHeader + err + pageFooter);. Ama işlemde bir sorun yoksa işlemin başarı ile oluştuğunu belirten bir mesaj gönderiyoruz. res.status(200).send(pageHeader + "Dosya başarı ile yüklendi." + pageFooter);

Dikkat ettiyseniz mesaj bilgilerini daha önce oluşturduğumuz pageHeader ve pageFooter içerisine giriyoruz. Böylece html belgesi olarak tarayıcıya göndermiş oluyoruz. Bu bize kullanımda kolaylık sağlıyor.

Express JS İle Dosya Yükleme İçin Tüm Kodlar

Şimdi tüm kodları yazarak yazımıza devam edelim.

const express = require("express");
const fileupload = require("express-fileupload");

const app = express();
const port = 5000;

const pageHeader = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
`;

const pageFooter = `
    </div>
</body>
</html>
`;

const form = `
        <h2>Dosya Yükleme</h2>
        <hr />
        <form action="/upload" method="POST" encType="multipart/form-data">
            <label for="image">Resim</label>
            <input type="file" name="image" id="image" />
            <button type="submit">Gönder</button>
        </form>
`;

app.use(fileupload());

app.get("/upload", (req, res) => {
  // Form sayfasını ekrana bastır
  res.status(200).send(pageHeader + form + pageFooter);
});

app.post("/upload", (req, res) => {
  // Dosya var mı? Eğer varsa boyutu 0 byte mı?
  // Dosya yoksa veya 0 byte ise hata mesajı bildir.
  if (!req.files || Object.keys(req.files).length === 0) {
    return res
      .status(400)
      .send(pageHeader + "Herhangi bir dosya yüklenmedi." + pageFooter);
  }

  const imageFile = req.files.image;
  // Sunucunun kök dizininde, photos
  // adında bir klasör olduğunu varsayıyoruz.
  const uploadPath = __dirname + "/photos/" + imageFile.name;

  // mv metodu ile dosyayı istediğimiz yere taşıyalım
  imageFile.mv(uploadPath, function (err) {
    // Herhangi bir hata varsa hata mesajını yazdır.
    if (err) return res.status(500).send(pageHeader + err + pageFooter);

    // Dosya başarı ile yüklendi
    res.send(pageHeader + "Dosya başarı ile yüklendi." + pageFooter);
  });
});

app.get("*", (req, res) => {
  res.status(404).send(pageHeader + "Aradığınız sayfa bulunamadı" + pageFooter);
});

app.listen(port, () => console.log("Uygulama başlatıldı."));

NOT : Uygulamamızda sadece bir sayfa olduğu için, /upload, diğer tüm isteklere sayfa bulunamadı mesajı vermek için

app.get("*", (req, res) => {
  res.status(404).send(pageHeader + "Aradığınız sayfa bulunamadı!" + pageFooter);
});

routunu kullandık.

Uygulamayı Çalıştırma

Uygulamamızı ayağa kaldırmak için komut satırından

node app

komutunu çalıştırmamız yeterlidir. Uygulama hatasız bir şekilde çalıştıysa http://localhost:5000/upload adresinden dosya yüklemeyi başlatabilirsiniz.

NOT Dosya yüklemenin başarılı bir şekilde yapılabilmesi için sunucunun kök dizininde photos klasörünü oluşturmayı unutmayın.

Github

Uygulamamız ile ilgili kodları Github deposundan indirebilirsiniz.

Sonuç

Express JS ile farklı yöntemler ile dosya yükleme işlemleri yapılabilir. Bunun için biz express-fileupload paketini kullandık. Bu paket ile istediğimiz dosyaları tarayıcı üzerinden sunucumuza kolay bir şekilde gönderebiliriz.

Dosya işlemleri ile ilgili takıldığınız konuları yorumlar üzerinden bize sorabilirsiniz.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir