File Uploads with Paperclip: Part 1

[? 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 set up Workspace

Sign up