Статьи

Загрузка изображений Rails: Использование CarrierWave и Devise

В первой части этой серии вы узнали, как использовать CarrierWave в своем приложении Rails. Во второй части вы узнаете, как включить загрузку изображений для ваших пользователей с помощью Devise. Devise — это решение для аутентификации в Rails. Вы также узнаете, как использовать fog , библиотеку облачных сервисов Ruby, которая позволит вашему приложению подключаться к Amazon Web Services.

Хватит разговоров — давай приступим к делу.

Создайте новое приложение для рельсов:

rails rails new myapp

Откройте свой Gemfile и добавьте следующие драгоценные камни:

Рельсы Gemfile

драгоценный камень перевозчикволновый камень придумать драгоценный камень mini_magick драгоценный камень туман « `

Запустите bundle install чтобы установить гемы.

Из вашего терминала создайте Pages controller :

rails rails g controller Pages index

Перейдите к config/routes.rb и добавьте корневой путь:

« `rails config / rout.rb

root to: ‘pages # index’ « `

Функция загрузки будет интегрирована в нашу модель пользователя, чтобы пользователи могли загружать аватары. С вашего терминала установите devise:

rails rails generate devise:install

Генератор установит инициализатор, который описывает все параметры конфигурации Devise. Откройте app/views/layouts/application.html.erb в текстовом редакторе и добавьте следующий код над блоком yield :

« `rails app / views / layouts / application.html.erb

<% = уведомление%>

<% = alert%>

« `

На данный момент вы можете создать свою модель пользователя:

rails rails generate devise User

Затем перенесите вашу базу данных:

rails rake db:migrate

Вам нужно будет отредактировать виды разработок, поэтому важно, чтобы вы генерировали их:

rails rails generate devise:views

И это сделает волшебство.

Используя ваш текстовый редактор, откройте app/views/devise/registrations/new.html.erb и отредактируйте его, чтобы он выглядел так:

« `rails app / views / devise / registrations / new.html.erb

<% = form_for (ресурс, как: имя_ресурса, URL: регистрационный путь (имя_ресурса),: html => {multipart:: true}) do | f | %> <% = devise_error_messages! %>

<% = f.label: email%>
<% = f.email_field: электронная почта, автофокус: true%>
<% = f.label: пароль%> <% if @minimum_password_length%> (<% = @minimum_password_length%> минимум символов) <% end%>
<% = f.password_field: пароль, автозаполнение: «off»%>
<% = f.label: password_confirmation%>
<% = f.password_field: подтверждение_ пароля, автозаполнение: «выключен»%>
<% = f.label: аватар до%> <% = f.file_field: аватар%> <% = f.hidden_field: avatar_cache%> <% end%>
<% = f.submit «Зарегистрироваться»%>

<% end%>

<% = сделать «devise / shared / links»%> « `

Сделайте то же самое для app/views/devise/registrations/edit.html.erb :

« `rails app / views / devise / registrations / edit.html.erb

<% = form_for (ресурс, как: имя_ресурса, URL-адрес: регистрационный_путь (имя_ресурса), html: {метод:: положить, multipart:: true}) do | f | %> <% = devise_error_messages! %>

<% = f.label: email%>
<% = f.email_field: электронная почта, автофокус: true%>

<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div> В настоящее время ожидается подтверждение для: <% = resource.unconfirmed_email%> </ div> <% end%>

<% = f.label: пароль%> (оставьте пустым, если вы не хотите его менять)
<% = f.password_field: пароль, автозаполнение: «off»%>
<% = f.label: password_confirmation%>
<% = f.password_field: подтверждение_ пароля, автозаполнение: «выключен»%>

<% if current_user.avatar.url.present? %> <% = image_tag (current_user.avatar.url)%> <% = f.label: remove_avatar do%> <% = f.check_box: remove_avatar%> <% end%> <% end%> <% = f .file_field: avatar%> <% = f.hidden_field: avatar_cache%>

<% = f.label: current_password%> (нам нужен ваш текущий пароль для подтверждения ваших изменений)
<% = f.password_field: current_password, автозаполнение: «off»%>
<% = f.submit «Обновить»%>

<% end%>

Недовольны? <% = button_to «Отменить мою учетную запись», регистрационный путь (имя_ресурса), данные: {подтвердить: «Вы уверены?» }, метод:: удалить%>

<% = link_to «Назад»,: назад%> « `

После этого вам нужно будет добавить аватар в белый список и добавить столбец аватара в таблицу пользователей. С вашего терминала запустите миграцию, чтобы добавить новый столбец аватара.

« `рельсы

рельсы g миграция add_avatar_to_users аватар: строка rake db: мигрировать « `

Добавьте аватар CarrierWave к своей модели User — ваша модель должна выглядеть следующим образом:

« `rails models / user.rb

класс User <ActiveRecord :: Base mount_uploader: аватар, AvatarUploader

devise: database_authenticatable,: registerable,: recoverable,: вспоминаемый,: trackable,: validatable

# Проверка аватара пользователя validates_integrity_of: аватар validates_processing_of: avatar

private def avatar_size_validation error [: avatar] «« должно быть меньше 500 КБ », если avatar.size> 0.5.megabytes end end` «

В приведенном выше коде вы добавили строку mount_uploader вверху класса User . Существует также проверка для проверки целостности и обработки аватара, наряду с методом, который гарантирует, что не будет загружено изображение размером более 500 КБ.

Вам необходимо добавить avatar , avatar_cache и remove_avatar в список доступных атрибутов. Это легко сделать — просто откройте файл application_controller.rb и сделайте так:

