{"id":30804,"date":"2025-10-02T08:41:09","date_gmt":"2025-10-02T05:41:09","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30804"},"modified":"2025-10-02T08:41:09","modified_gmt":"2025-10-02T05:41:09","slug":"reactta-react-dropzone-ile-surukle-ve-birak-dosya-yukleme-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactta-react-dropzone-ile-surukle-ve-birak-dosya-yukleme-nasil-yapilir\/","title":{"rendered":"React’ta react-dropzone ile S\u00fcr\u00fckle ve B\u0131rak Dosya Y\u00fckleme Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"

<\/p>\n

React’ta react-dropzone ile S\u00fcr\u00fckle ve B\u0131rak Dosya Y\u00fckleme Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n

React uygulamalar\u0131nda dosya y\u00fckleme, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir \u00f6zelliktir. Geleneksel dosya se\u00e7me diyaloglar\u0131, \u00f6zellikle birden fazla dosya y\u00fcklenmesi gerekti\u011finde veya kullan\u0131c\u0131lar\u0131n dosyalar\u0131 do\u011frudan aray\u00fcz \u00fczerine s\u00fcr\u00fckleyerek i\u015flem yapmak istedi\u011fi durumlarda yetersiz kalabilir. \u0130\u015fte bu noktada “s\u00fcr\u00fckle ve b\u0131rak” (drag and drop) \u00f6zelli\u011fi devreye girer. S\u00fcr\u00fckle ve b\u0131rak, kullan\u0131c\u0131lar\u0131n dosyalar\u0131 taray\u0131c\u0131 penceresi i\u00e7indeki belirli bir alana kolayca ta\u015f\u0131yarak y\u00fcklemesini sa\u011flayan modern ve sezgisel bir yakla\u015f\u0131md\u0131r. Bu makalede, React tabanl\u0131 projelerinizde react-dropzone<\/code> k\u00fct\u00fcphanesini kullanarak nas\u0131l etkili ve kullan\u0131c\u0131 dostu s\u00fcr\u00fckle ve b\u0131rak dosya y\u00fckleme alanlar\u0131 olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

react-dropzone<\/code>, React uygulamalar\u0131nda s\u00fcr\u00fckle ve b\u0131rak dosya y\u00fckleme i\u015flevselli\u011fini implemente etmeyi son derece kolayla\u015ft\u0131ran pop\u00fcler bir k\u00fct\u00fcphanedir. Taray\u0131c\u0131lar\u0131n yerel s\u00fcr\u00fckle ve b\u0131rak API’sinin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak, bize basit ve esnek bir API sunar. Bu sayede, dosya kabul kriterleri belirleme, \u00f6nizlemeler olu\u015fturma, hata y\u00f6netimi ve stil \u00f6zelle\u015ftirmeleri gibi bir\u00e7ok \u00f6zelli\u011fi h\u0131zl\u0131ca entegre edebiliriz. Bu makale boyunca, s\u0131f\u0131rdan bir React projesi olu\u015fturmaktan, react-dropzone<\/code>‘u entegre etmeye, dosya \u00f6nizlemeleri olu\u015fturmaya ve hatta sunucu taraf\u0131na dosya g\u00f6nderme mant\u0131\u011f\u0131n\u0131 anlamaya kadar geni\u015f bir yelpazede bilgi edineceksiniz.<\/p>\n

Giri\u015f: Neden S\u00fcr\u00fckle ve B\u0131rak Dosya Y\u00fckleme?<\/h3>\n

Dosya y\u00fckleme, web uygulamalar\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Profil resimleri, belgeler, videolar veya di\u011fer medya t\u00fcrleri olsun, kullan\u0131c\u0131lar\u0131n dosya g\u00f6ndermesi s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryodur. Geleneksel <\/code> etiketi bu i\u015fi yaparken, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan baz\u0131 s\u0131n\u0131rlamalara sahiptir:<\/p>\n

* Tek Tek Se\u00e7im:<\/strong> \u00c7o\u011fu durumda, kullan\u0131c\u0131lar\u0131n dosya se\u00e7me diyalogunda birden fazla dosya se\u00e7mesi gerekir, ancak bu her zaman sezgisel de\u011fildir.
\n* G\u00f6rsel Geri Bildirim Eksikli\u011fi:<\/strong> Kullan\u0131c\u0131lar bir dosya se\u00e7tikten sonra, dosyan\u0131n ger\u00e7ekten se\u00e7ilip se\u00e7ilmedi\u011fini veya y\u00fckleme alan\u0131na do\u011fru bir \u015fekilde eklenip eklenmedi\u011fini anlamakta zorlanabilirler.
\n* Modern Beklentiler:<\/strong> G\u00fcn\u00fcm\u00fcz kullan\u0131c\u0131lar\u0131, web uygulamalar\u0131ndan ak\u0131c\u0131 ve interaktif deneyimler bekler. S\u00fcr\u00fckle ve b\u0131rak, bu beklentiyi kar\u015f\u0131layan g\u00fc\u00e7l\u00fc bir \u00f6zelliktir.<\/p>\n

S\u00fcr\u00fckle ve b\u0131rak dosya y\u00fckleme, bu sorunlara zarif bir \u00e7\u00f6z\u00fcm sunar. Kullan\u0131c\u0131lar, dosyalar\u0131 do\u011frudan masa\u00fcstlerinden veya dosya y\u00f6neticilerinden taray\u0131c\u0131 penceresindeki belirli bir alana s\u00fcr\u00fckleyip b\u0131rakabilirler. Bu, \u00f6zellikle birden fazla dosya y\u00fcklenmesi gereken durumlarda zaman kazand\u0131r\u0131r ve kullan\u0131m kolayl\u0131\u011f\u0131 sa\u011flar. react-dropzone<\/code> gibi k\u00fct\u00fcphaneler, bu karma\u015f\u0131k i\u015flevselli\u011fi React bile\u015fenlerinize saniyeler i\u00e7inde entegre etmenizi sa\u011flar.<\/p>\n

Temel Kavramlar<\/h3>\n

react-dropzone<\/code>‘u derinlemesine incelemeden \u00f6nce, baz\u0131 temel kavramlar\u0131 anlamak faydal\u0131 olacakt\u0131r.<\/p>\n

HTML’in Yerel S\u00fcr\u00fckle ve B\u0131rak API’si<\/h4>\n

Taray\u0131c\u0131lar, yerle\u015fik bir s\u00fcr\u00fckle ve b\u0131rak API’si sunar. Bu API, \u00e7e\u015fitli olay dinleyicileri arac\u0131l\u0131\u011f\u0131yla \u00e7al\u0131\u015f\u0131r:<\/p>\n

* dragenter<\/code>: S\u00fcr\u00fcklenen bir \u00f6\u011fe, ge\u00e7erli bir b\u0131rakma hedefinin \u00fczerine geldi\u011finde tetiklenir.
\n* dragover<\/code>: S\u00fcr\u00fcklenen bir \u00f6\u011fe, ge\u00e7erli bir b\u0131rakma hedefinin \u00fczerinde hareket ederken s\u00fcrekli olarak tetiklenir. Bu olayda event.preventDefault()<\/code> \u00e7a\u011fr\u0131lmazsa, b\u0131rakma i\u015flemi ger\u00e7ekle\u015fmez.
\n* dragleave<\/code>: S\u00fcr\u00fcklenen bir \u00f6\u011fe, ge\u00e7erli bir b\u0131rakma hedefinden ayr\u0131ld\u0131\u011f\u0131nda tetiklenir.
\n* drop<\/code>: S\u00fcr\u00fcklenen bir \u00f6\u011fe, ge\u00e7erli bir b\u0131rakma hedefinin \u00fczerine b\u0131rak\u0131ld\u0131\u011f\u0131nda tetiklenir. Bu olayda event.preventDefault()<\/code> \u00e7a\u011fr\u0131lmazsa, taray\u0131c\u0131 dosya \u00f6nizlemesini a\u00e7maya \u00e7al\u0131\u015fabilir.<\/p>\n

Bu olaylar\u0131 manuel olarak y\u00f6netmek, \u00f6zellikle dosya y\u00fckleme senaryolar\u0131nda, dosyalar\u0131n veri transferi nesnesinden (DataTransfer object) \u00e7\u0131kar\u0131lmas\u0131 ve i\u015flenmesi gerekti\u011finde olduk\u00e7a karma\u015f\u0131k olabilir. react-dropzone<\/code> tam da bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlar.<\/p>\n

React’ta Durum Y\u00f6netimi<\/h4>\n

React’ta se\u00e7ilen dosyalar\u0131 saklamak ve kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6stermek i\u00e7in bile\u015fen durumunu (useState<\/code> hook’u ile) kullan\u0131r\u0131z. Dosyalar bir dizi halinde saklan\u0131r ve bu dizi, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (\u00f6rne\u011fin, dosya listesi veya \u00f6nizlemeler) g\u00fcncellenmesini tetikler.<\/p>\n

react-dropzone’a Giri\u015f ve Kurulum<\/h3>\n

react-dropzone<\/code>, React’\u0131n hook’lar\u0131n\u0131 kullanarak s\u00fcr\u00fckle ve b\u0131rak i\u015flevselli\u011fini kolayca entegre etmenizi sa\u011flayan hafif bir k\u00fct\u00fcphanedir.<\/p>\n

Kurulum<\/h4>\n

\u0130lk olarak, yeni bir React projesi olu\u015ftural\u0131m (e\u011fer hen\u00fcz bir tane yoksa) ve react-dropzone<\/code>‘u kural\u0131m.<\/p>\n

# Vite ile yeni bir React projesi olu\u015fturma (daha h\u0131zl\u0131)\nnpm create vite my-dropzone-app -- --template react-ts # TypeScript i\u00e7in\n
veya<\/h2>\nnpm create vite my-dropzone-app -- --template react # JavaScript i\u00e7in\n\ncd my-dropzone-app\n\n
react-dropzone k\u00fct\u00fcphanesini kurma<\/h2>\nnpm install react-dropzone\n
veya yarn kullan\u0131yorsan\u0131z<\/h2>\nyarn add react-dropzone<\/code><\/pre>\n
Projemizi ba\u015flatt\u0131ktan sonra, react-dropzone<\/code>‘u kullanmaya haz\u0131r\u0131z.<\/p>\n
Temel Kullan\u0131m: useDropzone Hook’u<\/h4>\n
react-dropzone<\/code>‘un kalbinde useDropzone<\/code> hook’u bulunur. Bu hook, bize s\u00fcr\u00fckle ve b\u0131rak alan\u0131n\u0131 olu\u015fturmak i\u00e7in gerekli olan \u00f6zellikleri ve geri bildirimleri sa\u011flar.<\/p>\n
Bir FileUploader<\/code> bile\u015feni olu\u015ftural\u0131m ve useDropzone<\/code>‘u nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 g\u00f6relim.<\/p>\n
\/\/ src\/components\/FileUploader.jsx\nimport React, { useState, useCallback } from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nfunction FileUploader() {\n  const [files, setFiles] = useState([]); \/\/ Y\u00fcklenen dosyalar\u0131 saklamak i\u00e7in\n\n  \/\/ Dosyalar b\u0131rak\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015facak callback fonksiyonu\n  const onDrop = useCallback(acceptedFiles => {\n    \/\/ Sadece kabul edilen dosyalar\u0131 duruma ekle\n    setFiles(prevFiles => [\n      ...prevFiles,\n      ...acceptedFiles.map(file => Object.assign(file, {\n        preview: URL.createObjectURL(file) \/\/ \u00d6nizleme URL'si olu\u015fturma\n      }))\n    ]);\n  }, []);\n\n  \/\/ useDropzone hook'unu \u00e7a\u011f\u0131r\u0131n\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });\n\n  \/\/ Y\u00fcklenen dosyalar\u0131 listele\n  const fileList = files.map(file => (\n    
  • \n      {file.name} - {file.size} bytes\n      {file.type.startsWith('image\/') && (\n         { URL.revokeObjectURL(file.preview) }} \/\/ Bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nlemek i\u00e7in\n        \/>\n      )}\n    <\/li>\n  ));\n\n  return (\n    
    \n      {\/ Dropzone alan\u0131 <\/em>\/}\n      dropzone ${isDragActive ? 'active' : ''}<\/code>}\n      >\n        \n        {\n          isDragActive ?\n            
    Dosyalar\u0131 buraya b\u0131rak\u0131n...<\/p> :\n            
    Dosyalar\u0131 buraya s\u00fcr\u00fckleyin ve b\u0131rak\u0131n, veya se\u00e7mek i\u00e7in t\u0131klay\u0131n.<\/p>\n        }\n      <\/div>\n\n      {\/ Y\u00fcklenen dosyalar\u0131n listesi <\/em>\/}\n