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

Filepond JS Türkçeleştirme Hakkında!

BoraN7

Herkese merhaba,

Alpine JS ve Livewire kullanılarak oluşturulmuş bir input componenti uyguladım aşağıdaki makaleyi takip ederek;

https://rappasoft.com/blog/creating-a-filepond-component-using-blade-livewire-alpinejs-then-validating-storing-with-spatie-media-library

Her şey çok güzel çalışıyor. Tek sorunum, Filepond'u Türkçe yapamıyor oluşum. : (

Paketin dokümantasyonunda şu şekilde aktarılmış;
https://github.com/pqina/filepond#internationalization

Çeşitli şekillerde uyarlamayı denedim ancak, makalede de görebileceğiniz kod bloğunda ; x-init içerisinde bir türlü bunu yediremedim.

Yardımcı olabilen olursa çok sevinirim.

İyi forumlar herkese...

sineld

Makale çok güzelmiş doğrusu, fırsat bulursam Livewire ile geliştirdiğim uygulamaya entegre etmeye çalışacağım. Entegre edersem Türkçeleştirme konusuna bakıp buradan yazarım durumu.

EgoistDeveloper

İlgimi çektiği için bir bakayım dedim. Hatta bir Stackblitz vue örneği de bırakayım.

Kısaca dil dosyasını import edip ayarlardan istediğin dili geçiyorsun.

import tr_TR from 'filepond/locale/tr-tr.js';

FilePond.setOptions(tr_TR);

Bunu browser tarafında yapmak için paketin sahibi bir seçenek sunmamış. NPM'deki paketin içindeki dosyalara göz attığımızda locales klasörü altında export edilen dilleri görebiliyoruz. Bunları script tagına src olarak verip çağıramıyoruz ama yukardaki örneğe bakacak olursak olduğu gibi kopyalayıp parametre olarak geçebiliriz.

FilePond.setOptions({
  labelIdle:
    'Dosyanızı Sürükleyin & Bırakın ya da <span class="filepond--label-action"> Seçin </span>',
  labelInvalidField: 'Alan geçersiz dosyalar içeriyor',
  labelFileWaitingForSize: 'Boyut hesaplanıyor',
  labelFileSizeNotAvailable: 'Boyut mevcut değil',
  labelFileLoading: 'Yükleniyor',
  labelFileLoadError: 'Yükleme sırasında hata oluştu',
  labelFileProcessing: 'Yükleniyor',
  labelFileProcessingComplete: 'Yükleme tamamlandı',
  labelFileProcessingAborted: 'Yükleme iptal edildi',
  labelFileProcessingError: 'Yüklerken hata oluştu',
  labelFileProcessingRevertError: 'Geri çekerken hata oluştu',
  labelFileRemoveError: 'Kaldırırken hata oluştu',
  labelTapToCancel: 'İptal etmek için tıklayın',
  labelTapToRetry: 'Tekrar denemek için tıklayın',
  labelTapToUndo: 'Geri almak için tıklayın',
  labelButtonRemoveItem: 'Kaldır',
  labelButtonAbortItemLoad: 'İptal Et',
  labelButtonRetryItemLoad: 'Tekrar dene',
  labelButtonAbortItemProcessing: 'İptal et',
  labelButtonUndoItemProcessing: 'Geri Al',
  labelButtonRetryItemProcessing: 'Tekrar dene',
  labelButtonProcessItem: 'Yükle',
  labelMaxFileSizeExceeded: 'Dosya çok büyük',
  labelMaxFileSize: 'En fazla dosya boyutu: {filesize}',
  labelMaxTotalFileSizeExceeded: 'Maximum boyut aşıldı',
  labelMaxTotalFileSize: 'Maximum dosya boyutu :{filesize}',
  labelFileTypeNotAllowed: 'Geçersiz dosya tipi',
  fileValidateTypeLabelExpectedTypes:
    'Şu {allButLastType} ya da şu dosya olması gerekir: {lastType}',
  imageValidateSizeLabelFormatError: 'Resim tipi desteklenmiyor',
  imageValidateSizeLabelImageSizeTooSmall: 'Resim çok küçük',
  imageValidateSizeLabelImageSizeTooBig: 'Resim çok büyük',
  imageValidateSizeLabelExpectedMinSize:
    'Minimum boyut {minWidth} × {minHeight}',
  imageValidateSizeLabelExpectedMaxSize:
    'Maximum boyut {maxWidth} × {maxHeight}',
  imageValidateSizeLabelImageResolutionTooLow: 'Çözünürlük çok düşük',
  imageValidateSizeLabelImageResolutionTooHigh: 'Çözünürlük çok yüksek',
  imageValidateSizeLabelExpectedMinResolution:
    'Minimum çözünürlük {minResolution}',
  imageValidateSizeLabelExpectedMaxResolution:
    'Maximum çözünürlük {maxResolution}',
});