« `rails app / controllers / application_controller.rb

Класс ApplicationController <ActionController :: Base # Предотвращает CSRF-атаки, вызывая исключение. # Для API вы можете использовать вместо этого: null_session. protect_from_forgery with:: исключение

before_action: configure_permitted_parameters, если:: devise_controller?

защищенный

def configure_permitted_parameters devise_parameter_sanitizer.for (: sign_up) {| u | u.permit (: имя пользователя,: электронная почта,: пароль,: подтверждение пароля,: Remember_me,: аватар,: avatar_cache)} devise_parameter_sanitizer.for (: account_update) {| u | u.permit (: имя пользователя,: пароль,: подтверждение пароля,: текущий_пароль,: аватар,: avatar_cache,: удалить_аватар)} end end « `

После этого вы готовы интегрировать CarrierWave .

Используя ваш текстовый редактор, перейдите к config/initializers и создайте файл с именем carrier_wave.rb . Вставьте код ниже:

rails ***config/initializers/carrier_wave.rb***

rails require 'carrierwave/orm/activerecord'

Это инициализатор, необходимый для загрузки CarrierWave после ActiveRecord.

Из вашего терминала сгенерируйте загрузчик:

rails rails generate uploader Avatar

Это создаст новый каталог с именем uploaders в папке приложения и файл внутри с именем avatar_uploader.rb . Я отредактировал содержимое файла, чтобы оно выглядело так, как показано ниже:

« `рельсы

Приложение / закачивающие / avatar_uploader.rb

кодировка: utf-8

класс AvatarUploader <CarrierWave :: Uploader :: Base

включить CarrierWave :: MiniMagick

# Выберите, какой тип хранилища использовать для этого загрузчика: storage: fog

# Переопределить каталог, в котором будут храниться загруженные файлы. # Это разумное значение по умолчанию для загрузчиков, которые должны быть смонтированы: def store_dir «uploads / # {model.class.to_s.underscore} / # {mount_as} / # {model.id}» end

# Создайте разные версии ваших загруженных файлов: version: thumb do process: resize_to_fill => [100, 100] end

версия: средний процесс: resize_to_fill => [300, 300] конец

версия: small do process: resize_to_fill => [140, 140] конец

# Добавить белый список расширений, которые могут быть загружены. # Для изображений вы можете использовать что-то вроде этого: def extension_white_list% w (jpg jpeg gif png) end end « `

Вам нужна линия MiniMagick для создания разных версий изображения. Я включил три версии изображений. MiniMagick делает возможным изменение размеров этой версии. Последний блок кода гарантирует, что никакие расширения файлов, кроме перечисленных здесь, не загружены.

В этом руководстве мы будем загружать наши изображения в Amazon Web Services . Если у вас еще нет учетной записи, перейдите на страницу регистрации и создайте бесплатную учетную запись.

Когда вы закончите с этим, вам нужно будет создать корзину для хранения ваших изображений. Когда там, выберите Create Bucket, чтобы открыть диалоговое окно. Введите имя для корзины и выберите регион. Когда закончите, выберите Создать .

Откройте ваш Gemfile, добавьте этот гем и bundle install когда закончите.

rails gem 'figaro'

С вашего терминала запустите bundle exec figaro install . Это создаст новый файл config/application.yml и добавит его в .gitignore вашего приложения. Этот файл необходим для обеспечения безопасности вашего идентификатора доступа AWS и секретного ключа.

Чтобы найти свой идентификатор доступа AWS и секретный ключ, перейдите в Amazon Web Services и нажмите на имя своей учетной записи, которое находится в правом углу консоли.

В раскрывающемся списке выберите « Учетные данные безопасности» и нажмите кнопку « Перейти к учетным данным безопасности» . На открывшейся странице выберите « Ключи доступа» (идентификатор ключа доступа и секретный ключ доступа) . Нажмите кнопку « Создать новый ключ доступа» , чтобы создать новый ключ и скопировать его в редактор.

В текстовом редакторе перейдите к config/application.yml и вставьте следующее:

« `rails config / application.yml

aws_access_id: введите access_id здесь aws_access_secret_key: введите access_key здесь « `

Замените линии, как указано выше.

Перейдите к config/initializers , создайте файл с именем storage.rb и вставьте следующее:

« `rails config / initializers / storage.rb

CarrierWave.configure do | config | config.storage =: тумана tutsplus-avatar ”config.fog_public = false end` «

Согласно приведенному выше конфигу, область для моего сегмента — us-west-2 , а имя tutsplus-avatartutsplus-avatar . Замените это информацией о вашем ведре.

Запустите rails server и укажите в браузере https://localhost:3000/users/sign_up .

В вашем приложении вы можете установить аватар по умолчанию для пользователей, которые решили не загружать аватар. Делать это легко.

Создайте папку в app/assets/images именем fallback и поместите в нее изображение по умолчанию. Используя ваш текстовый редактор, перейдите в app/uploaders/avatar_uploader.rb и вставьте следующий код:

« `rails app / uploaders / avatar_uploader.rb

def default_url (* args) ActionController :: Base.helpers.asset_path («fallback /» + [version_name, «default-avatar.gif»]. compact.join (‘_’)) end « `

Обязательно измените default-avatar.gif на имя вашего изображения.

Теперь вы знаете, как включить загрузку изображений для ваших пользователей. Это добавляет важную функцию к вашему приложению рельсов. Я надеюсь, тебе было весело. В следующей части мы рассмотрим PaperClip. Ваши отзывы приветствуются.