Merhabalar, bu makalemizde JavaScript ile dosya işlemlerinde File, FileReaderve FileReaderSync API'lerini inceleyeceğiz.

Hazırsak başlayalım; 

Önkoşullar

Bu makalemizde aşağıdakilere ihtiyacımız olacak:

  • JavaScript Methodları , EventListener ve Promisesyararlı olacaktır.
  • Tabiki bir kod editörü :) 
  • Modern bir Web tarayıcısı destekleri olduğunu File, FileReaderve FileReaderSync.

Dosya Yükleme

İlk olarak, bir kullanıcıdan bir dosya almak için bir <input> eleman kullanmamız gerekir :

<input id="input" type="file" />

Bu kod, kullanıcıların makinelerinden dosya yüklemelerine izin verir.

HTML kullanarak dosya yüklemenin bir örneğini burada bulabilirsiniz;

<form enctype="multipart/form-data" action="/upload" method="post">
  <input id="input" type="file" />
</form>

Yüklemelerin işlenmesinde daha fazla kontrol <form>için, dosyaları göndermek için HTML yerine JavaScript kullanabilirsiniz :

let file = document.getElementById('input').files[0];
let formData = new FormData();

formData.append('file', file);
fetch('/upload/image', {method: "POST", body: formData});

File Blob Özellikleri Kullanma

Modern tarayıcılarda, bu işlevler, dosyayı okumamıza izin verir.

  • .text() dosyayı bir akışa ve ardından bir dizeye dönüştürür.
  • .stream()döndürür a ReadableStream.
  • .arrayBuffer()ArrayBufferblob verilerini ikili biçimde içeren bir döndürür .
  • .slice() dosyanın dilimlerini almanızı sağlar.

Şimdi bir örnek yapalım;

myFile.txt adında biraz metin içeren yeni bir dosya oluşturun ben içerisine aşağıdaki metni yazdım :

Example file content.

Ardından yeni bir file-blob-example.html adında dosya oluşturun:

<!DOCTYPE html>
<html>
<body>
  <input type="file" id="input" />

  <script>
    const streamToText = async (blob) => {
      const readableStream = await blob.getReader();
      const chunk = await readableStream.read();

      return new TextDecoder('utf-8').decode(chunk.value);
    };

    const bufferToText = (buffer) => {
      const bufferByteLength = buffer.byteLength;
      const bufferUint8Array = new Uint8Array(buffer, 0, bufferByteLength);

      return new TextDecoder().decode(bufferUint8Array);
    };

    document.getElementById('input').addEventListener('change', function(e) {
      let file = document.getElementById('input').files[0];

      (async () => {
        const fileContent = await file.text();

        console.log('.text()', fileContent);

        const fileContentStream = await file.stream();

        console.log('.stream()', await streamToText(fileContentStream));

        const buffer = await file.arrayBuffer();

        console.log('.buffer()', bufferToText(buffer));

        const fileSliceBlob = file.slice(0, file.length);
        const fileSliceBlobStream = await fileSliceBlob.stream();

        console.log('.slice() and .stream()', await streamToText(fileSliceBlobStream));
      })();
    });
  </script>
</body>
</html>

file-blob-example.html dosyasını Web tarayıcınızda açın ve myFile.txtdosyayı seçerek yüklediğinizde Web geliştirici konsolunda, dosya içeriği ile çözümlendiğini göreceksiniz .text(), .stream(), .buffer(), ve .slice().

FileReader ile Lifecycle and Methods Uygulama

FileReader'a eklenmiş 6 ana olay vardır:

  • loadstart: Bir dosya yüklemeye başladığımızda tetiklenir.
  • progress: Blob bellekte okunduğunda tetiklenir.
  • abort: Aradığımızda ateşler.
  • error: Bir hata oluştuğunda tetiklenir.
  • load: Okuma başarılı olduğunda ateşlenir.
  • loadend: Dosya yüklendiğinde ve hata veya iptal çağrılmadığında veya yükleme yeni bir okuma başlattığında tetiklenir.