Yine olmuyorsa kodları görmemiz daha yararlı olur.

BoraN7

EgoistDeveloper Yardımınız için çok teşekkür ederim.

Yalnızca baştaki şu kısım sorun çıkarıyor;

labelIdle: 'Dosyanızı Sürükleyin & Bırakın ya da <span class="filepond--label-action"> Seçin </span>',

Seçin ifadesini içeren span etiketini çıkarırsam çalışıyor ancak Seçin'in altı çizili ve select efekti gidiyor.

Gerçi genel alan tıklanabilir durumda ama onu yapamadım. Biraz JavaScript özürlüyüm. 🙁

html kaynağını kontrol ettiğimde bastığı etiket şu; <span class="filepond--label-action" tabindex="0">Browse</span>

Ancak tırnak kullanımından mıdır nedendir onu yapamadım.

Bunun dışında tüm kısımlar Türkçeleşti ve sorunsuz bir şekilde çalışıyor.

EgoistDeveloper

BoraN7 Seçin ifadesini içeren span etiketini çıkarırsam çalışıyor ancak Seçin’in altı çizili ve select efekti gidiyor.

Böyle olması doğal çünkü o class span etiketinin içindeki yazıyı etkiliyor.

Hangi sürümü kullanıyorsunuz? Belkide kullandığınız sürümde bir bug vardır.

BoraN7

EgoistDeveloper Makalede tarif edildiği şekilde uyguladım.

Livewire ve Alpine JS'nin en güncel sürümü yüklü. Filepond'da aynı şekilde.

<div
    wire:ignore
    x-data
    x-init="
        () => {
            const post = FilePond.create($refs.{{ $attributes->get('ref') ?? 'input' }});
            post.setOptions({
                allowMultiple: {{ $attributes->has('multiple') ? 'true' : 'false' }},
                server: {
                    process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload('{{ $attributes->whereStartsWith('wire:model')->first() }}', file, load, error, progress)
                    },
                    revert: (filename, load) => {
                        @this.removeUpload('{{ $attributes->whereStartsWith('wire:model')->first() }}', filename, load)
                    },
                },
                allowImagePreview: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                imagePreviewMaxHeight: {{ $attributes->has('imagePreviewMaxHeight') ? $attributes->get('imagePreviewMaxHeight') : '256' }},
                allowFileTypeValidation: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                acceptedFileTypes: {!! $attributes->get('acceptedFileTypes') ?? 'null' !!},
                allowFileSizeValidation: {{ $attributes->has('allowFileSizeValidation') ? 'true' : 'false' }},
                maxFileSize: {!! $attributes->has('maxFileSize') ? "'".$attributes->get('maxFileSize')."'" : 'null' !!}
            });
        }
    "
>
    <input type="file" x-ref="{{ $attributes->get('ref') ?? 'input' }}" />
</div>

@push('styles')
    @once
        <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
        <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    @endonce
@endpush

@push('scripts')
    @once
        <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
        <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
        <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
        <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
        <script>
            FilePond.registerPlugin(FilePondPluginFileValidateType);
            FilePond.registerPlugin(FilePondPluginFileValidateSize);
            FilePond.registerPlugin(FilePondPluginImagePreview);
        </script>
    @endonce
@endpush

Buradan farklı olarak ben paketleri npm ile dahil ettim. Ancak app.js büyümesin diye Laravel Mix ile copydirectory yaparak benzer bir yapı kurdum.

x-init içerisinde de verdiğiniz şekilde ekledim sorunsuz çalıştı.

Sadece dediğim gibi ilk satırdaki html etiketleri yüzünden çalışmıyor. En kötü o kısmı ingilizce bırakacağım : )

Componenti de şu şekilde çağırabiliyorum;

<x-input.filepond
    wire:model="image"
    allowImagePreview
    imagePreviewMaxHeight="200"
    allowFileTypeValidation
    acceptedFileTypes="['image/png', 'image/jpg']"
    allowFileSizeValidation
    maxFileSize="4mb"
/>

BoraN7

GÜNCELLEME;
@EgoistDeveloper 'ın önerdiği çözümde,

İlk kısmı backtick içerisine aldığımda sorun düzeldi.

https://prnt.sc/yqCDiQxgS5OC