Lesson 4
Implementing File Upload Functionality in the ToDo App
Overview of File Uploading

Congratulations on progressing this far in building your ToDo App! Up until now, you have learned how to fetch, create, update, and delete ToDo items, significantly enhancing the functionality of your application. You’ve equipped users to manage their tasks dynamically. In this lesson, we will take another substantial step by implementing the functionality to upload files. This feature will allow users to associate documents or images with their ToDo items, providing an even richer user experience.

What You'll Learn

In this lesson, you will learn how to:

  • Implement a file upload endpoint in your Rails application.
  • Utilize Ruby on Rails' capabilities to handle file storage and management alongside your ToDo items.

Imagine needing a receipt, image, or any document associated with a task — file uploads make this possible. Here's a snippet showing the key components you will implement:

Ruby
1def upload 2 if request.post? 3 uploaded_file = params[:file] 4 uploads_dir = Rails.root.join('public', 'uploads') 5 6 # Create the uploads directory if it doesn't exist 7 FileUtils.mkdir_p(uploads_dir) unless Dir.exist?(uploads_dir) 8 9 filepath = uploads_dir.join(uploaded_file.original_filename) 10 File.open(filepath, 'wb') do |file| 11 file.write(uploaded_file.read) 12 end 13 14 todo = TodoService.add_file(params[:id], uploaded_file.original_filename) 15 redirect_to todo_path(todo[:id]) 16 else 17 set_todo 18 end 19end

In this segment, we define an upload method. It checks if a file is sent via a POST request and writes the file to a directory using File.open. After storing the file, it updates the ToDo item with the filename, enhancing the task details. Note that we do not need to call File.close in this case because using File.open with a block automatically handles opening and closing the file safely.

Modifying Routes for File Uploads

To handle file uploads, you need to update the routes.rb file to include routes for handling both GET and POST requests for the upload functionality. Add the following lines to your routes.rb:

Ruby
1resources :todos do 2 member do 3 get 'upload', to: 'todos#upload' 4 post 'upload', to: 'todos#upload' 5 end 6end

In this snippet, the member block specifies that the routes are associated with a specific ToDo item. The get 'upload' route is used to display the upload form, while the post 'upload' route processes the file upload when the form is submitted. By adding these routes, you associate the upload functionality directly with individual ToDo items in your application.

Why It Matters

Mastering file uploads is exceptionally valuable as it caters to more advanced user needs. A simple task list can transform into a comprehensive project manager with document backups or related images. Modern applications demand more complex functionalities, and file handling is a step toward creating versatile, user-friendly applications.

By the end of this lesson, you'll be ready to enable this exciting feature! It’s the small additions like these that greatly improve user interaction and provide more utility to your application. Let's roll up our sleeves and build this feature step-by-step.

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.