问题描述:

I'm stuck on what to do for having image upload in froala editor. I have carrierwave working for uploading images to google cloud storage for other sections of my app and now I want to have image uploads in froala editor working as well.

Here is what I've done so far

Post image uplaoder

class PostImageUploader < CarrierWave::Uploader::Base

# Choose what kind of storage to use for this uploader:

storage :fog

# Override the directory where uploaded files will be stored.

# This is a sensible default for uploaders that are meant to be mounted:

def store_dir

"post-image"

end

# Add a white list of extensions which are allowed to be uploaded.

# For images you might use something like this:

def extension_white_list

%w(jpg jpeg gif png)

end

# Override the filename of the uploaded files:

# Avoid using model.id or version_name here, see uploader/store.rb for details.

def filename

"#{model.id}-#{original_filename}" if original_filename.present?

end

end

I made a post image model

class PostImage < ActiveRecord::Base

belongs_to :post

mount_uploader :image, PostImageUploader

validate :image_size

# Validates the size of an uploaded picture.

def image_size

if image.size > 5.megabytes

errors.add(:picture, "should be less than 5MB")

end

end

end

I made attach and detach methods in my post controller but i don't know what to put in them.

 def attach

end

def detach

end

def image_params

params.require(:post_image).permit(:image)

end

Made routes to the attach and detach methods but they could be wrong because im not sure if I even need the methods.

match '/guides/:guide_id/posts/attach' => 'posts#attach', :via => :create, as: :attach_guide_post_image

match '/guides/:guide_id/posts/detach'=> 'posts#detach', :via => :delete, as: :detach_guide_post_image

my carriwewave initializer is setup and working (because I'm using it on other places on the site) so I dont think I need to add it in. And I dont think I need to add my post controller new and create methods, their pretty stock standard.

From here I went to the froala docs for image uploads, but I dont know what values to put in and which I do need and which I don't need. My questions are the comments written in capital letters.

 <script>

$(function() {

$('.editor')

.froalaeditor({

// Set the image upload parameter.

imageUploadParam: 'image',

// 1. I'M GUESSING THIS IS THE PARAM PASSED

// Set the image upload URL.

imageUploadURL: <%= attach_guide_post_image_path =%>,

// 2. MADE THIS PATH IN THE ROUTES

// Set request type.

imageUploadMethod: 'POST',

// Set max image size to 5MB.

imageMaxSize: 5 * 1024 * 1024,

// Allow to upload PNG and JPG.

imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif']

})

.on('froalaEditor.image.beforeUpload', function (e, editor, images) {

// Return false if you want to stop the image upload.

//3. SO I PUT ERROR MESSAGE IN THESE?? IF SO SHOULD IT BE A POPUP OR TEXT ON THE SCREEN AND HOW

})

.on('froalaEditor.image.uploaded', function (e, editor, response) {

// Image was uploaded to the server.

})

.on('froalaEditor.image.inserted', function (e, editor, $img, response) {

// Image was inserted in the editor.

})

.on('froalaEditor.image.replaced', function (e, editor, $img, response) {

// Image was replaced in the editor.

})

.on('froalaEditor.image.error', function (e, editor, error, response) {

// Bad link.

else if (error.code == 1) { ... }

// No link in upload response.

else if (error.code == 2) { ... }

// Error during image upload.

else if (error.code == 3) { ... }

// Parsing response failed.

else if (error.code == 4) { ... }

// Image too text-large.

else if (error.code == 5) { ... }

// Invalid image type.

else if (error.code == 6) { ... }

// Image can be uploaded only to same domain in IE 8 and IE 9.

else if (error.code == 7) { ... }

// Response contains the original server response to the request if available.

});

});

</script>

This is what I got. I know basic JS and have been using rails for about 6 months so im fairly new to it. I have never done anything like this in rails and js and cant find a solid guide on it.

Above is what I got and im stuck. Would love some help on what needs to be done from there to get image uploads working.

网友答案:

I struggled with this same problem and decided to bypass carrierwave entirely and just upload directly to S3 as follows:

      $('.post-editor').froalaEditor({
          toolbarBottom: true,
          toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'insertLink', 'insertImage', 'insertVideo'],
          imageUploadToS3: {
            bucket: "<%= @hash[:bucket] %>",
            region: 's3-us-west-1',
            keyStart: "<%= @hash[:key_start] %>",
            callback: function (url, key) {},
            params: {
              acl: "<%= @hash[:acl] %>", // ACL according to Amazon Documentation.
              AWSAccessKeyId: "<%= @hash[:access_key] %>", // Access Key from Amazon.
              policy: "<%= @hash[:policy] %>", // Policy string computed in the backend.
              signature: "<%= @hash[:signature] %>", // Signature computed in the backend.
            }
          }
        })  

