В предыдущих статьях я рассказывал, как интегрировать Uploadify и Ajax-upload в приложения на Rails.

Сегодня я расскажу о том, как подключить в наше приложение ещё один загрузчик файлов: jQuery File Upload.

Подробного описания не будет, всё можно прочитать на странице данного плагина, а так же посмотреть в исходниках тестового приложения на Githab-e.

На самом деле приложение, расположенное на Githab-e, является практически законченным приложением для организации галерей. Оно позволяет создавать галереи, загружать в них изображения, просматривать изображения, а так же производить некоторые манипуляции с ними: добавлять описание, редактировать отображаемую часть картинки при помощи плагина jCrop.

Начну, пожалуй, с jQuery File Upload.

1.  Для начала я несколько изменил графическое представление самого плагина. Другое представление картинок, заимствованное из twitter bootstrap.

2. Во-вторых, искусственно создал ссылки для картинок, которые подгружены  ajax-ом после загрузки. Если все картинки в галереи можно просматривать последовательно, то подгруженные только по одиночке.

3. Загрузка картинок стартует автоматически.

Пожалуй, всё, что касается самого плагина. Всё остальное можно посмотреть в исходниках.

Настройки Carrierwave практически ничем не отличаются от настроек в предыдущих статьях. Разве что там я оставил настройки, которые позволяют делать серые превьюшки. Пользуйтесь.

Больше всего изменений произошло в танцах с «рельсами».

1. Для начала стоит ознакомиться с функцией create контроллера pictures_controller.rb. Обратите внимание, как мы получаем имя картинки, которую мы загрузили:

p_attr = params[:picture]
p_attr[:image] = params[:picture][:image].first if params[:picture][:image].class == Array

2. Так же стоит обратить внимание на ответ данной функции: ответ должен быть json-формате. В частности, отфет формируется так:

render :json => [@picture.to_jq_upload].to_json

3. Обращаю внимание на данный метод - to_jq_upload. Он реализован в модели:

def to_jq_upload
{
«name» => read_attribute(:image),
«size» => image.size,
«url» => image.url,
«thumbnail_url» => image.thumb.url,
«delete_url» => id,
«picture_id» => id,
«delete_type» => «DELETE»
}
end

Что-то кавычки тут неправильные, ну да не смертельно. Этот ответ специально сформирован для плагина jQuery File Upload. Без него приложение будет не функционально. Честно признаться, я его содрал где-то, а где -не помню уже. Немного подправил под свои нужды (-:

4. Обратите внимание на метод crop_image в модели, который вызывается после изменения картинки. Расскажу, для чего он вообще нужен. Дело всё в том, что связка jCrop + Carrierwave по умолчанию использует оригинальное изображение, которое было загружено. Если вы хотите сделать более, чем одно изменение картинки, то ничего у вас не выйдет: вы будите думать, что вырезаете в уже изменённой, а Carriervawe будет делать изменения в исходной картинке. Можете сами попробовать без данного метода. Единственное, что делает данный метод — это заменяет исходное изображение большой версией изменённого. Только и всего.

5. В принципе, как подружить Rails и jCrop хорошо рассказано в этом скринкасте (анг.). Огромная благодарность Райну за наводки на правильное решение.

Вот, в принципе, и всё. Будут вопросы по коду — спрашивайте, постараюсь ответить.

 

Недавние записи

• Long time no see
• Ошибка при обновлении Meteor до версии 1.4.2
• Patch falcon для ruby-1.9.3-p327
• Ускоряем ruby и Rails
• Gem ‘seo_params’: определение основных параметров
• Отрицательный margin-top и Opera
• Rspec and Devise reset password
• Backbone.js: Views. Часть первая.
• Backbone.js: Models and Collections
• Backbone.js Routers