Dropzone.js kütüphanesi Örneği

tarihinde gönderilmiş tarafından

Web uygulamalarımızda sıkça beğenerek kullandığımız Dropzone.js kütüphanesinin pratik olarak kendi uygulamalarımızda nasıl kullanabiliriz? Yüklemek istenilen dosyalar gerek boyut gerekse dosya türüne göre nasıl filtre edilebilir konularında aşağıdaki script yapısı size bir fikir verecektir.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropzone.js Örneği</title>
    <!-- Dropzone.js için gerekli CSS dosyası -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css"  />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Dropzone.js için gerekli JavaScript dosyası -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.js" ></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<style>
    .dz-remove
    {
        display:inline-block !important;
        width:1.2em;
        height:1.2em;

        position:absolute;
        top:5px;
        right:5px;
        z-index:1000;

        font-size:1.2em !important;
        line-height:1em;

        text-align:center;
        font-weight:bold;
        border:none !important;
        // border-radius:1.2em;
        //color:gray;
        background-color:white;
        opacity:.5;

    }

    .dz-remove:hover
    {
        text-decoration:none !important;
        opacity:1;
    }
</style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Dropzone.js Örneği</h1>

<!-- Dosya yükleme alanını içeren div -->
<form action="." class="dropzone" id="my-dropzone"></form>


<!-- Dropzone.js konfigürasyonu -->
<script>
    var extList=[".jpg", ".jpeg", ".png", ".pdf", ".doc", ".docx", ".xls", ".xlsx"];

    function kontrol(keyword) {
        for (var i = 0; i < extList.length; i++) {
            if (extList[i] === keyword) {

                return true;
            }
        }
        return false;
    }

    Dropzone.autoDiscover = false; // Dropzone'un otomatik başlatılmasını devre dışı bırak

    // Dropzone.js yapılandırması
    var myDropzone = new Dropzone("#my-dropzone", {
        url: "/dosya-yukle", // Dosyanın yükleneceği URL
        method: "post", // Yükleme işlemi için HTTP methodu
        paramName: "dosya", // Sunucuya gönderilecek dosya parametresi adı
        maxFilesize: 1, // Maksimum dosya boyutu (MB cinsinden)
        acceptedFiles: extList.toString(), // Kabul edilen dosya türleri
        addRemoveLinks: true, // Dosya eklerken kaldırma bağlantılarını göster
        dictDefaultMessage: '<i class="fa fa-cloud-upload fa-5x text-primary" aria-hidden="true"></i><br><span class="text-muted">Lütfen yüklemek istediğiniz dosyaları bu alana sürükleyip bırakın</span>',
        dictRemoveFile: '<i class="fa fa-trash text-danger eksiMargin" aria-hidden="true"></i>', // Kaldırma bağlantısının metni

        dictCancelUpload: "Yüklemeyi İptal Et", // Yüklemeyi iptal etme bağlantısının metni
        dictFileTooBig: "Dosya boyutu çok büyük ({{filesize}}MB). Maksimum dosya boyutu: {{maxFilesize}}MB.", // Maksimum dosya boyutu hatası
        accept: function (file, done) {
            // eğer belirli uzantıda ki dosyaları yüklemek istiyorsak bu fonksiyonu kullanabiliriz, aksi taktirde direk bu bloğu silebilir
            // yada bu bloğu boşaltabiliriz, ben sadece fotoğraf yükletmek istediğim için bu örnekten devam ediyorum.
            var extension = file.name.substr((file.name.lastIndexOf('.') + 1)).toLowerCase();

            let status=Boolean(kontrol('.'+extension));
            if(status) {
                done();
            }else{
                done('.'+extension + ' Not Valid Extension');
            }

        },
        success: function (file, response) {
            // Yükleme başarılı olduğunda yapılacak işlemler
            console.log(response);
        },
        removedfile: function(file) {
            //var name = file.name;
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        },
        

        error: function (file, response) {
            // Yükleme hatası olduğunda yapılacak işlemler
            console.log("Hata:" + response);
            if (!file.accepted) this.removeFile(file);
        }
    });
</script>

<!-- Özel preview-template -->

    <div id="preview-template" style="display:none;" class="dz-preview dz-file-preview">
    <div class="dz-preview dz-file-preview">
        <div class="dz-details">
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
            <img data-dz-thumbnail />

        </div>
        <a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-success-mark"><span>✔</span></div>
        <div class="dz-error-mark"><span>✘</span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
        <div><img src="remove.png" alt="Click me to remove the file." data-dz-remove /></div>

    </div>
    </div>
</body>
</html>

Loading