**Course Title:** Mastering Ruby on Rails: Building Scalable Web Applications **Section Title:** File Uploads and Active Storage **Topic:** Create a file upload feature using Active Storage to manage user-uploaded images.(Lab topic) **Objective:** By the end of this topic, students will be able to create a file upload feature using Active Storage to manage user-uploaded images in a Rails application. **Prerequisites:** - Familiarity with Ruby on Rails and its ecosystem - Understanding of Active Record and database interactions - Experience with file uploads and storage in Rails applications **Materials Needed:** - Ruby on Rails (latest version) - Rails gem `active_storage` (latest version) - Rails gem `carrierwave` (latest version) - A text editor or IDE of your choice - A terminal or command prompt **Step 1: Install Active Storage and CarrierWave** To start, we need to install the `active_storage` and `carrierwave` gems in our Rails application. Run the following commands in your terminal: ```bash bundle add active_storage carrierwave ``` **Step 2: Configure Active Storage** Next, we need to configure Active Storage in our Rails application. Create a new file `config/initializers/storage.yml` with the following content: ```yml active_storage: service: AWS access_key_id: YOUR_ACCESS_KEY_ID secret_access_key: YOUR_SECRET_ACCESS_KEY region: YOUR_REGION ``` Replace `YOUR_ACCESS_KEY_ID`, `YOUR_SECRET_ACCESS_KEY`, and `YOUR_REGION` with your actual AWS credentials and region. **Step 3: Create a File Upload Model** Create a new file `app/models/image.rb` with the following content: ```ruby class Image < ApplicationRecord has_one_attached :image end ``` This model will store the uploaded image and its metadata. **Step 4: Create a File Upload Controller** Create a new file `app/controllers/images_controller.rb` with the following content: ```ruby class ImagesController < ApplicationController before_action :set_image, only: [:show, :edit, :update, :destroy] # GET /images def index @images = Image.all end # GET /images/1 def show end # GET /images/new def new @image = Image.new end # GET /images/1/edit def edit end # POST /images def create @image = Image.new(image_params) if @image.save redirect_to @image, notice: 'Image was successfully created.' else render :new end end # PATCH/PUT /images/1 def update if @image.update(image_params) redirect_to @image, notice: 'Image was successfully updated.' else render :edit end end # DELETE /images/1 def destroy @image.destroy redirect_to images_url, notice: 'Image was successfully destroyed.' end private # Use parameters for the Image model instance. def image_params params.require(:image).permit(:image) end # Set the selected image def set_image @image = Image.find(params[:id]) end end ``` This controller handles the file upload and storage process. **Step 5: Create a File Upload View** Create a new file `app/views/images/new.html.erb` with the following content: ```erb <h1>Upload an Image</h1> <%= form_for(@image) do |form| %> <%= form.file_field :image %> <%= form.submit %> <% end %> ``` This view renders a simple form for uploading an image. **Step 6: Run the Application** Finally, run the following command in your terminal to start the Rails application: ```bash rails s ``` Open your web browser and navigate to `http://localhost:3000/images/new`. You should see the file upload form. Upload an image and save it. The image should be stored in your AWS S3 bucket. **Practical Takeaways:** - Active Storage provides a simple and efficient way to store and manage files in your Rails application. - CarrierWave is a popular gem for handling file uploads and storage in Rails applications. - AWS S3 is a popular cloud storage service that integrates well with Active Storage. **Additional Resources:** - [Active Storage Documentation](https://guides.rubyonrails.org/active_storage.html) - [CarrierWave Documentation](https://carrierwave.io/) - [AWS S3 Documentation](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html) **Leave a Comment or Ask for Help:** If you have any questions or need further assistance, please leave a comment below.