Froala Documentation

Ruby on Rails Image Upload

Image Upload

The following sections describe how to handle image uploads on your server using Ruby as a server-side language. For information on the upload workflow refer to the image upload documentation.

Frontend

Settiong up the index page.

On the head section include the Editor style.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
 </head>

On the body section include the Editor JS files and define the area for the editor.

<body> 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
 
 <div class="sample">
 <h2>Image upload example.</h2>
 <form>
 <textarea id="edit" name="content"></textarea>
 </form>
 </div>

Initialize the editor and set the image upload URL

 <script>
 new FroalaEditor('#edit', {
 // Set the image upload URL.
 imageUploadURL: '/UploadFiles',
 imageUploadParams: {
 id: 'my_editor'
 }
 })
 </script>
</body>
</html>

The full code should look like this:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
 
 <div class="sample">
 <h2>Image upload example.</h2>
 <form>
 <textarea id="edit" name="content"></textarea>
 </form>
 </div>
 
 <script>
 new FroalaEditor('#edit', {
 imageUploadURL: '/UploadFiles',
 fileUploadParams: {
 id: 'my_editor'
 }
 })
 </script>
 </body>
</html>

Backend

upload_controller.rb handles the upload part. It has basic image format validations that can be easily extended.

The uploads directory is created automatically if it does not exist under public/uploads/files

If the uploaded image passes the validation step, the server responds with a JSON object containing a link to the uploaded file.

e.g.: {"link":"http://server_address/download_file/name_of_file"}.

class UploadController < ActionController::Base
 
 IMAGE_EXT = [".gif", ".jpeg", ".jpg", ".png", ".svg"]
 
 def upload_image
 if params[:file]
 FileUtils::mkdir_p(Rails.root.join("public/uploads/files"))
 
 ext = File.extname(params[:file].original_filename)
 ext = image_validation(ext)
 file_name = "#{SecureRandom.urlsafe_base64}#{ext}"
 path = Rails.root.join("public/uploads/files/", file_name)
 
 File.open(path, "wb") {|f| f.write(params[:file].read)}
 view_file = Rails.root.join("/download_file/", file_name).to_s
 render :json => {:link => view_file}.to_json
 else
 render :text => {:link => nil}.to_json
 end
 end
 
 def image_validation(ext)
 raise "Not allowed" unless IMAGE_EXT.include?(ext)
 end
 
 def access_file
 if File.exists?(Rails.root.join("public", "uploads", "files", params[:name]))
 send_data File.read(Rails.root.join("public", "uploads", "files", params[:name])), :disposition => "attachment"
 else
 render :nothing => true
 end
 end
end

routes.rb handles the routing part.

Inside this file you need to define the routes for the POST image upload and the GET uploaded image requests

Rails.application.routes.draw do
 # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 
 post "/upload_image" => "upload#upload_image", :as => :upload_image
 get "/download_file/:name" => "upload#access_file", :as => :upload_access_file, :name => /.*/

Video Upload

Do you think we can improve this article? Let us know.

URL: https://froala.com/wysiwyg-editor/docs/server/ruby/image-upload/

⇱ Image Upload | Ruby on Rails - Froala

Ruby on Rails Image Upload

Image Upload

Frontend

Backend

Froala AI Assistant

How was your chat experience?