Dosyamızı yüklemeye başlamak için dört yöntemimiz var:

  • readAsArrayBuffer(file): Dosyayı veya blobu bir dizi tamponu olarak okur. Kullanım durumlarından biri, büyük dosyaları bir servis çalışanına göndermektir.
  • readAsBinaryString(file): Dosyayı ikili dizge olarak okur
  • readAsText(file, format): Dosyayı USVString (neredeyse bir dizge gibi) olarak okur ve isteğe bağlı bir biçim belirtebilirsiniz.
  • readAsDataURL(file): Bu, dosyanın içeriğine erişebileceğiniz, Base64 kodlu ve sunucunuza gönderilmeye hazır bir URL döndürür.

Şimdi  readAsDataURL(): kullanan filereader-example.html dosyası oluşturalım ve içerisine aşağıdaki kodu ekleyelim ; 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #000;
      color: white;
    }

    #progress-bar {
      margin-top: 1em;
      width: 100vw;
      height: 1em;
      background: red;
      transition: 0.3s;
    }
  </style>
</head>
<body>
  <input type="file" id="input" />
  <progress value="0" max="100" id="progress-bar"></progress>
  <div id="status"></div>
  <script>
    const changeStatus = (status) => {
      document.getElementById('status').innerHTML = status;
    }

    const setProgress = (e) => {
      const fr = e.target;
      const loadingPercentage = 100 * e.loaded / e.total;

      document.getElementById('progress-bar').value = loadingPercentage;
    }

    const loaded = (e) => {
      const fr = e.target;
      var result = fr.result;

      changeStatus('Finished Loading!');
      console.log('Result:', result);
    }

    const errorHandler = (e) => {
      changeStatus('Error: ' + e.target.error.name);
    }

    const processFile = (file) => {
      const fr = new FileReader();

      fr.readAsDataURL(file);
      fr.addEventListener('loadstart', changeStatus('Start Loading'));
      fr.addEventListener('load', changeStatus('Loaded'));
      fr.addEventListener('loadend', loaded);
      fr.addEventListener('progress', setProgress);
      fr.addEventListener('error', errorHandler);
      fr.addEventListener('abort', changeStatus('Interrupted'));
    }

    document.getElementById('input').addEventListener('change', (e) => {
      const file = document.getElementById('input').files[0];

      if (file) {
        processFile(file);
      }
    });
  </script>
</body>
</html>

filereader-example.html dosyasını Web tarayıcınızda açın ve myFile.txt dosyasını yükleyin. Dosya işlenirken ekranda bir ilerleme çubuğu görünecektir. Başarıyla yüklerse, bu gösterecektir 'Start Loading', 'Loaded've 'Finished Loading'.

FileReaderSync Kullanımı : 

FileReader dosyaları okurken ana iş parçacığını engellemek istemediğimiz için zaman uyumsuz bir API'dir. Örneğin, tarayıcı çok büyük bir dosyayı okumaya çalışırken kullanıcı arayüzümüzün çalışmayı durdurmasını istemiyoruz. Ancak, bir senkron sürümü var FileReader denilen FileReaderSync. Yalnızca FileReaderSyncWeb Workers'da kullanabiliriz . Web çalışanlarının kendi iş parçacığı vardır, böylece ana iş parçacığını engellemezler. FileReaderSyncaynı yöntemleri kullanır FileReader:

  • FileReaderSync.readAsArrayBuffer()
  • FileReaderSync.readAsBinaryString()
  • FileReaderSync.readAsText()
  • FileReaderSync.readAsDataURL()

Eşzamanlı olduğu için olay işleyicisi yoktur.

Sonuç

Bu makalede,  File, FileReaderve FileReaderSync API'lerini görmüş olduk.

Projelerinizin kullanıcıları için geçerli olduklarından emin olmak için bu özelliklere yönelik tarayıcı desteğini kontrol etmeye zaman ayırın.

İyi kodlamalar...