Set up an initializer in config/initializers/AWS_CONFIG.rb:

AWS_CONFIG = {
  'access_key_id' => ENV["S3_ACCESS_KEY"],
  'secret_access_key' => ENV["S3_SECRET_KEY"],
  'bucket' => 'froala-bucket',
  'acl' => 'public-read',
  'key_start' => 'uploads/'
}

Set up the Amazon signature in lib/amazon_signature.rb:

module AmazonSignature
  extend self

  def signature
    Base64.encode64(
        OpenSSL::HMAC.digest(
          OpenSSL::Digest.new('sha1'),
          AWS_CONFIG['secret_access_key'], self.policy
        )
      ).gsub("\n", "")
  end

  def policy
    Base64.encode64(self.policy_data.to_json).gsub("\n", "")
  end

  def policy_data
    {
      expiration: 10.hours.from_now.utc.iso8601,
      conditions: [
        ["starts-with", "$key", AWS_CONFIG['key_start']],
        ["starts-with", "$x-requested-with", "xhr"],
        ["content-length-range", 0, 20.megabytes],
        ["starts-with", "$content-type", ""],
        {bucket: AWS_CONFIG['bucket']},
        {acl: AWS_CONFIG['acl']},
        {success_action_status: "201"}
      ]
    }
  end

  def data_hash
    {:signature => self.signature, :policy => self.policy, :bucket => AWS_CONFIG['bucket'], :acl => AWS_CONFIG['acl'], :key_start => AWS_CONFIG['key_start'], :access_key => AWS_CONFIG['access_key_id']}
  end
end

And finally call it in your PostsController:

before_action :set_hash_for_froala

...

def set_hash_for_froala
  @hash = AmazonSignature::data_hash
end

This video was very helpful: http://rubythursday.com/episodes/ruby-snack-23-froala-wysiwyg-saving-images-on-amazon-s3

网友答案:

I made this about an year ago. [Setting up Froala WYSIWYG editor with CarrierWave and Rails].

I'll try to answer this based on your case.

You can save the file in action attach in your post controller. I assume the model is "PostImage" with "image" attribute

def attach
    @postimage = PostImage.new
    @postimage.image = params[:file]
    @postimage.save

    respond_to do |format|
        format.json { render :json => { status: 'OK', link: @postimage.image.url}}
    end 
end

Simply call the method in your javascript initializer

<script>
    $(function() {
        $('.selector').froalaEditor({
            // Set the image upload URL.
            imageUploadURL: '<%= attach_guide_post_image_path =%>.json',
            imageUploadMethod: 'POST'
        })
    }
</script>

Hope this helps.

网友答案:

If you're using a froala gem, they have an issue open for this here https://github.com/froala/wysiwyg-rails/issues/22

网友答案:

Try this ...............

In your routes.rb

resources :posts do
  collection do
    post :froala_image_upload
  end
end

In your posts_controller.rb

def froala_image_upload
        uploader = PostImageUploader.new
        file = params[:file]
        uploader.store!(file)
        render json: { success: true }
    rescue CarrierWave::IntegrityError => e
      render json: { error: e.message }
end

**script will look like this ...**

<script>
  $(function() {
    $('.editor')
      .froalaeditor({
        imageUploadParam: 'image',
        imageUploadURL: 'froala_image_upload',
        imageMaxSize: 5 * 1024 * 1024,
        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif']
      })
      .on('froalaEditor.image.error', function (e, editor, error, response) {
         // Response contains the original server response to the request if available.
      });
  });
</script>

Hope this will work for you.

相关阅读:
Top