Krajee Fileinput Ayarları – Php de Çoklu Resim Yükleme

İlk dersimizde çoklu resim yükleme işlemleriniz için tavsiye ettiğim Krajee Fileinput u php dosyamıza entegre etme konusunu işlemiştik. Bugün ise Ayarları nasıl yapılır öğreneceğiz.

Bir önceki derste fileinput u input tagımıza ekledik, onu şu şekilde güncelleyelim,

<input id="fileinput" name="fileinput[]" multiple type="file" accept="image/*" data-browse-on-zone-click="true" data-show- caption="true">

pluginin kendi ayarlarını ise

$("#input-id").fileinput();
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

bu aşamada bıraktık. Şimdi de bunu güncelleyip değiştirelim.

Tema Ayarlaması:

Öncelikle tema ayarlaması yapalım, fileinput un arayüzünde fontawesome ikonlarını kullanmasını sağlamak için theme:”fas” yazıyoruz.

$("#input-id").fileinput({
    theme: "fas",

Fontawesome ın ikonları bence güzel o yüzden manuel olarak ikonları değiştirmeyi düşünmedim ancak siz ikonlarınızı kendiniz ayarlamak istiyorsanız fileinput un demo örneklerinden birini buraya bırakıyorum.

 <div class="file-loading">
    <input id="input-ficons-3" name="input-ficons-3[]" multiple type="file">
</div>
<script>
$("# input-id ").fileinput({
    uploadUrl: "/file-upload-batch/2",
    previewFileIcon: '<i class="fas fa-file"></i>',
    allowedPreviewTypes: ['image', 'text'], // allow only preview of image & text files
    previewFileIconSettings: {
        'docx': '<i class="fas fa-file-word text-primary"></i>',
        'xlsx': '<i class="fas fa-file-excel text-success"></i>',
        'pptx': '<i class="fas fa-file-powerpoint text-danger"></i>',
        'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
        'zip': '<i class="fas fa-file-archive text-muted"></i>',
    }
});
</script> 
Krajee Fileinput plugini ile çoklu resim yükleme

previewFileIcon ile dosya ikonunu ayarlıyoruz, allowedPreviewTypes ile dosya uzantısını belirliyoruz, previewFileIconSettings ile de hangi uzantılı dosyaların hangi ikonlarla gösterileceğini belirliyoruz. Normalde adım adım ilerleyeceğiz ama font değişimi konusunu yeri gelmişken örneklendirmem gerekiyordu.Biz konumuza devam edelim.

Min-Max Dosya Adedi Belirleme:

Tema ayarlamamızı yaptıktan sonra şimdi eklenecek minimum dosya adedini minFileCount ile belirleyelim;

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,

Minimum kaç görsel olmasını istiyorsanız kod karşılığına o rakamı yazınız. Kullanmak istemiyorsanız eklemeyebilirsiniz. Ben eticaret sitemin yönetici panelinde bir ürün ekleneceği zaman en az 2 resim olmasını istediğim için bunu 2 olarak ayarlıyordum ama bu özelliği artık kullanmıyorum. Neden olduğunu ileride anlatacağım.

Minumum dosya adedi dışında max dosya adedini de sınırlayabiliyoruz. maxFileCount ile max dosya adedini belirleyelim.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,

Upload ve Remove Butonlarının İptali:

UPLOAD tuşunu iptal ediyoruz. Ben fileinputu php dosyamdaki form bloğu içinde kullanıyorum, yeni bir ürün ekleneceği zaman ürünün sadece resimleri değil diğer tüm bilgileri de girildikten sonra kaydet butonuna tıklayınca resim yükleme işleminin gerçekleşmesini istiyorum. O yüzden yükle işine yarayan UPLOAD butonu iptal.

$("#input-id").fileinput({
    theme: "fas",
    //minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,

Bununla birlikte REMOVE butonunu da iptal ediyoruz. Şuan için gerek yok.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,

Resim Gösterim Ayarları:

Yüklenen resimlerin gösterilmesi için initialPreviewAsData kullanacağız.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,
    initialPreviewAsData: true,

Her sürükle bırak işleminde bir önceki resimlerin tamamen silinip sadece yenilerin eklenmesini engellemek istiyorum. Çünkü 2 resmi bir klasörden seçtik diğer 1 tanesini başka klasörden seçeceğiz diyelim. 3.resmi sürükle bırak’da diğer 2 resmin kaybolması pek kullanıcı dostu iş olmaz. Her seferinde üstüne yazmayı iptal için overwriteInitial u tanımlıyoruz.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,
    initialPreviewAsData: true,
    overwriteInitial: false,

Resim inputunun boş geçilmemesi için rhtml5 in required ını burada da tanımlayabiliriz.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,
    initialPreviewAsData: true,
    overwriteInitial: false,
    required: true,

Dil ve Dosya Uzantı Ayarları:

Dil tercihimizi language ile ayarlayalım.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,
    initialPreviewAsData: true,
    overwriteInitial: false,
    required: true,
    language: "tr",

Kabul edeceğimiz dosya uzantılarıallowedFileExtensions ile ayarlıyoruz. Ve kod bloğumuzu parantezler ile kapatıyoruz.

$("#input-id").fileinput({
    theme: "fas",
    minFileCount: 2,
    maxFileCount: 4,
    showUpload: false,
    showRemove: true,
    initialPreviewAsData: true,
    overwriteInitial: false,
    required: true,
    language: "tr",
    allowedFileExtensions: ["jpg", "png", "jpeg", "JPG", "bmp", "gif"]
});

Fileinputumuzu özelleştirdik, şimdi de formumuzdaki kaydet butonuna tıklayınca çalışmasının tetiklenmesi için submit butonumuza özel bir class verelim .

<button type="submit" class="btn-upload">Kaydet ve Yayınla</button>

Son olarak kaydet butonuna tıklayınca fileinput un çalışması için js kodumuzu da ekleyip işlemi tamamlıyoruz.

$("#input-id").fileinput({ 
theme: "fas",
minFileCount: 2,
maxFileCount: 4,
showUpload: false,
showRemove: true,
initialPreviewAsData: true,
overwriteInitial: false,
required: true,
language: "tr",
allowedFileExtensions: ["jpg", "png", "jpeg", "JPG", "bmp", "gif"]     });
$(".btn-upload").on("click", function() { 
  $("#input-id ").fileinput('upload');
}); 

Bir sonraki derste php sonuç sayfasında kayıt işlemleri nasıl oluyor onları inceleyeceğiz. Fileinput ile eklediğimiz resmi verot plugini sayesinde yeniden boyutlandıracak, serverımızda belirlediğimiz klasöre ekleyeceğiz.

Fileinput Dersimizin GİRİŞ bölümü için tıklayınız.

Krajee Fileinput un resmi sayfası için tıklayınız.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir