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
import { Dropzone } from "react-dropzone-kit";
const App = () => {
const handleDrop = (acceptedFiles, rejections) => {
console.log("Kabul Edilen Dosyalar:", acceptedFiles);
console.log("Reddedilen Dosyalar:", rejections);
};
return (
<Dropzone
multiple={true}
acceptedFormats={["image/png", "image/jpeg"]}
maxFiles={3}
maxSize={1024 * 1024 * 5} // 5 MB
minSize={1024} // 1 KB
onUpload={(acceptedFiles, rejections) => handleDrop(acceptedFiles, rejections)}
>
{({ containerProps, inputProps, handleFileDelete, isDragActive }) => (
<div {...containerProps} className={`dropzone ${isDragActive ? "active" : ""}`}>
<input {...inputProps} />
<p>Dosyaları buraya sürükleyin veya seçmek için tıklayın.</p>
</div>
)}
</Dropzone>
);
};
Ö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:
npm install react-dropzone-kit
-
Dropzone bileşenini React projenize import Edin:
import { 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:
[
{
code: "file-invalid-type",
message: `Geçersiz dosya türü. Sadece şu türler destekleniyor: ${acceptedFormats.join(", ")}.`,
},
{
code: "file-too-large",
message: "Dosya boyutu çok büyük.",
},
{
code: "file-too-small",
message: "Dosya boyutu çok küçük.",
},
{
code: "too-many-files",
message: `Maksimum dosya sayısını aştınız. En fazla ${maxFiles} dosya yükleyebilirsiniz.`,
},
]
- 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.
