Fetch kullanarak bir form verisini post ettirmek ve file upload yaptırmak için Content-Type yazmanıza gerek yoktur. Eğer post ettirmek istediğiniz veri sadece text tabanlı ise (yani içinde dosya yoksa) o zaman Content-Type belirtmeniz mümkündür. Ancak file upload işlemlerinde Content-Type belirtilmemektedir. Çünkü bu başlık içerisine tarayıcı tarafından boundary eklenmektedir.
multipart/form-data işlemlerinde tarayıcınızın konsolunu incelediğinizde, gönderdiğiniz request içerisinde otomatik eklenmiş bir boundary göreceksiniz. Bunu daha iyi anlamak için tarayıcınızın geliştirici araçlarında form verinizi incelemeniz faydalı olacaktır.
Genellikle form verisi için kullanılan Content-Type değeri multipart/form-data olarak bilinir. Tarayıcınız file upload işlemlerinde request gönderdiğinde içeriğine otomatik olarak şöyle bir veri ekler:
multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIMBu ifade tarayıcı tarafından otomatik oluşturulan içerik başlığıdır. boundary, form verisindeki alanları birbirinden ayırmaya yarayan özel bir işaretleyicidir. Örneğin aynı formda hem bir input[type=text] hem de input[type=file] varsa, tarayıcı bunları boundary sayesinde ayırt eder. Boundary her request için farklı ve rastgele üretilir. Dolayısıyla bu değeri sizin elle yazmanıza gerek yok.
File upload işleminde fetch kısmında Content-Type alanında boundary belirtmediğinizde 500 hatası alabilirsiniz. Bu yüzden Content-Type belirtmemekteyiz çünkü tarayıcınız bunu otomatik olarak ekliyor.
Göndermeniz gereken veri örneği:
async function upload() {
const files = document.querySelector('[name=file]').files;
let form = new FormData();
form.append("file", files[0]);
await fetch('/dosya-yukle', { method: "POST", body: form });
}Fetch API ile dosya yüklerken Content-Type başlığını elle yazarsanız, tarayıcının eklemesi gereken boundary değeri eksik kalır. Boundary eksik olduğunda sunucu, gelen isteği parçalara ayıramaz ve genellikle 500 Internal Server Error hatası döner. Bu yüzden en doğru yöntem, tarayıcıya güvenmek ve Content-Type değerini onun otomatik olarak belirlemesine izin vermektir.
multipart/form-data, özellikle dosya yüklemeleri için kullanılan bir içerik tipidir. Normal application/x-www-form-urlencoded tipinde veriler yalnızca düz metin şeklinde iletilirken, multipart/form-data sayesinde hem metin hem de binary dosyalar aynı anda gönderilebilir. Bu formatta her bir form alanı ayrı bir parça olarak işlenir ve bu parçalar araya eklenen boundary ile ayrılır. Böylece sunucu hem yazı alanlarını hem de dosya içeriklerini doğru şekilde ayırabilir.
Elbette çoğunlukla fetch tercih edilse de farklı yöntemler de kullanılabilir. XMLHttpRequest (XHR), jQuery $.ajax ve Axios da tercih edilebilir. Bu alternatifler aynı işi yapar ancak fetch modern JavaScript’in sunduğu basitlik ve async/await desteği sayesinde daha okunabilir ve tercih edilesi bir çözüm.
Yorum bırakın