Rails4 после завершения загрузки по вводу, а затем как запустить мод начальной загрузки? - PullRequest
Новая
       11

Rails4 после завершения загрузки по вводу, а затем как запустить мод начальной загрузки?

0 голосов
/ 18 мая 2018

Мой Gemfile: 

gem 'rails', '4.2.8'
gem 'carrierwave', '~> 1.2', '>= 1.2.2'
gem 'mini_magick', '~> 4.8'
gem 'Jcrop', '~> 0.1.0'

Теперь я хочу использовать form_for загрузить картинку пользователя, мой show.html.erb: 

    <%= form_for @user, :html => {:multipart => true} do |f| %>
  <div class="row " id="user_avatar_crop">
    <!-- Choose Image -->
    <div class="col-md-12">
      <%= f.file_field :picture, id: :user_avatar, onchange: 'this.form.submit()'%>
    </div>
  </div>
<% end %>

<!-- Modal -->
<div id="uploadModalContent">

</div>

<!-- Show user picture -->
<% if @user.picture? %>
  <%= image_tag @user.picture.url(:thumb), :alt => @user.name+"_avatar" %>
  <% else %>
  <%= image_tag @user.picture.url(:thumb),:alt => @user.name+"_default" %>
  <% end %>

Мой user_controller.rb: 

def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      if params[:user][:picture].present?
        respond_to do |format|
          format.html do
            flash[:warning] = "Template missing"
            redirect_to @user
          end
          format.js { render template: 'users/update.js.erb'}
        end
      else
        redirect_to @user
        flash[:success] = "Success update"
      end
    else
      render :edit
    end
  end

Мой update.js.erb: 

$('#uploadModalContent').html("<%= j render "users/modal"%>");
$('#upload-modal').modal('show');

Мой _modal.html.erb: 

<div class="modal fade" id="upload-modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Crop Image</h4>
      </div>
      <div class="modal-body">
        <div class="col-md-8">
          <%= image_tag @user.picture_url(:large), id: "cropImage" %>
        </div>
        <div class="col-md-4">
          <h4>Preview</h4>
          <div style="width:100px; height:100px; overflow:hidden;">
            <%= image_tag @user.picture.url(:large), :id => "user_preview" %>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <%= form_for @user do |f| %>
          <% %w[x y w h].each do |attribute| %>
            <%= f.hidden_field "crop_#{attribute}" %>
          <% end %>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "crop" %>
        <% end %>
      </div>
    </div>
  </div>
</div>

Теперь мне нужно после загрузки картинки отобразить _modal.html.erb.Но кажется, что format.js { render template: 'users/update.js.erb'} в user_controller.rb не может работать.Это для чего?

И что мне делать в user_controller.rb, чтобы после input complete onchange: 'this.form.submit()' он мог отрисоваться в модальном окне?Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 18 мая 2018

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

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

$ gem install carrierwave

В Rails добавьте его в свой Gemfile: 

gem 'carrierwave', '~> 1.0'

Теперь перезапустите сервер, чтобы применить изменения.

Начните с создания загрузчика: 

rails generate uploader Photos

это должно дать вам файл в: 

# app/uploaders/photos_uploader.rb
class PhotosUploader < CarrierWave::Uploader::Base
  storage :file
  # will save photos in /app/public/uploads
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

Создание фотографий миграции 

class CreatePhotos < ActiveRecord::Migration
  def change
    create_table :photos do |t|
      t.string :name, :null => false
      t.binary :data, :null => false
      t.string :filename
      t.string :mime_type

      t.timestamps null: false
    end
  end
end

И модель 

require 'carrierwave/orm/activerecord'
class Photo < ActiveRecord::Base
  mount_uploader :data, PhotosUploader
end

Затем контроллер

class PhotosController < ApplicationController
  def index
    @photos = Photo.all
  end
  def show
    @photo = Photo.find(params[:id])
  end
  def new
    @photo = Photo.new
  end
  def create
    # build a photo and pass it into a block to set other attributes
    @photo = Photo.new(photo_params)
    # normal save
    if @photo.save
      redirect_to(@photo, :notice => 'Photo was successfully created.')
    else
      render :action => "new"
    end
  end
  private
    def photo_params
      params.require(:photo).permit!
    end
end

Загрузка формы: 

<!-- new.html.erb -->
<%= form_for(@photo, :html => {:multipart => true}) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :data %>
    <%= f.file_field :data %>
  </div>
  <div class="actions">
    <%= f.submit "Upload" %>
  </div>
<% end %>

И вы загружаете файл в таком виде, как это. 

<!-- show.html.erb -->
<h3>Photo: <b><%= @photo.name %></b></h3>
<%= image_tag @photo.data.url %>

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

# app/assets/javascripts/photos.coffee
$ ->
  alert('Photo Uploaded - You can launch modal here')

Хорошо, вот и все.Дайте мне знать, как идут дела!

...