Aşağıdaki senaryoda önce resimleri seçersiniz, dropbox bu esnada yüklemeyi başlatmaz. Sonra aşağıdaki önizleme alanından dilediğiniz resmi en sola sürükleyerek ana resim olarak seçersiniz. Ardından yüklemeyi başlat butonuna basarak yükleme başlatılır. Backend tarafında da ilk gelen fotoğrafı ana resim olacak şekilde ayarlarsınız.


HTML:

<form action="upload.php" class="dropzone" id="myDropzone"></form>
    <div id="preview-container"></div>
    <button id="upload-button" style="display: none;">Yüklemeyi Başlat</button>

Jquery:

Dropzone.autoDiscover = false;
        
        $(function() {
            var myDropzone = new Dropzone("#myDropzone", {
                url: "upload.php",
                autoProcessQueue: false,
                addRemoveLinks: true,
                maxFiles: 5,
                acceptedFiles: "image/*",
            });

            var previewContainer = $("#preview-container");

            myDropzone.on("addedfile", function(file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var previewItem = $("<div class='preview-item' data-file-id='" + file.upload.uuid + "'><img src='" + e.target.result + "'></div>");
                    previewContainer.append(previewItem);
                    updateMainImage();
                }
                reader.readAsDataURL(file);

                if (myDropzone.files.length > 0) {
                    $("#upload-button").show();
                }
            });

            myDropzone.on("removedfile", function(file) {
                previewContainer.find("[data-file-id='" + file.upload.uuid + "']").remove();
                updateMainImage();

                if (myDropzone.files.length === 0) {
                    $("#upload-button").hide();
                }
            });

            previewContainer.sortable({
                update: function(event, ui) {
                    updateMainImage();
                }
            });

            function updateMainImage() {
                previewContainer.children().removeClass("main-image");
                previewContainer.children().first().addClass("main-image");
            }

            $("#upload-button").click(function() {
                myDropzone.files.forEach(function(file, index) {
                    file.index = index;
                });
                myDropzone.processQueue();
            });

            myDropzone.on("sending", function(file, xhr, formData) {
                formData.append("index", file.index);
                if (file.index === 0) {
                    formData.append("mainImage", "true");
                }
            });
        });

PHP ile basit bir backend örneği. Bu örnekte ana resim dizinin en başına ekleniyor.

// Hata raporlama
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Yükleme dizini
$uploadDir = 'uploads/';
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

$filePaths = [];
$mainImageIndex = isset($_POST['mainImageIndex']) ? intval($_POST['mainImageIndex']) : 0;

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['files'])) {
    $files = $_FILES['files'];
    
    // Dosyaları yükle ve dosya yollarını sakla
    for ($i = 0; $i < count($files['name']); $i++) {
        $fileName = uniqid() . '_' . basename($files['name'][$i]);
        $targetFilePath = $uploadDir . $fileName;
        
        if (move_uploaded_file($files['tmp_name'][$i], $targetFilePath)) {
            $filePaths[] = $targetFilePath;
        }
    }

    // Ana resmi dizinin başına taşı
    if ($mainImageIndex > 0 && $mainImageIndex < count($filePaths)) {
        $mainImage = $filePaths[$mainImageIndex];
        unset($filePaths[$mainImageIndex]);
        array_unshift($filePaths, $mainImage);
    }
}

// Sadece dosya yollarını içeren diziyi JSON olarak döndür
header('Content-Type: application/json');
echo json_encode($filePaths);

// JSON olarak yanıt döndür
header('Content-Type: application/json');
echo json_encode($response);