Froala Editor v4.2.0 is Here LEARN MORE
Ruby on Rails
File Upload
The following sections describe how to handle file uploads on your server using Ruby as a server-side language. For information on the upload workflow refer to the file upload documentation.
Frontend
Setting up the index page.
- On the
headsection include the Editor style. - On the
bodysection include the Editor JS files and define the area for the editor. - Initialize the editor and set the file upload URL
<!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>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
// Set the file upload URL.
fileUploadURL: '/UploadFiles',
fileUploadParams: {
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>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
fileUploadURL: '/UploadFiles',
fileUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>
Backend
upload_controller.rb handles the upload part. It has basic file 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 file 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
FILE_EXT = [".txt", ".pdf", ".doc"]
def upload_file
if params[:file]
FileUtils::mkdir_p(Rails.root.join("public/uploads/files"))
ext = File.extname(params[:file].original_filename)
ext = file_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 file_validation(ext)
raise "Not allowed" unless FILE_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 file upload and the GET uploaded file requests
Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
post "/upload_file" => "upload#upload_file", :as => :upload_file
get "/download_file/:name" => "upload#access_file", :as => :upload_access_file, :name => /.*/
Do you think we can improve this article? Let us know.