Dropzone Bileşeni

Bu proje, dosya yükleme işlemleri için kullanılan bir React bileşeni olan Dropzone'u içermektedir. Dropzone bileşeni, dosya yükleme, reddetme, kabul etme ve doğrulama işlemlerini kolayca yönetebilmenize olanak sağlar.

Özellikler

• Dosya Yükleme: Kullanıcılar dosyalarını sürükleyip bırakabilir ya da dosya seçme penceresinden dosya yükleyebilirler.
• Dosya Kabul Etme ve Reddetme: Yüklenen dosyaların kabul edilip reddedilmesi işlemleri yapılır.
• Dosya Doğrulama: Dosya türü, boyutu ve sayısı doğrulanır.
• Çoklu Dosya Desteği: Birden fazla dosya yükleme desteği sağlar.
• Özelleştirilmiş Hata Mesajları: Geçersiz dosya türü, dosya boyutu ve sayısı ile ilgili özelleştirilmiş hata mesajları görüntülenebilir.

Kullanım

1import { Dropzone } from "react-dropzone-kit";
2
3const App = () => {
4  const handleDrop = (acceptedFiles, rejections) => {
5    console.log("Kabul Edilen Dosyalar:", acceptedFiles);
6    console.log("Reddedilen Dosyalar:", rejections);
7  };
8
9  return (
10    <Dropzone
11      multiple={true}
12      acceptedFormats={["image/png", "image/jpeg"]}
13      maxFiles={3}
14      maxSize={1024 * 1024 * 5} // 5 MB
15      minSize={1024} // 1 KB
16      onUpload={(acceptedFiles, rejections) => handleDrop(acceptedFiles, rejections)}
17    >
18      {({ containerProps, inputProps, handleFileDelete, isDragActive }) => (
19        <div {...containerProps} className={`dropzone ${isDragActive ? "active" : ""}`}>
20          <input {...inputProps} />
21          <p>Dosyaları buraya sürükleyin veya seçmek için tıklayın.</p>
22        </div>
23      )}
24    </Dropzone>
25  );
26};
27

Ön Gereksinimler

react@>=17.x.x, react-dom@>=17.x.x

Kurulum

Projenize bu Dropzone bileşenini dahil etmek için aşağıdaki adımları takip edebilirsiniz:

• Projeyi yükleyin:

  1npm install react-dropzone-kit
  2

• Dropzone bileşenini React projenize import Edin:

  1import { Dropzone } from "react-dropzone-kit";

Prop Adları

Prop Adı	Tür	Varsayılan	Açıklama
onUpload	(files: File[], rejections: IFileRejection[]) => void	-	Geçerli ve reddedilen dosyaları döndüren işlev.
onUploadRejected	(rejections: IFileRejection[]) => void	-	Reddedilen dosyaları sağlayan işlev.
onUploadAccepted	(files: File[]) => void	-	Kabul edilen dosyaları sağlayan işlev.
multiple	boolean	true	Birden fazla dosya yüklenmesine izin verir.
acceptedFormats	string[]	["/"]	Kabul edilen dosya türleri.
maxFiles	number	-	Maksimum yüklenebilir dosya sayısı.
maxSize	number	-	Yüklenebilir maksimum dosya boyutu (byte).
minSize	number	-	Yüklenebilir minimum dosya boyutu (byte).
validationMessages	IFileError[]	validationMessages	Özel hata mesajları.
children	({ containerProps, inputProps, handleFileDelete, isDragActive }) => JSX.Element	Zorunlu	Özelleştirilebilir içerik işlevi.
initialFiles	File[]	-	Başlangıç dosyalarını belirler.

children Prop'u Açıklaması

Dropzone bileşeni, içerik düzenini özelleştirmek için children prop'unu kullanmanıza olanak tanır. Bu prop, bileşenin içeriğini özelleştirmek için bir fonksiyon alır ve bu fonksiyon aşağıdaki parametreleri döndürür:

Parametre	Tür	Açıklama
containerProps	ReactHTMLProps<HTMLDivElement>	Dropzone bileşeninin ana konteynerine uygulanması gereken HTML özelliklerini içerir.
inputProps	React.HTMLProps<HTMLInputElement>	Dosya yükleme input elemanına uygulanması gereken HTML özelliklerini içerir.
handleFileDelete	(file:File) => void	Yüklenen dosyayı silmek için kullanılan işlevi temsil eder.
isDragActive	boolean	Dropzone drag durumunu dönderir

Callback İşlevleri

• onUpload: Kullanıcı dosya yüklediğinde kabul edilen ve reddedilen dosyalarla birlikte çağrılır.
• onUploadAccepted: Kabul edilen dosyalarla birlikte çağrılır.
• onUploadRejected: Reddedilen dosyalarla birlikte çağrılır.

Özelleştirme

Bileşen tamamen özelleştirilebilir şekilde tasarlanmıştır. children prop'u, içerik düzenini ve tasarımını istediğiniz gibi yapılandırmanıza olanak tanır.

Kullanıcı Etkileşimleri

• Dosyaları sürükleyip bırakma.
• Dosya seçmek için input tıklama.
• Yüklenen dosyaları listeleme ve silme.

Önemli Notlar

• validator işlevi, dosyaların geçerliliğini kontrol eder ve ilgili hataları döndürür.
• Varsayılan doğrulama mesajlarını özelleştirmek için validationMessages prop'u kullanılabilir.
• varsayılan doğrulama mesajları içeriği:

1[
2		{
3			code: "file-invalid-type",
4			message: `Geçersiz dosya türü. Sadece şu türler destekleniyor: ${acceptedFormats.join(", ")}.`,
5		},
6		{
7			code: "file-too-large",
8			message: "Dosya boyutu çok büyük.",
9		},
10		{
11			code: "file-too-small",
12			message: "Dosya boyutu çok küçük.",
13		},
14		{
15			code: "too-many-files",
16			message: `Maksimum dosya sayısını aştınız. En fazla ${maxFiles} dosya yükleyebilirsiniz.`,
17		},
18	]

• Aynı isimdeki dosyalar filtrelenir, böylece yinelenen dosyalar yüklenmez.

Geliştirme

Bileşen, React'in useState ve useEffect gibi temel hook'ları kullanılarak geliştirilmiştir.

Dosya yükleme mantığı, drag-and-drop işlemlerini ve input üzerinden dosya seçimini destekleyecek şekilde tasarlanmıştır. Validasyon ve hata işleme, kullanıcı deneyimini geliştirmek için dahili olarak işlenir.