HTML5 ile FileReader ( File API )

HTML5 ile yeni gelen özelliklerden birisi de lokaldeki dosyalarla etkileşim içerisine girebilmemiz ve bunu da File API ile yapabilmemiz olsa gerek. File API ile gelen özelliklerden birkaçından bahsetmek istersem; herhangi bir imajın önizlemesini sunucuya göndermeden anında görebilmek, dosya içeriğini ( düzenlenme tarihi, ismi, boyutu … vs ) görebilmek gibi bir çok şeye izin veriyor. Güncel browserın desteği bulunmakla birlikte bu özelliği:

[code lang=”js”]
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert(‘File API destekleniyor.’);
} else {
alert(‘File API desteklenmiyor.’);
}
[/code]

Yukarıdaki kod bloğu yardımıyla kullanıcının browserinin File API destekleyip desteklemediğini öğrenebiliriz.

Form içerisinde Input Kullanımı

Dosya seçimi için form içerisinde standart olarak  <input type=”file” />  kod bloğunu kullanıyoruz. Javascript seçilen dosyaların listesini FileList adı altında dönüyor. Aşağıda da ‘multiple’ yani çoklu dosya seçimi olan bir form örneğini görebilirsiniz:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ byte, son düzenlenme: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz:

See the Pen BLuln by Ibrahim Nergiz (@PhyesiX) on CodePen.

Form içerisinde Sürükle Bırak

Aşağıda da browser desteği ile sunulan drag and drop ( sürükle bırak ) yönetmiyle, form içerisine dosyalarınızı sürükleyerek oluşturduğunuz bir form:

[code lang=”html”]
<div id="drop_zone">Sürükle Bırak</div>
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ bytes, last modified: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = ‘copy’; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById(‘drop_zone’);
dropZone.addEventListener(‘dragover’, handleDragOver, false);
dropZone.addEventListener(‘drop’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz: See the Pen qCJxD by Ibrahim Nergiz (@PhyesiX) on CodePen.

Dosyaları Okumak

En güzel bölüm de burası. Hani anında önizleme özelliği var ya … Formumuzda bulunan input yardımıyla dosyamızıı seçip FileReader yardımıyla objeyi bellek içerisinden okuyabiliyoruz. FileReader komutuyla dosya özelliğini okumak için 4 farklı şekil mevcut:

  • FileReader.readAsBinaryString : Dosyayı binary ile görüntüler
  • FileReader.readAsText : Dosyayı text olarak okur. Text ‘UTF-8’ olarak sunulur.
  • FileReader.readAsDataURL: dataURL’i sunar.
  • FileReader.readAsArrayBuffer: ArrayBuffer olarak sunar.

Bunların yanında onloadstart, onprogress, onload, onabort, onerror ve onloadend gibi seçenekler yardımıyla da dosyamızın durumunu görebiliriz. Durumuna göre de fonksiyonlar tetikleyebiliriz … Aşağıdaki kod bloğunda seçilen imajın: FileReader.readAsDataURL yardımıyla url’ini alıp, img src içerisine yazdıralım ve sonucu aşağıda canlı canlı görelim:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

// Only process image files.
if (!f.type.match(‘image.*’)) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement(‘span’);
span.innerHTML = [‘<img class="thumb" src="’, e.target.result,
‘" title="’, escape(theFile.name), ‘"/>’].join(”);
document.getElementById(‘list’).insertBefore(span, null);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örnek için:

See the Pen tkesc by Ibrahim Nergiz (@PhyesiX) on CodePen.

Font-face Kullanımında Türkçe Karakter Sorunu

Front-end Developer’lar arasında @font-face kullanımını bilmeyen yoktur sanırım. Önceleri sistem fontlarına bağlı olarak çıkan tasarımlar ve front-end development süreçleri, günümüzde yerine hayalimizdeki hemen hemen her şeyi tasarlayacak ve kodlayacak haline geldi. İşin kötü yanı da biz Türk tasarım ve yazılım geliştiricilerinin font seçeneğinin pek bulunmaması. Dünya çapında popüler olan çoğu fontun Türkçe’si bulunabilir düzeydeyken kimilerini bulmaksa işkence haline dönüşüyor. Hadi bulduk diyelim, tasarımda işledik diyelim Front-end tarafında @font-face kullanımında Türkçe karakterlerin bozuk çıkması insanı çileden çıkarıyor.

Tasarımcının kullandığı font, Photoshop’da düzgün, tüm Türkçe karakterleri sorunsuz gözükürken, @font-face‘e çevrildiği anda bu fontlar patlıyordu. İşte tam bu noktada aslında sorunun fontlardan değil de bana bu çıktıyı sunan servis kaynaklı olduğunu düşündüm ki gerçekten de öyleydi. Her ne kadar alternatifleri çoğalmaya başlasa da @font-face generator adı altında “Fontsquirrel” iyi iş çıkarıyor. İşte bu anlatımı da “fontsquirrel” üzerinden yapacağım.

  1. Fontlarımızı seçtikten sonra “expert” modu seçiyoruz.
  2. Font formats bölümünden “svg” yi işaretliyoruz.
  3.  Subsetting bölümünden “Subsetting..” seçiyoruz.
  4. Language bölümünden “Turkish” i seçiyoruz.
  5. Single Characters bölümünden “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Üharflerimizi ekliyoruz

Sonrasında da bilgisayarımıza dosyalarımızı yüklüyoruz. Bu kadar.