Locked lesson.
About this lesson
Using Paperclip and ImageMagick to handle image uploading by users. Part 2.
Exercise files
Download this lesson’s related exercise files.
Paperclip and ImageMagick Part 2.docx59.1 KB Paperclip and ImageMagick Part 2 - Solution.docx
59.6 KB
Quick reference
Paperclip and ImageMagick Part 2
In this video we'll finish up the Paperclip installation.
When to use
Now we need to modify our new pins form to allow image uploading, and make some minor controller changes.
Instructions
First: Change the top line of our app/views/pins/_form.html.erb file to allow multipart html items:
<%= form_for @pin, html: { multipart: true } do |f| %>
Next: Add a file field input form to our app/views/pins/_form.html.erb new pin file:
<div class="form-group">
<%= f.label :image %><br>
<%= f.file_field :image, class: 'form-control' %>
</div>
Next: Update your pins_controller.rb file to allow images to be processed via the forms (change the pin_params method):
def pin_params
params.require(:pin).permit(:description, :name, :image)
end
Next: Add this code to show an image on our app/views/pins/show.html.erb file:
<%= image_tag @pin.image.url(:medium) %><br/>
Next: Add this code to show an image on our app/views/pins/index.html.erb
<%= image_tag pin.image.url(:thumb) %>
Hints & tips
- Image tags need @ symbols when they are on their own
- Image tags DON'T need @ symbols when they are inside Ruby loops that already call @variables
- Don't forget to modify your upload form to allow multipart HTML
- Be sure to change your pin_params method in your pins_controller to allow images to be processed through your web forms
- 00:05 So we're almost done,
- 00:06 we just need to make a couple more changes to get this image utility working.
- 00:09 The next thing it wants us to do, here,
- 00:12 in the paperclip documentation, is to edit our form.
- 00:16 And this is the form, if you come back to our thing, and click new pin,
- 00:19 that's this form right here.
- 00:22 So what it wants us to do is this is how our form looks,
- 00:25 but we need to add this little snippet right here and
- 00:30 it's saying allow html: (multipart: true).
- 00:33 And multipart just allows our form to process images,
- 00:36 an image is a multipart type of thing.
- 00:38 It's not just like description text, there's more stuff to images.
- 00:42 So we just copy this and head over to our app
- 00:48 views, pins, and then here's our form right here is that partial.
- 00:53 And if you look, here's the top of our form.
- 00:55 That's this thing right here.
- 00:59 So I'm just gonna change this and paste that in here, and go ahead and save it.
- 01:05 Now the next thing we need to do is right now our form just has a field for
- 01:08 the description.
- 01:09 We need to add a field for the actual image thing too.
- 01:12 So I'm just gonna copy the description input field, and paste it in.
- 01:17 And I'm just gonna change description to image and same thing right here.
- 01:23 And the next thing we need to do is this is a text field right now, but
- 01:28 we need to be a file field, so if we save that.
- 01:31 Okay, so if we hit Reload.
- 01:33 See, now we have this little choose file thing, that allows us to upload an image.
- 01:37 So we're almost done.
- 01:38 Then we need to do make a change to our pin controller.
- 01:42 It wants us to put this param in here.
- 01:44 And we've done this in the past, so let's pull up our apps controller,
- 01:48 pins controller and scroll down to the bottom we have this pin_params thing.
- 01:53 And a couple of videos ago we added this name field.
- 01:56 Now we need to add an image field.
- 01:58 And this just allows images to be processed by our form, so
- 02:02 save that, go ahead and close it.
- 02:04 And let's see what else?
- 02:06 Next, all we have to do is add these image tags to our actual
- 02:10 app wherever we want the image to show up.
- 02:12 So for instance, the Listing Pins page, if we want the image to show next to each pin
- 02:16 here, we need to add one of these lines.
- 02:19 And check it out here, this medium versus thumb,
- 02:22 that allows you to pick which size of image you want.
- 02:25 ImageMagick will resize this for us automatically.
- 02:28 Medium is just sort of a bigger one and thumb is like a small thumbnail.
- 02:31 We'll use both of these.
- 02:33 But you see right here it's @user.avatar.
- 02:36 We need to change this again, like we did earlier, to @pin.image.
- 02:40 But we can do that just by copying this.
- 02:43 So where do we wanna put this?
- 02:44 Well, let's put this on the show image page first.
- 02:47 So head back to our app, our app views, pins and, let's see our show page.
- 02:54 And let's just put this right above the description, so if we change user to pin
- 02:59 and change avatar to image, that's good.
- 03:05 Now look at this, this is @pin,
- 03:07 this is an instance variable that is calling our pin controller.
- 03:11 And you can see it's @pin.description, @pin.user_name.
- 03:15 So we've done that before.
- 03:17 But the reason I point it out is now if we come to our index page,
- 03:20 which is this Listing Pins page, we can add it here too.
- 03:24 I'm just gonna paste this in, put a line break.
- 03:28 Actually, did we put a line break?
- 03:29 We should put a line break here too.
- 03:32 Save that.
- 03:34 But we need to make a quick change here.
- 03:35 See this @pin, and on this page we're already in this
- 03:41 each loop, this is a Ruby loop and that loop has already called the pins.
- 03:46 So if you notice, like this pin description, it doesn't have an @
- 03:49 assignment in front of it and neither do any of this other things.
- 03:52 So on this page, we need to remove that.
- 03:55 And let's change medium to thumb.
- 03:58 So save that, head back over here, and there's some more stuff you can read
- 04:02 through here, but that's pretty much all we need right now.
- 04:04 I'm gonna restart my server, just because we've made a whole lot of changes,
- 04:09 and it's always a good idea to restart your server.
- 04:12 Let's hit Reload and seems to be working.
- 04:14 Click the new pin, let's try this out.
- 04:17 Type in Grumpy Cat, Choose a File.
- 04:20 We'll get this nice pop-up box thing, all works automatically.
- 04:24 Click Submit, and if everything worked, we have Grumpy Cat.
- 04:27 And this is the medium thumbnail image.
- 04:29 We've got our description, our name.
- 04:31 Now if we hit Back, this is the thumbnail-sized image.
- 04:35 If we click Show, Back.
- 04:37 So we are done.
- 04:38 And just like that wasn't too hard.
- 04:40 A few extra steps this time but pretty easy overall.
- 04:43 We do need to do one more thing, and I'll talk about it briefly.
- 04:47 This works in our local database, but it won't work for Heroku with Postgres.
- 04:51 Because Postgres will allow you to upload the images.
- 04:54 But then it will delete them automatically a couple of hours later,
- 04:57 because Heroku doesn't want you storing images on their databases.
- 05:01 So instead, we're gonna make a quick tweak in the next video to get around that,
- 05:06 and we are gonna use Amazon AWS to do that.
- 05:08 And I'll talk about that in the next video, but for now, that's all for
- 05:11 this video.
Lesson notes are only available for subscribers.