Using Filestack With Ruby On Rails (Image Uploading & Hosting)

While working on my Rails project I realized I my hardware was a bit dated, and such, I had to look for an alternative to the number of very robust and effective gems that would normally work for me. The key issue I was dealing with was uploading and saving large images to the database, and then displaying them to the user. Having an older Mac laptop with an equally ancient OS led me to try to externalize my image storing to an outside party. This led me to Filestack.

The first step in using Filestack is signing up. Quite unfortunately, the website does not offer OmniAuth, so you’re forced to manually enter your email and password like a pleb. After that, open up the Gemfile in your Rails Application and add gem ‘filestack-rails’ to it, then run bundle install. Now with this as part of your application, you can move on to adding the code across your app to bring it to your users.

What you’re going to want to do is get your API Key from the Filestack Dashboard and paste it inside your config/application.rb file, preferably underneath the config.load_defaults

config.filestack_rails.api_key = 'Your API key as a string'

In my application, I designed it where a User could create an Activity. An Activity needed to be uploaded with an image, because that’s always a good way to get others interested in joining your activity. While your Models don’t need to be changed, your Controllers and definitely your Views will have to have code added. My activity_params includes imageurl, but you can name that anything you want like image, imagesource, picturesource, etc.

def new
   @activity = Activity.new
end
def create
   if current_user.admin
     @activity = Activity.new(activity_params)
     @activity.save
     redirect_to activities_path
   else
     redirect_to new_activity_path
   end
end
...
def activity_params
params.require(:activity).permit(:title, :description, :rating,    :location, :capacity, :price, :start_at, :end_at, :imageurl, :user_id)
end

The bulk of the coding will go into your View files. The first erb I constructed was new. I had to inject some JS (pulled directly from the website) in order to get the Filestack interface to show on the otherwise entirely Ruby program.

<h1>Create New Activity</h1>
<br>
<%= form_for @activity do |f|%>
<%= f.label :title %>
<%= f.text_field :title %> <br>
<%= f.label :description %>
<%= f.text_field :description %> <br>
<%= f.label :location %>
<%= f.text_field :location %> <br>
<%= f.label :capacity %>
<%= f.number_field :capacity, min: 1, max: 100 %> <br>
<%= f.label :price, "Price $" %>
<%= f.number_field :price %> <br>
<%= f.label :start_at %>
<%= f.datetime_field :start_at %> <br>
<%= f.label :end_at %>
<%= f.datetime_field :end_at %> <br>
<%= f.hidden_field :imageurl %>
<button id="uploadImage" type="button">Upload Image</button>
<%= f.hidden_field :user_id, :value => session[:user_id] %>
<br><br>
<%= f.submit "Create New Activity", class: "btn" %>
<% end %>
<script>
document.addEventListener('DOMContentLoaded', () => {
const options =  {
onFileUploadFinished: file => {
console.log(file);
document.querySelector("#activity_imageurl").value = file.url;
document.querySelector("#uploadImage").innerText = `Image ${file.filename} Uploaded successfully`;
document.querySelector("#uploadImage").disabled = true;
}
};
document.querySelector("#uploadImage").addEventListener('click', () => {
filestack_client.picker(options).open()
})
});
</script>

The activity.index.erb file looks something like this. You can set the default image size to whatever you want, I went with 400x300.

<div class="ui grid">
<% @activities.each do |activity| %>
<%= link_to activity.title, activity_path(activity)%>
<% if activity.imageurl %>
<%= filestack_image activity.imageurl, size: "400x300", alt: "Picture" %>
<% end %>
<br>
<%= activity.description %>
<%= button_to "Book Reservation", user_reservations_path(user_id: current_user.id, reservation: {user_id: current_user.id, activity_id: activity.id}), class: "btn", method: :post, data: {disable_with: "Please Wait..."} %>
<br>
<%end %>
</div>

But wait, there’s more! In your app/views/layouts/application.html.erb file, add the following to the bottom of your body

<%= filestack_js_include_tag %>
<%= filestack_js_init_tag %>

Now, you should be ready to start create instances with attached images on the browser. Open up your app and head over to where you’ll create a new object. Mine would look like this;

So as you can see, Filestack offers a variety of ways to upload your images and stores them on their own server, so you don’t burden your own app with local images that take up data and potentially slow the experience down for users.

Thank you for taking the time to read my story, I hope it was helpful on your coding journey.