In this article, we will implement the audio file posting function.
Use Cloudinary (external storage). You can use up to 1GB per month with a free plan.
In the Tweet model, the text posting function is complete.
Register for an account on Cloudinary! Don't forget to register with your e-mail address!
After getting the above account, please start the following work!
Add an audio column of type string to the tweets table.
$ rails generate migration AddAudioToTweets audio:string
$ rails db:migrate
The URL (address) of the audio file is written in this audio column. The audio file itself is saved in a different location.
Write the code to play the audio file
<% @tweets.each do |t| %> <%= audio_tag t.audio_url, :controls => true if t.audio? %> <% end %>
controls =>true displays the controller panel.
In addition, audio_tag has the following options. ``: autoplay`` Autoplay ``: loop`` Loop playback ### Strong parameters Describe it in the strong parameter so that it can receive the audio parameter. #### **`tweets_controller.rb`** ```ruby #Omitted private def tweet_params params.require(:tweet).permit(:body, :audio) end
Write the code to upload the file.
<%= form_for @tweet do |f| %> <div class="field"> <%= f.label :audio %> <%= f.file_field :audio %> </div> <%= f.submit "Tweet" %> <% end %>
This time we will use cloudinary and a gem called carrierwave. Add the following to the bottom of your Gemfile:
gem 'carrierwave' gem 'cloudinary'
$ bundle install
To briefly explain each gem carrierwave: A gem that allows you to upload files with rails cloudinary: A gem to make cloudinary, an external storage service, available
Create an uploader with the CarrierWave generator. Type the following command into your terminal.
$ rails g uploader Audio
Modify app / models / tweet.rb as follows.
class Tweet < ApplicationRecord #Postscript from here mount_uploader :audio, AudioUploader #Postscript up to here end
audio,Audio Uploader means to save the audio file to the specified location.
Next is the uploader settings that specify the save location. Let's change the 6th to 8th lines of app / uploaders / image_uploader.rb. #### **`app/uploaders/audio_uploader.rb`** ```ruby # Choose what kind of storage to use for this uploader: storage :file # storage :fog
Change the above as shown in the figure below.
# Choose what kind of storage to use for this uploader: if Rails.env.production? include Cloudinary::CarrierWave CarrierWave.configure do |config| config.cache_storage = :file end else storage :file end # storage :fog
cloudinary is an external storage service. In the production environment (after release = production), the image is saved in the cloudinary, and in other cases (development environment = local), it is saved in your pc. (Saved in public folder)
Each Cloudinary account is given a "Cloud name", "API Key", and "API Secret".
Increase security to prevent your Cloudinary account from being leaked to the outside world.
Here, we will use a gem called dotenv-rails. Add the following to the bottom of your Gemfile:
$ bundle install
Then create a file called
.env yourself in the ** application directory (the directory where the app, db and gemfiles are located) **.
If it looks like the figure below, it's okay.
Then enter the following in the
.env file you created.
CLOUD_NAME=q0w9e8r7t6yu5 #← This value varies from person to person! !! CLOUDINARY_API_KEY=123456789012345 #← This value varies from person to person! !! CLOUDINARY_API_SECRET=1a2s3d4f5g6h7j8k9l0a1s2d4f5g6h1q #← This value varies from person to person! !!
Here, rewrite each value after "=" with the key obtained in Cloudinary My Page earlier (the key you obtained is absolutely other). Don't say it !! Also, the numbers vary from person to person). Also, when rewriting, ** delete the commented out part **!
Finally, don't publish the .env file that defines the data you want to hide.
Add the following to
** * If the
.gitignore file does not exist, create it in the application directory! ** </ font>
This is OK!
This is the final step! First, create a cloudinary.yml file in your config folder.
Just copy and paste it into config / cloudinary.yml as below.
development: cloud_name: <%= ENV['CLOUD_NAME'] %> api_key: <%= ENV['CLOUDINARY_API_KEY'] %> api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %> enhance_image_tag: true static_file_support: false production: cloud_name: <%= ENV['CLOUD_NAME'] %> api_key: <%= ENV['CLOUDINARY_API_KEY'] %> api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %> enhance_image_tag: true static_file_support: false test: cloud_name: <%= ENV['CLOUD_NAME'] %> api_key: <%= ENV['CLOUDINARY_API_KEY'] %> api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %> enhance_image_tag: true static_file_support: false
You can now use the API key while keeping it private.
You can now post audio files. thank you for your hard work(^^)/
carrierwave cloudinary dotenv-rails