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

config.filestack_rails.api_key = 'Your API key as a string'
def new   @activity = Activity.newenddef 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_paramsparams.require(:activity).permit(:title, :description, :rating, :location, :capacity, :price, :start_at, :end_at, :imageurl, :user_id)end
<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>
<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>
<%= filestack_js_include_tag %>
<%= filestack_js_init_tag %>

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WordPress 5.5 Breaking Sites, Here’s How to Fix It

AWS Redshift and Creating Test Data Infrastructure

Dragon War X Based Club: AMA prizes up to $100 USDT

Refactoring

Implementation of an Operating System :- Week 5 (Interrupts and Inputs)

Capybara: Taming the Hydrochoerus

No Pain Guide To Legacy Projects Maintenance

RoadToWebDev Day#3 —Internet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arslan Ali

Arslan Ali

More from Medium

Every developer should try building a game

Why should you use Devise gem for Rails authentication?

The DL on DAs: What is a developer advocate?

How to Use Drag And Drop On HTML5 Canvas Element Using FabricJS