jQuery File Upload + Rails 3.2.3 + Carrierwave + jCrop
В предыдущих статьях я рассказывал, как интегрировать 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 хорошо рассказано в этом скринкасте (анг.). Огромная благодарность Райну за наводки на правильное решение.
Вот, в принципе, и всё. Будут вопросы по коду — спрашивайте, постараюсь ответить.
Июнь 15th, 2012 by none | 2 комментария