From 206a06625644ee2972976d032ba628aaf8f81671 Mon Sep 17 00:00:00 2001 From: hamdibayhan Date: Fri, 10 Mar 2017 15:10:33 +0300 Subject: [PATCH 1/2] LMC-14 #time 3h - Blog was written about what is Fineuploader and how to use Fineuploader --- ...e-Fineuploader-kullan\304\261m\304\261.md" | 178 ++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 "source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" diff --git "a/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" "b/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" new file mode 100644 index 00000000..dbff1b43 --- /dev/null +++ "b/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" @@ -0,0 +1,178 @@ +--- +title: Rails5 de Fineuploader Kullanımı +date: 2017-03-10 +author: h_1520 +tags: ruby, fineuploader, file, upload, rails, programming +--- + +Merhabalar, + +Bu yazıda sizelere Rails'de Fineuploader kullanımını bazı özelliklerini kullandığımız bir örnek ile göstereceğim. Fineuploader dosya yükleme işlemleriniz için kullanabileceğiniz bir dosya yükleme kütüphanesidir. +Fineuploader'ı kullanmak için web sayfasına ilk girdiğinizde muadilleri ile arasındaki farkı gösteren tablo ve şu sloganlar: + +``` +- File uploading without the hassle +- Everything you need in a JavaScript file upload library +- Completely "free as in speech" open source software, developed by the community, and sponsored by a company that cares. +``` +muadilleri yerine Fineuploader'ı kullanmanız için sizi cezbetmeye yetecektir. + +Öncelikle [ Fineuploader download ](https://fineuploader.com/customize.html) sayfasına giderek ```Traditional``` için dosyalarımızı indiriyoruz. Bu dosyamızın içinden ```jquery.fine-uploader.js``` dosyamızı ```vendor/assets/javascripts``` klasörünün içine, ```fine-uploader-gallery.css``` +dosyamızı ```vendor/assets/stylesheets``` klasörünün içine atıp 'javascript' ve 'CSS' dosyalarımıza bağlantılarını yapıyoruz ayrıca şu dosyalarımızı: + + - fine-uploader/loading.gif + - fine-uploader/processing.gif + - fine-uploader/continue.gif (isteğe bağlı - yükleme durdurma özelliğini kullanacaksanız) + - fine-uploader/edit.gif (isteğe bağlı - dosya ismi düzenleme özelliğini kullanacaksanız) + - fine-uploader/retry.gif (isteğe bağlı - yüklemesi başarısız olan bir dosyayı tekrar yükleme özelliğini kullanacaksanız) + - fine-uploader/trash.gif (isteğe bağlı - dosya silme özelliğini kullanacaksanız). + +```assets/images``` klasörünün içine ve şu dosyalarımızı: + + - fine-uploader/placeholders/not_available-generic.png + - fine-uploader/placeholders/waiting-generic.png` + +```public/fine_uploader```klasörünün içine atıyoruz. + +Şu an itibariyle Fineuploader'ın kullanımı için alt yapımızı hazırladık. + +Fineuploader'ın arayüz kodlarını için aşağıdaki kodları bir ``_fine_uploader_template.html.erb``` adında partial hale getirelim . + +```html + + + +
+``` + +Yukarıdaki kodlarda son satır bizim `coffeescript` kodları ile bağlantımızı yapan kısımdır. Artık bu noktadan sonra bu dosyayı nereden render edersek orada fineuploader'ı kullanabiliriz. Peki bu satırdaki dataları neden `coffeescript` tarafına gönderiyoruz? +Bunun cevabını şu şekilde açıklayabilirim: ```post-url``` yüklenen dosyanın gideceği endpointi belirlemek için, ```input-name``` dosyalarınızı strong parametreden geçirebilmeniz için gereken parametre ismini düzenleyebilmeniz için, ```delete-endpoint``` ise +eğer yüklenen dosyalarınızda delete özelliğini kullanmak isterseniz yapılacak olan isteğin gideceği endpointi belirlememizi sağlaması için bu dataları gönderiyoruz. +Şimdi gelelim `coffeescript kodlarına: + +```coffeescript + $('#fine-uploader-gallery').fineUploader + template: 'qq-template-gallery' + request: + inputName: $('#fine-uploader-gallery').data('input-name') + endpoint: $('#fine-uploader-gallery').data('post-link') + deleteFile: + enabled: true, + confirmMessage: "{filename} isimli fotoğrafı silmek istediğinize emin misiniz?" + endpoint: $('#fine-uploader-gallery').data('delete-endpoint') + retry: + enableAuto: true + messages: + tooManyItemsError: "({netItems}) adet fotoğraf, yüklemek için çok fazla. En Fazla {itemLimit} adet fotoğraf yükleyebilirsiniz." + callbacks: + onComplete: (id, name, response, xhr) -> + * kodlar buraya gelecek + onProgress: (id, fileName, loaded, total) -> + * kodlar buraya gelecek + onAllComplete: () -> + * kodlar buraya gelecek + failedUploadTextDisplay: mode: 'custom' + thumbnails: placeholders: + waitingPath: '/fine_uploader/waiting-generic.png' + notAvailablePath: '/fine_uploader/not_available-generic.png' + validation: + itemLimit: 10 + scaling: + sendOriginal: false + sizes: [ { + maxSize: 1000 + } ] +``` + +Yukarıdaki kodlar projelerde kullandığım özellikleri içeren kodlardır. Sizlere bunları açıklayacağım, Fineuploader'da bunun gibi bir çok özellik bulunmaktadır, web sayfasına gidip diğer özellikleri de öğrenebilirsiniz. + + - request: Yüklenen dosyaların inputName'ini ve endpoint'ini belirtiyoruz bu sayede fotoğrafı istediğimiz yere istediğimiz parametre ismi ile gönderebiliriz. + - deleteFile: Delete özelliğini kullanmak isterseniz bu option işinizi görecektir fakat default olarak istek 'uuid' ile yapılmaktadır eğer 'uuid' yerine başka bir parametre ile bu isteği yapmak isterseniz 'onComplaete' callback'inin içinde kullanacağımız 'setUuid' metodu işinizi görecektir. + 'enable' ile yüklenen dosyanın silinmesini etkinleştiririz veya devredışı bırakırız. 'confirmMessage' ile default mesajı değiştirebilmemizi sağlar. 'endpoint' ile yapılacak olan isteğin gideceği yeri ayarlamamızı sağlar. + - retry: Bu option ile 'enableAuto: true' yaptığınız zaman eğer olurda dosya yüklenmez ise otomatik olarak dosya 3 kere daha yüklenmeyi dener yine olmaz ise yükleme isteği kesilir. + - messages: Fineuploader'da bulunan default mesajları değiştirebilmemizi sağlar. Yukarıda bir adet örneğini görüyorsunuz. + - callbacks: Fineuploader da çok kullanışlı callback'ler vardır yukarıda bunlardan birkaç tanesini görüyorsunuz. onComplete: yüklenen her dosya sonrasında çalışır, onProgress: tüm dosyaların yükleme işlemi devam ettiği sürece çalışır, onAllComplate: tüm dosyaların yükleme işlemi bittiğinde çalışır. + - failedUploadTextDisplay: Bu option ile başarısız olan yükleme dosyaları için çıkan default mesajı 'mode: 'custom'' yaparak dosya yüklendikten sonra döndüreceğiniz json dosyasında 'message' parametresi ile değiştirebilirsiniz. + - thumbnails: Option'ında 'placeholders' ile dosya hazırlanırken veya ulaşılamazken çıkacak resimler ayarlanır. + - validation: Bu option ile validasyonları kullanabiliriz. Mesela yukarıda 'itemLimit' validasyonu yer almaktadır. Bu validasyon ile Fineuploader ile bir anda 10 adet dosya yüklenebilir. + - scaling: Bu option Fineuploader'ın bizlere sunduğu en önemli özelliklerden bir tanesi diyebilirim. Bu option ile yüklenen fotoğrafların boyutlarını ölçeklendirebilirsiniz, bu işlemi çok hızlı bir şekilde yapmaktadır. Yukarıda yüklenen fotoğrafın 'sendOriginal: false' ile ölçeklendirilmiş hali gönderilmektedir. + 'maxSize: 1000' ile uzun kenar maksimum 1000 piksel olacak şekilde ayarlanmıştır. Fakat 'scaling' option'ında ölçeklendirilen fotoğrafların isimleri 'Blob' olarak gönderilmektedir. Tabi fotoğrafın orjinal ismi de gönderilmektedir, orginal ismi ile gönderilen ismi yer değiştirip fotoğrafın orjinal ismini kullanabilirsiniz. + + Sizlere Fineuploader'ın ne olduğundan ve Rails'de kullanımından kısaca bahsettim. Fineuploader sürekli güncellenmekte ve desteklenmektedir. Fineuploader'ın daha birçok özelliğini web sayfasını kurcalayarak öğrenebilir ve kullanabilirsiniz. [ Buradan ](https://fineuploader.com) web sayfasına gidebilirsiniz. + +Bu yazının sizlere faydalı olması dileğiyle... \ No newline at end of file From 50b74f7ac6d817ebf739a6a7855c1f717dcead62 Mon Sep 17 00:00:00 2001 From: hamdibayhan Date: Fri, 10 Mar 2017 16:30:01 +0300 Subject: [PATCH 2/2] LMC-14 #time 3m - typo fixed --- ...e-Fineuploader-kullan\304\261m\304\261.md" | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git "a/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" "b/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" index dbff1b43..c2d8937f 100644 --- "a/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" +++ "b/source/posts/2017-03-10-Rails5-de-Fineuploader-kullan\304\261m\304\261.md" @@ -10,11 +10,11 @@ Merhabalar, Bu yazıda sizelere Rails'de Fineuploader kullanımını bazı özelliklerini kullandığımız bir örnek ile göstereceğim. Fineuploader dosya yükleme işlemleriniz için kullanabileceğiniz bir dosya yükleme kütüphanesidir. Fineuploader'ı kullanmak için web sayfasına ilk girdiğinizde muadilleri ile arasındaki farkı gösteren tablo ve şu sloganlar: -``` -- File uploading without the hassle -- Everything you need in a JavaScript file upload library -- Completely "free as in speech" open source software, developed by the community, and sponsored by a company that cares. -``` + +* File uploading without the hassle +* Everything you need in a JavaScript file upload library +* Completely "free as in speech" open source software, developed by the community, and sponsored by a company that cares. + muadilleri yerine Fineuploader'ı kullanmanız için sizi cezbetmeye yetecektir. Öncelikle [ Fineuploader download ](https://fineuploader.com/customize.html) sayfasına giderek ```Traditional``` için dosyalarımızı indiriyoruz. Bu dosyamızın içinden ```jquery.fine-uploader.js``` dosyamızı ```vendor/assets/javascripts``` klasörünün içine, ```fine-uploader-gallery.css``` @@ -161,18 +161,26 @@ eğer yüklenen dosyalarınızda delete özelliğini kullanmak isterseniz yapıl Yukarıdaki kodlar projelerde kullandığım özellikleri içeren kodlardır. Sizlere bunları açıklayacağım, Fineuploader'da bunun gibi bir çok özellik bulunmaktadır, web sayfasına gidip diğer özellikleri de öğrenebilirsiniz. - - request: Yüklenen dosyaların inputName'ini ve endpoint'ini belirtiyoruz bu sayede fotoğrafı istediğimiz yere istediğimiz parametre ismi ile gönderebiliriz. - - deleteFile: Delete özelliğini kullanmak isterseniz bu option işinizi görecektir fakat default olarak istek 'uuid' ile yapılmaktadır eğer 'uuid' yerine başka bir parametre ile bu isteği yapmak isterseniz 'onComplaete' callback'inin içinde kullanacağımız 'setUuid' metodu işinizi görecektir. - 'enable' ile yüklenen dosyanın silinmesini etkinleştiririz veya devredışı bırakırız. 'confirmMessage' ile default mesajı değiştirebilmemizi sağlar. 'endpoint' ile yapılacak olan isteğin gideceği yeri ayarlamamızı sağlar. - - retry: Bu option ile 'enableAuto: true' yaptığınız zaman eğer olurda dosya yüklenmez ise otomatik olarak dosya 3 kere daha yüklenmeyi dener yine olmaz ise yükleme isteği kesilir. - - messages: Fineuploader'da bulunan default mesajları değiştirebilmemizi sağlar. Yukarıda bir adet örneğini görüyorsunuz. - - callbacks: Fineuploader da çok kullanışlı callback'ler vardır yukarıda bunlardan birkaç tanesini görüyorsunuz. onComplete: yüklenen her dosya sonrasında çalışır, onProgress: tüm dosyaların yükleme işlemi devam ettiği sürece çalışır, onAllComplate: tüm dosyaların yükleme işlemi bittiğinde çalışır. - - failedUploadTextDisplay: Bu option ile başarısız olan yükleme dosyaları için çıkan default mesajı 'mode: 'custom'' yaparak dosya yüklendikten sonra döndüreceğiniz json dosyasında 'message' parametresi ile değiştirebilirsiniz. - - thumbnails: Option'ında 'placeholders' ile dosya hazırlanırken veya ulaşılamazken çıkacak resimler ayarlanır. - - validation: Bu option ile validasyonları kullanabiliriz. Mesela yukarıda 'itemLimit' validasyonu yer almaktadır. Bu validasyon ile Fineuploader ile bir anda 10 adet dosya yüklenebilir. - - scaling: Bu option Fineuploader'ın bizlere sunduğu en önemli özelliklerden bir tanesi diyebilirim. Bu option ile yüklenen fotoğrafların boyutlarını ölçeklendirebilirsiniz, bu işlemi çok hızlı bir şekilde yapmaktadır. Yukarıda yüklenen fotoğrafın 'sendOriginal: false' ile ölçeklendirilmiş hali gönderilmektedir. - 'maxSize: 1000' ile uzun kenar maksimum 1000 piksel olacak şekilde ayarlanmıştır. Fakat 'scaling' option'ında ölçeklendirilen fotoğrafların isimleri 'Blob' olarak gönderilmektedir. Tabi fotoğrafın orjinal ismi de gönderilmektedir, orginal ismi ile gönderilen ismi yer değiştirip fotoğrafın orjinal ismini kullanabilirsiniz. - +* request: Yüklenen dosyaların inputName'ini ve endpoint'ini belirtiyoruz bu sayede fotoğrafı istediğimiz yere istediğimiz parametre ismi ile gönderebiliriz. + +* deleteFile: Delete özelliğini kullanmak isterseniz bu option işinizi görecektir fakat default olarak istek 'uuid' ile yapılmaktadır eğer 'uuid' yerine başka bir parametre ile bu isteği yapmak isterseniz 'onComplaete' callback'inin içinde kullanacağımız 'setUuid' metodu işinizi görecektir. + 'enable' ile yüklenen dosyanın silinmesini etkinleştiririz veya devredışı bırakırız. 'confirmMessage' ile default mesajı değiştirebilmemizi sağlar. 'endpoint' ile yapılacak olan isteğin gideceği yeri ayarlamamızı sağlar. + +* retry: Bu option ile 'enableAuto: true' yaptığınız zaman eğer olurda dosya yüklenmez ise otomatik olarak dosya 3 kere daha yüklenmeyi dener yine olmaz ise yükleme isteği kesilir. + +* messages: Fineuploader'da bulunan default mesajları değiştirebilmemizi sağlar. Yukarıda bir adet örneğini görüyorsunuz. + +* callbacks: Fineuploader da çok kullanışlı callback'ler vardır yukarıda bunlardan birkaç tanesini görüyorsunuz. onComplete: yüklenen her dosya sonrasında çalışır, onProgress: tüm dosyaların yükleme işlemi devam ettiği sürece çalışır, onAllComplate: tüm dosyaların yükleme işlemi bittiğinde çalışır. + +* failedUploadTextDisplay: Bu option ile başarısız olan yükleme dosyaları için çıkan default mesajı 'mode: 'custom'' yaparak dosya yüklendikten sonra döndüreceğiniz json dosyasında 'message' parametresi ile değiştirebilirsiniz. + +* thumbnails: Option'ında 'placeholders' ile dosya hazırlanırken veya ulaşılamazken çıkacak resimler ayarlanır. + +* validation: Bu option ile validasyonları kullanabiliriz. Mesela yukarıda 'itemLimit' validasyonu yer almaktadır. Bu validasyon ile Fineuploader ile bir anda 10 adet dosya yüklenebilir. + +* scaling: Bu option Fineuploader'ın bizlere sunduğu en önemli özelliklerden bir tanesi diyebilirim. Bu option ile yüklenen fotoğrafların boyutlarını ölçeklendirebilirsiniz, bu işlemi çok hızlı bir şekilde yapmaktadır. Yukarıda yüklenen fotoğrafın 'sendOriginal: false' ile ölçeklendirilmiş hali gönderilmektedir. + 'maxSize: 1000' ile uzun kenar maksimum 1000 piksel olacak şekilde ayarlanmıştır. Fakat 'scaling' option'ında ölçeklendirilen fotoğrafların isimleri 'Blob' olarak gönderilmektedir. Tabi fotoğrafın orjinal ismi de gönderilmektedir, orginal ismi ile gönderilen ismi yer değiştirip fotoğrafın orjinal ismini kullanabilirsiniz. + Sizlere Fineuploader'ın ne olduğundan ve Rails'de kullanımından kısaca bahsettim. Fineuploader sürekli güncellenmekte ve desteklenmektedir. Fineuploader'ın daha birçok özelliğini web sayfasını kurcalayarak öğrenebilir ve kullanabilirsiniz. [ Buradan ](https://fineuploader.com) web sayfasına gidebilirsiniz. Bu yazının sizlere faydalı olması dileğiyle... \ No newline at end of file