Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

multiple file upload

caglar_kocak

Merhabalar ,

<input multiple name="fileInput[]" type="file">
şeklinde bir inputa sahip olduğumuz da kullanıcı butona tıkladığında karşısına dosya seçmesi için bir ekran çıkıyor. Burada diyelim ki 1.jpeg ve 2.jpeg dosyalarını seçip tamam butonuna tıklasın. Sonrasında ise 3.jpeg ve 4.jpeg dosyalarını bunların üzerine eklemek için tekrar butona tıkladığında 1.jpeg ve 2.jpeg ile ilgili tüm bilgiler siliniyor. Bunun önüne nasıl geçebilirm ?

caglar_kocak

caglar_kocak aslında tam olarak şu örnekte yapılan işlemin arka planının nasıl işlediğini merak ediyorum :

https://www.plupload.com/examples/ burada olarak istediğimiz kadar ekleme ve çıkarma yapabiliyoruz.

mgsmus

caglar_kocak Direkt HTML ile yapamazsınız, Javascript ile yapabilirsiniz.

Ben şunu kullanmıştım gayet hoşuma gitmişti: https://uppy.io/

caglar_kocak

mgsmus Gönderdiğiniz linki çok beğendim.. Ben kendim yapmak için uğraşıyordum. Sizin gönderdiğiniz de istediklerimden çok daha fazlası var. Teşekkür ederim. .

caglar_kocak

evet ama js tarafında nasıl bir işlem yapmam gerekir ? Yani html e nasıl bir müdahale de bulunmak gerekiyor ? Tam olarak arka planda çalışan şeyin ne olduğunu bilmiyorum.

mgsmus

caglar_kocak Kendiniz yapmak isterseniz boş bir dizi tutacaksınız. Dosya seç dediğinde bu diziye seçilenleri yazacaksınız, sonra kapatıp tekrar açarsa kendi tuttuğu silinse bile sizin dizidekiler silinmemiş olacak ve tekrar seçerse sizin diziye ekleyecek. Sonra bu diziden bir form oluşturup onu göndereceksiniz.

caglar_kocak

mgsmus o dizinin içerisine gelen objenin hepsini yollayarak mı yapacağım ?

caglar_kocak

mgsmus bir de oluşturduğum form elementinin tipi file olmak zorunda mı ?

caglar_kocak

mgsmus yani aslında şunu soruyorum. Bu oluşturduğum dizideki elemanları input type file olan bir elelemte value olarak mı atamam gerekiyor ? Bu değerleri nasıl vereceğim ?

mgsmus

caglar_kocak Sanırım tarayıcılar buna izin vermiyor. Onun yerine FormData kullanıp javascript ile POST edeceksiniz:
https://developer.mozilla.org/en-US/docs/Web/API/FormData

Şurada örnek var:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');

mgsmus

Mesela

const files = [] // sizin doldurulan dizi...
const formData = new FormData()

for (var i = 0; i < files.length; i++) {
    formData.append('uploads[]', files[i], files[i].name);
}

const request = new XMLHttpRequest();
request.open("POST", "/upload");
request.send(formData);

denemedim ama mantık olarak böyle bir şey...

mkeremcansev

Direkt input'a file vererek ve name değerini "value[]" şeklinde ayarlayarak upload edebilirsin.

$('#add').click(function () {
    var formData = new FormData();
    var totalfiles = $('#images').files.length;
    for (var index = 0; index < totalfiles; index++) {
        formData.append("images[]", $('#images').files[index]);
    }
    formData.append("add", "add");
    $.ajax({
        url: 'url',
        type: 'post',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (data) {
            console.log('success')
        },
        error: function (data) {
            console.log('error')
        },
    });
});

İyi çalışmalar.