{"id":31285,"date":"2025-10-08T07:40:56","date_gmt":"2025-10-08T04:40:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31285"},"modified":"2025-10-08T07:40:56","modified_gmt":"2025-10-08T04:40:56","slug":"vue-js-ile-basit-ozel-dosya-secici-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-basit-ozel-dosya-secici-olusturma\/","title":{"rendered":"Vue.js ile Basit \u00d6zel Dosya Se\u00e7ici Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Vue.js ile Basit \u00d6zel Dosya Se\u00e7ici Olu\u015fturma<\/h2>\n

Giri\u015f: Neden \u00d6zel Bir Dosya Se\u00e7iciye \u0130htiya\u00e7 Duyar\u0131z?<\/h3>\n
Web uygulamalar\u0131nda kullan\u0131c\u0131lar\u0131n dosya y\u00fcklemesi, foto\u011fraf eklemesi veya belge g\u00f6ndermesi olduk\u00e7a yayg\u0131n bir gereksinimdir. Bu t\u00fcr etkile\u015fimler i\u00e7in taray\u0131c\u0131lar bize yerle\u015fik bir input type=\"file\"<\/code> \u00f6\u011fesi sunar. Ancak, bu yerel dosya se\u00e7icinin g\u00f6r\u00fcn\u00fcm\u00fc ve hissi, taray\u0131c\u0131dan taray\u0131c\u0131ya farkl\u0131l\u0131k g\u00f6sterir ve genellikle uygulama tasar\u0131m\u0131m\u0131zla uyumlu de\u011fildir. Varsay\u0131lan stilini de\u011fi\u015ftirmek olduk\u00e7a zordur ve \u00e7o\u011fu zaman s\u0131n\u0131rl\u0131 kal\u0131r\u0131z. Kullan\u0131c\u0131 deneyimi (UX) a\u00e7\u0131s\u0131ndan da, sadece “Dosya Se\u00e7” yazan bir d\u00fc\u011fme yerine, daha interaktif, g\u00f6rsel olarak \u00e7ekici ve bilgilendirici bir se\u00e7ici sunmak isteyebiliriz. \u00d6rne\u011fin, se\u00e7ilen dosyalar\u0131n adlar\u0131n\u0131, boyutlar\u0131n\u0131 g\u00f6stermek, k\u00fc\u00e7\u00fck resim \u00f6nizlemeleri sunmak veya s\u00fcr\u00fckle-b\u0131rak (drag-and-drop) i\u015flevselli\u011fi eklemek gibi \u00f6zellikler, standart dosya se\u00e7ici ile do\u011frudan m\u00fcmk\u00fcn de\u011fildir.<\/p>\n
\u0130\u015fte tam da bu noktada, Vue.js gibi modern bir JavaScript \u00e7er\u00e7evesi devreye girer. Vue.js’in reaktif do\u011fas\u0131, bile\u015fen tabanl\u0131 yap\u0131s\u0131 ve esnek DOM manip\u00fclasyon yetenekleri, \u00f6zel ve tamamen kontrol edilebilir bir dosya se\u00e7ici bile\u015feni olu\u015fturmak i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r. Bu makalede, Vue.js kullanarak, sadece temel i\u015flevselli\u011fi sa\u011flamakla kalmay\u0131p ayn\u0131 zamanda tamamen \u00f6zelle\u015ftirilebilir ve kullan\u0131c\u0131 dostu bir dosya se\u00e7ici bile\u015fenini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz. Native dosya giri\u015finin s\u0131n\u0131rlamalar\u0131ndan ba\u015flayarak, Vue.js’in temel \u00f6zelliklerini kullanarak nas\u0131l bir \u00e7\u00f6z\u00fcm geli\u015ftirece\u011fimizi, dosya se\u00e7imi, \u00f6nizleme, do\u011frulama ve hatta s\u00fcr\u00fckle-b\u0131rak i\u015flevselli\u011fini nas\u0131l entegre edece\u011fimizi detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Amac\u0131m\u0131z, uygulaman\u0131z\u0131n esteti\u011fi ve kullan\u0131c\u0131 deneyimiyle kusursuz bir \u015fekilde b\u00fct\u00fcnle\u015fen, basit ama g\u00fc\u00e7l\u00fc bir dosya se\u00e7ici olu\u015fturmakt\u0131r.<\/p>\n

Yerel input type=\"file\"<\/code> \u00d6\u011fesinin S\u0131n\u0131rlamalar\u0131<\/h3>\nWeb geli\u015ftiricileri olarak, form elemanlar\u0131n\u0131 \u00f6zelle\u015ftirme konusunda s\u0131k s\u0131k zorluklarla kar\u015f\u0131la\u015f\u0131r\u0131z. input type=\"file\"<\/code> da bu elemanlardan biridir. Temel i\u015flevselli\u011fi sa\u011flamas\u0131na ra\u011fmen, sundu\u011fu k\u0131s\u0131tlamalar nedeniyle \u00e7o\u011fu zaman alternatif \u00e7\u00f6z\u00fcmlere y\u00f6neliriz.<\/p>\n Varsay\u0131lan G\u00f6r\u00fcn\u00fcm ve Stil Uyumsuzlu\u011fu<\/h4>\ninput type=\"file\"<\/code> \u00f6\u011fesinin en belirgin s\u0131n\u0131rlamas\u0131, taray\u0131c\u0131lar aras\u0131 tutars\u0131z ve genellikle estetik olmayan varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fcd\u00fcr. Her taray\u0131c\u0131, bu \u00f6\u011feyi kendi i\u015fletim sistemi veya UI y\u00f6nergelerine g\u00f6re render eder. Bu durum, web uygulaman\u0131z\u0131n genel tasar\u0131m diline uymayan, yabanc\u0131 duran bir elemanla sonu\u00e7lanabilir. CSS ile bu \u00f6\u011feyi stilize etmek de olduk\u00e7a k\u0131s\u0131tl\u0131d\u0131r. Genellikle sadece font, renk gibi temel \u00f6zellikler \u00fczerinde kontrol\u00fcm\u00fcz olurken, d\u00fc\u011fmenin \u015feklini, boyutunu, ikonunu veya i\u00e7erisindeki metni tamamen de\u011fi\u015ftirmek neredeyse imkans\u0131zd\u0131r. Arka plan rengi veya kenarl\u0131k gibi \u00f6zellikler \u00fczerinde yap\u0131lan de\u011fi\u015fiklikler bile \u00e7o\u011fu zaman beklendi\u011fi gibi \u00e7al\u0131\u015fmaz veya t\u00fcm taray\u0131c\u0131larda tutarl\u0131 bir sonu\u00e7 vermez. Bu durum, markan\u0131z\u0131n kimli\u011fini yans\u0131tan veya belirli bir kullan\u0131c\u0131 deneyimi ak\u0131\u015f\u0131na sahip uygulamalar i\u00e7in b\u00fcy\u00fck bir dezavantajd\u0131r.<\/p>\n S\u0131n\u0131rl\u0131 Kullan\u0131c\u0131 Deneyimi<\/h4>\nVarsay\u0131lan dosya se\u00e7ici, kullan\u0131c\u0131lara se\u00e7ilen dosyalar hakk\u0131nda \u00e7ok az g\u00f6rsel geri bildirim sunar. Bir dosya se\u00e7ildi\u011finde, genellikle sadece d\u00fc\u011fmenin yan\u0131nda k\u00fc\u00e7\u00fck bir metin (\u00f6rne\u011fin, “1 dosya se\u00e7ildi” veya dosyan\u0131n ad\u0131) g\u00f6r\u00fcn\u00fcr. Ancak, birden fazla dosya se\u00e7ildi\u011finde, her bir dosyan\u0131n ad\u0131n\u0131, boyutunu veya bir \u00f6nizlemesini g\u00f6rmek gibi geli\u015fmi\u015f \u00f6zellikler yerle\u015fik olarak mevcut de\u011fildir. Kullan\u0131c\u0131lar\u0131n se\u00e7tikleri dosyalar\u0131 kolayca g\u00f6zden ge\u00e7irebilmesi, yanl\u0131\u015fl\u0131kla se\u00e7ilen bir dosyay\u0131 kald\u0131rabilmesi veya dosya t\u00fcr\u00fc\/boyutu gibi k\u0131s\u0131tlamalar hakk\u0131nda an\u0131nda geri bildirim alabilmesi, modern web uygulamalar\u0131n\u0131n beklenen \u00f6zellikleridir. Yerel dosya se\u00e7ici bu t\u00fcr interaktif \u00f6zelliklerden yoksundur.<\/p>\n Programatik Kontrol Zorluklar\u0131<\/h4>\ninput type=\"file\"<\/code> \u00f6\u011fesini JavaScript ile programatik olarak tetiklemek m\u00fcmk\u00fcnd\u00fcr (\u00f6rne\u011fin, gizli bir input’a t\u0131klayarak), ancak se\u00e7ilen dosyalar\u0131 i\u015flemek i\u00e7in genellikle change<\/code> olay\u0131na g\u00fcvenmek zorunday\u0131z. Dosya se\u00e7imi tamamland\u0131ktan sonra event.target.files<\/code> \u00fczerinden FileList<\/code> objesine eri\u015firiz. Bu obje, File<\/code> objelerini i\u00e7erir ve her bir File<\/code> objesi dosya ad\u0131, boyutu, t\u00fcr\u00fc gibi bilgileri bar\u0131nd\u0131r\u0131r. Ancak, bu bilgileri bir UI’da g\u00f6stermek veya \u00f6zel do\u011frulamalar yapmak tamamen geli\u015ftiricinin sorumlulu\u011fundad\u0131r. Ayr\u0131ca, s\u00fcr\u00fckle-b\u0131rak gibi geli\u015fmi\u015f etkile\u015fimler i\u00e7in ayr\u0131 bir kodlama gerektirir ve yerle\u015fik olarak sunulmaz. Bu s\u0131n\u0131rlamalar, daha esnek ve kontrol edilebilir bir dosya se\u00e7ici bile\u015feni olu\u015fturma ihtiyac\u0131n\u0131 do\u011furur.<\/p>\n Vue.js ile Temel Kavramlar<\/h3>\n\u00d6zel bir dosya se\u00e7ici bile\u015feni olu\u015ftururken, Vue.js’in baz\u0131 temel \u00f6zelliklerinden yararlanaca\u011f\u0131z. Bu \u00f6zellikler, bile\u015fenimizin reaktif, y\u00f6netilebilir ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n Vue Bile\u015fenleri (Single File Components – SFC)<\/h4>\nVue.js, uygulamalar\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rma felsefesini benimser. Tek Dosya Bile\u015fenleri (SFC’ler), .vue<\/code> uzant\u0131l\u0131 dosyalar olarak gelir ve bir bile\u015fenin \u015fablonunu (