Start a free Courses trial
to watch this video
In this video we look at how to use the Paperclip plugin to handle file uploads.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[? Music ?] 0:00 [Think Vitamin Membership] [membership.thinkvitamin.com] 0:04 [Ruby on Rails: Forms] [File Uploads with Paperclip: Part 1 with Jim Hoskins] 0:09 So far we've seen how to use Rails' various helper methods 0:14 to create forms on our web pages. 0:18 Now we're going to see how to upload and process files in Ruby on Rails. 0:20 Uploading files with Ruby on Rails can be done easily 0:24 using the file field helper. 0:27 However, the processing of the uploaded file is where it can get complicated. 0:29 Fortunately, Rails has a few plug-ins that take the pain out of file uploads. 0:33 We're going to be looking at a plug-in called Paperclip. 0:37 [http://github.com/thoughtbot/paperclip] 0:40 Paperclip allows us to upload files and attach them to our models 0:42 as though they were just attributes. 0:44 You can find the documentation and source for Paperclip 0:47 at github.com/thoughtbot/paperclip. 0:50 And there's a lot of good examples and details on this page. 0:53 To install it, we first need to include Paperclip into our Rails project. 0:58 To do this, we're going to open up the Gemfile 1:02 that's at the root of our project directory. 1:04 [Gemfile] [Defines dependencies for your rails project] 1:07 To add Paperclip, all we need to do is type in "gem," 1:09 and then type in "paperclip." 1:11 And we can save out our Gemfile, 1:14 and then we need to go ahead and actually install 1:16 the Paperclip into our project. 1:18 Now we're going to go to console, and here we are at the root of our project, 1:21 so I'm just going to type "bundle install." 1:25 [bundle install] [Installs all dependencies in your Gemfile] 1:28 And we should now have Paperclip installed into our project. 1:31 Now you're going to want to make sure that any time you install a new 1:35 third-party plug-in like Paperclip to restart your server. 1:38 For me, it's as simple as hitting "Control C" to end our server 1:42 and then typing "rails s" to start it up once again. 1:46 Now that we have Paperclip installed, we want to actually add 1:49 an attachment to our project object. 1:52 What I want to do is I want to be able to assign an image to a project 1:55 that will describe the project to me. 1:59 In the end, I want to be able to click "Browse" and upload a file here 2:01 and be able to display it whenever I'm showing a project. 2:05 To do this, we need to add some database fields 2:08 to our project's class, so any time we update our database, 2:11 we want to create a new database migration. 2:15 And these are the files that define the changes in our database. 2:18 To do this, we're going to go into our command prompt here, 2:21 and all we need to do is type "rails g" or rails generate. 2:25 We're going to generate a migration, 2:30 and I'm going to call it "add_image_to_projects." 2:33 [rails g migration NAME] [Generates a database migration] 2:37 Now what you name it, it doesn't really matter, but you want it to be descriptive 2:39 of the change that you're making. 2:41 We hit "Enter," and it's created a file for us 2:43 called "add_image_to_projects.rb." 2:47 And you'll notice it's prepended with a time stamp. 2:50 Going back to our code and looking in the db, migrate folder, 2:55 the most recent file should be the AddImageToProjects.rb file. 2:59 [db/migrate/X_add_image_to_projects.rb] 3:04 [Migration file for adding image fields to projects table] 3:06 And we'll see the self.up and self.down are empty, and we need to fill these in 3:08 saying what the changes are when we migrate up to this new version 3:10 and when we migrate down. 3:14 Now, when we want to add an attachment to a file, we give it a name. 3:16 In my case, I want it to be called an image, 3:20 so for each attachment, we need to add 4 fields to our table. 3:22 So, I'm going to add our first column, 3:27 so we're going to just type in "add_column." 3:29 This will define that we're adding a column to the projects table. 3:32 [add_column(table, col, type)] [Adds a column of given type to the table] 3:36 And I want my column to be called "image_file_name." 3:38 Now, I'm prepending it with image because that's what I want my attachment to be called, 3:42 so image_file_name. 3:45 And this should be a string. 3:47 And I want to add the column image_content_type, 3:50 which will be some metadata for a paperclip saying what type of file it is, 3:53 and this column will also be a string. 3:57 Then I'm going to add a column called "image_file_size," 4:01 which will be an integer which will store the size of the file. 4:05 And then the fourth column I want to do is called 4:11 "image_updated_at," and this will be a date-time field, 4:14 and this will be updated every time our file is uploaded. 4:18 In the down method, I want to do the exact opposite, 4:21 so I'm going to paste in this code, and instead of adding the column, 4:24 I'm going to go ahead and remove each of the columns. 4:26 I don't need to define the type of column since I'm just removing it. 4:29 So, I'm going to go ahead and save this out. 4:33 And we're going to go back to our terminal, and we're going to type in 4:36 "rake db:migrate." 4:39 And this will actually run our database migration. 4:42 So, if you see multiple add_column calls, we can see that we now added 4:47 our 4 columns to our project's table. 4:50 The next thing we want to do is open up our project.rb file. 4:53 Here's where we actually define that we're attaching a file to our project. 4:58 I'm just going to use the simplest version we can, 5:02 and we're going to use this new has_attached_file method 5:05 that Paperclip provides. 5:08 [has_attached_file :name] [Defines a file attribute with the given name] 5:10 Now all I need to do is give it the name of my attachment, in this case, image. 5:12 Now, this doesn't mean that it is an image. 5:14 It's just the name of the attachment that I gave it. 5:17 It could be something like avatar or picture or attachment. 5:20 So, once we do that, we actually want to update our form. 5:24 Now, the first thing we want to do is any time we have a form 5:27 that is uploading a file, we need to add the multipart true option to our form for tag. 5:29 So, to do that, we're just going to put a comma after project, 5:36 and we're going to use the HTML hash to say that we're adding 5:39 some HTML parameters, and then we pass "multipart true" 5:41 inside of that hash, and what this does is it sets up 5:45 the form tag to be a multipart form, 5:48 which will allow us to upload. 5:50 If you leave this off, you won't get any errors, 5:52 but you also won't get the file uploaded. 5:55 So, this will tell the browser that we're uploading a file. 5:58 Down here, just above my submit button, 6:01 I'm going to add a field, so "f.label" for my image. 6:06 And I will just do "f.file_field" for image, and that's all we need to do, 6:14 and that will create a file field tag. 6:20 So, if I save it out, let's take a look at the form. 6:24 We refresh, and now we have our "Choose File," 6:28 so I'm just going to go ahead and click it. 6:31 And I'm going to select this tools.png. 6:33 When I update the project, you can see we've successfully updated it. 6:37 And of course, I would like to actually show my image in the project show page, 6:42 so to do that, I'm going to open up the view/projects/show.html.erb file 6:46 for our action, and I'm going to place a little bit of code. 6:52 What I'm going to do here in this first line is 6:57 I'm just checking to see if project.image exists. 7:00 If it does not, then I'm going to skip all this code, 7:04 so by using the .image? I can check if it has been uploaded. 7:06 Then I can just use the image tag helper, which generates an image tag, 7:11 and the source is going to be @project.image.url. 7:15 And this will return the URL for our uploaded file. 7:21 Then below, I'm just going to have an actual link to the file 7:24 so we can click on it. 7:27 When I save it out and we refresh, we can now see our image tag here 7:29 and our file here, which we can click and see our file directly. 7:33 Now we've seen how to configure a basic Paperclip attachment. 7:38 In the next video, we're going to take a look at some more advanced features 7:41 of Paperclip like image resizing. 7:43 [? Music ?] [Think Vitamin Membership] [membership.thinkvitamin.com] 7:46
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up