Dropzone Resim Yükleme Ana Resim Seçme

MErhaba,

Sitem için ilan girişi yapacak bir sayfam var bu sayfada dropzone ile resim seçiyorum ve resimleri post ile birlikte gönderiyorum. Sorum şu 5 Resimden Birisi Anaresim olacak bunu belirlemek için Dropzonede yükleme işlemi bitmeden bir işlem yapabilirmiyim?

Yada Resimleri Direk olarak Bir Klasöre Yükleyip Oradanmı işlem yapmam Mantıklı olur? Bu Resimleri Sessiona alıp en sonra posttamı yüklemeliyim Kafam çorba oldu

1. yol olarak aklıma gelen

İlan oluşturma sayfayında bir tane değişkende oluştur, $gecici_id = time(); olabilir, post aşamasında değil dropzonede upload işleminde, anlık olarak resimleri yükle ve bu oluşturduğun değişkenle beraber kaydet resimler kısmı için bir tane de checkbox yada radio tanımla kapak fotoğrafı diye, bunları tabi javascript ile yapman daha sağlıklı olur, ilanı kaydet işleminde başarılı ise , resimler tablondaki gecici_id değişkeni olanları kayıt olan ilan id'si ile değiştir.

2. yol olarak

Bu işlemleri step step yapman ilan oluşturduktan sonra 2. adım olarak resimleri yüklet, gecici_id ile uğraşmadan yine yukarıdaki gibi direk ilan id'si ile işlemler yapabilirsin.

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);

Bu Şekilde Oluşturuyorum Ama sonunda post ettiğim yerde Yakalamam Gerekiyor. Posta ilanEkle Butonunu Nasıl Eklerim post ettiğim yerde yakalamak için.


if (isset($_POST['ilanEkle'])) {



}

Butonu neden yakalamanız gerekiyor? Zaten butona basıldığında veriler gönderilecek. Sizin verileri yakalamanız gerekiyor.

Butonla beraber sadece resim değil başka verilerde kayıt edilecekler. İlan bilgilerini SESSIONA alıyorum en son resimler yükleniyor post edildiğinde Tüm veriler orada kayıt ediliyor.

sending alanını güncellemeniz gerek. eklenen yeni satırlar:

formData.append("butonId", 'sendButton');
formData.append("ilanAdi", $('#ilanAdi').val());

myDropzone.on("sending", function(file, xhr, formData) {
formData.append("index", file.index);
if (file.index === 0) {
formData.append("mainImage", "true");
}
formData.append("butonId", 'sendButton');
formData.append("ilanAdi", $('#ilanAdi').val());
});

Verdiğin Kodla işimi gördüm gibi ama sortable olayında sorun var. Sıralamayı değişiyorum ama ilk sıraya aldığımı ilk yüklemiyor. Resim seçerken ilk hangisi ise onu alıyor. Sıraya koyduğumu güncel ilk resim kabul etmiyor.

Frontend ve backend kodunuzu ayrı ayrı buraya koyabilir misiniz?