Image Uploading in Rails using App42 Cloud Ruby SDK

We’re going to take you through a case where one requires its website visitors to upload an image to the server. It’s quite easy to handle this in a rails application but you will have to create Amazon S3 or Dropbox account for file upload as most of the Rails PaaS providers don’t support file system. Now we will proceed with a simple and small Rails project using App42 File Upload APIs. In App42, the uploaded file goes to CDN network and gives faster access time to your app users, and can be accessed from http endpoint.

To get you started, let’s create a new Rails application called rails_image_upload. It will create a basic structure of the application by using simple rails command.

rails create new app 1024x654 Image Uploading in Rails using App42 Cloud Ruby SDK

To know more about integrating rails sdk in your app, please check our previous blog post and App42 Backend.

Our next step will be to create upload controller to handle file upload.

rails upload controller 1024x354 Image Uploading in Rails using App42 Cloud Ruby SDK

In the below code, we created three methods in the controller. First method: index, will call a view file to display and second function: new, takes file information from the user and passes it to the create method to save image. Let’s add respective code in action.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class UploadController < ApplicationController
 
  @@upload_service = $api.buildUploadService
 
  def index
  begin
  @upload = @@upload_service.get_all_files
  rescue Exception => e
  "#{e.message}" 
      end
      end
 
  def new
      end
 
  def create
  begin
 
file_type = App42::Upload::UploadFileType.new
  upload_file_type = file_type.enum("IMAGE")         
  upload = @@upload_service.upload_file(params['name'], params['file'].tempfile, upload_file_type, params['description'])
//This will upload your file in APp42 CDN network and gives you http endpoint to access the file.   
redirect_to upload_index_path, notice: 'Image uploaded successfully.' 
rescue Exception => e
redirect_to upload_index_path, notice: "#{e.message}"
    end
  end
end

Finally we will create a view file index.html.rb which we have mentioned in controller. Populate this file with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<% if @upload %>
<h3>All uploaded Images</h3></br>
<ul>
  <% @upload.fileList.each do |image| %>
    <li><a href="#"><%= image_tag "#{image.url}", :size => "110x110" %></a>
      <div class="image-hover">
        <h5>Lorem ipsum sit amet dolor.</h5>
        <h6>Category Name</h6>
        <a href="#" class="preview">Preview image</a> </div>
    </li>           
  <% end %>
 </ul>
 <% else %>
 No Image
 <% end %>
 <%= link_to "Upload New Image", upload_new_path %>

and below code in views/upload/new.html.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h3>Fill image upload details</h3></br>
<%= form_tag(upload_create_path, :multipart => true ) do %>
  <div class="field_box">
<%= label_tag(:name, "File name:") %></span> 
<%= text_field_tag :name %></span>
  </div> 
  <div class="field_box">
<%= label_tag(:file, "File Path:") %></span> 
<%= file_field_tag :file %></span>
  </div>
  <div class="field_box">
<%= label_tag(:description, "Description:") %></span> 
<%= text_field_tag :description %></span>
  </div> 
  <div class="field_box_center">
<%= submit_tag "submit" %>
  </div>
<% end %>
</br>
<%= link_to "View all Images", upload_index_path %>

You are almost done, Make sure your application root(config/routes.rb) pointing to

1
"upload#index"

Source Code can be downloaded or viewed from our Git repo. If you have any questions or need any further assistance, please feel free to write us at support@shephertz.com.

twitter Image Uploading in Rails using App42 Cloud Ruby SDKfacebook Image Uploading in Rails using App42 Cloud Ruby SDKgoogle Image Uploading in Rails using App42 Cloud Ruby SDKlinkedin Image Uploading in Rails using App42 Cloud Ruby SDKpinterest Image Uploading in Rails using App42 Cloud Ruby SDKreddit Image Uploading in Rails using App42 Cloud Ruby SDKstumbleupon Image Uploading in Rails using App42 Cloud Ruby SDKtumblr Image Uploading in Rails using App42 Cloud Ruby SDK

Leave a Reply

Your email address will not be published. Required fields are marked *


nine + 2 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>