DB: Assign Image Content to Image

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Course 6 of 6 in the Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

From the lesson

Image Content

In this module, you will implement image content within the end-to-end application. At the data tier, you will use the BSON::Binary type to store binary data within MongoDB, manipulate image sizes and content using ImageMagick/MiniMagick, implement model validation and content size queries using Mongoid. At the API tier, you will implement content size queries and web caching of write-once, read-many content using a custom HTTP ETag and Cache-Control headers. Within the UI, you will load, manage, edit, and upload new content using AngularJS, ng-file-upload, and ui-cropper modules. You will also implement a re-usable component to vview full size images with embedded information and controls that allow you to cycle through a series of images.

Module 5 Introduction2:37

Image Content Introduction11:07

DB: Image Content and BSON::Binary13:51

DB: Read Image Content Size5:06

DB: Validate Image Content7:06

DB: Assign Image Content to Image9:41

DB: Generating Image Content Sizes9:59

DB: ImageContent Queries and Management9:56

Meet the Instructors

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

[MUSIC]

In this lecture, we will discuss creating a factory for ImageContent,

adding our ImageContent to the Image, and enhancing the Image factory so

that it automatically can pick up ImageContent.

In resuming our implementation of ImageContent,

we're successfully managing the binary data.

We're successfully getting the size of the image from the JPEG image inside.

We're successfully validating the content.

And now what we would like to do is focus on relating image content to image.

However, the first thing we want to attack is we want to add a factory for

ImageContent so

that it'll be much easier to relate it to the image when we create it.

So let's put our immediate focus into implementing the ImageFactory.

When we take a starting look at implementing the ImageFactory,

one of the first things we want is to be able to build properties for or

attributes for ImageContent prior to getting to an actual persistent object.

We will be posting images to web service calls, and so we want to make

sure that we can create a JSON document out of these attributes from the factory.

So keeping the test simple, we're basically just going to look for can it

build the attributes for image content and will there be a content type and content.

We take a look at the results, we find out it does most of it.

The only really thing we really caught it on was the image type was not what was

expected.

But when we go to the factory,

we find that it's really just a shell of an implementation.

We've got some work to do here, right.

What the factory cannot do is determine what the image ID is.

So let's get rid of that.

We actually want to have an image when we're stored.

And width and height will come from the content, but

image content type, now, that needs to be image JPEG.

As we bring it in over the wire.

Okay, as far as content goes, we want to read in our sample file and

then base 64 encode that as far as storing it in attributes.

And then we do not need the original flag.

All we want to pass forward is content type and content.

And at this point, we're looking good.

We have the attributes we need.

All right, in this next test.

We're going to just try to do a little bit of work in verifying that what we have is

a base 64 encoded string.

So we'll start out with a property object generated

by the FactoryGirl.attributes_for.

Then let's base 64 decode the content property of that property map.

And at this point, data should just be binary data.

And then we can use our helper method to turn what we

believe is a base 64 encoded string into a BSON binary.

And now what we expect is that the binary data size

should equal the binary, the BSON binary data size.

And then of course, the two pieces of data should be identical.

I don't know whether this exactly proves whether it's base 64, but

it at least does some exercise in that area.

So if we look at the results of the test, we're able to have a good indication

that our attribute that came back was base64 encoded.

At least it wasn't binary.

All right, these next two tasks are just lead up to the next topic,

which is Image has ImageContent.

And what we're going to do is a lot of the work that's going to happen inside

the factories we're going to do inside the test.

So let go ahead and just do the whole thing.

What's going to happen is we're going to off and create an image.

And let's just give it some required information like a creator_id.

Now we're going to create a ImageContent from that and pass it the image.

And when we validate it, our image should be valid.

All the properties that we worked to validate, including the image id,

should be set.

And it should be equal the image_id of the image we associated it with.

This is kind of a no brainer, right?

And we're looking good on that front.

We can assign the image ID from the factory.

Okay, in this next one, what we're going to do is pretty much

like the previous one, where we'll create an image.

But then we'll go out and create properties for that image, and

then verify that we can create an instance of the image content

from the properties that have been generated.

So here come attributes for ImageContent that know not what its image id is.

And then we're going to tack on what the image id is, and

then try to create, and expect that to be valid.

And we're actually creating these in the database.

And since we are creating these in the database, let's use the context,

where we'll delete things after each test within this area, okay?

Our ImageContent factory is functional.

Now, in this next section,

what we need to do is associate the image with image_content.

To date, they've been two separate objects talking about one another.

So in this first test, we'll just verify that image knows

what ImageContent is by verifying it has a method to get ImageContent.

And now we know that's going to fail, because image does not yet

reference anything about ImageContent, not in its properties and not in its table.

And what we'll do is we'll add an attribute, a transient attribute

to image that will be capable of being able to set and get image content.

And now our first test is passing.

In this next test, we're going to verify that

the image factory now produces image_content

in addition to all its other properties.

And go one step further and verify that the image_content that it contains

Is a hash for when we call attributes_for.

And that hash contains content_type and content_type is image/jpg.

All right, this one's going to require a little work.

But we've already demonstrated a fair amount of the work that needs to be

done up here.

We need the attributes for

an image to return the attributes also for ImageContent.

And this starts off simple.

We just add a property, image content, and then a code block.

We call FactoryGirl again, and say, give me something for ImageContent, default.

And when we're in attribute form, it doesn't have the image ID,

it's within the image, so it's as we expect.

Now, if I were to print the properties, what we have to watch out for

is now we have a very large base 64 payload involved.

And so let me run this through less so I can control our output.

And we have our image caption, creator_id.

And then here comes our image_content with the content type and the content value.

And everything being base 64 encoded, okay?

And for this last case, we want to actually build an image,

a persistable image.

So in this case, when we call build on FactoryGirl,

we expect image content not to be nil, not a surprise.

We expect it to be of class ImageContent, up here it was a Hash.

Now we want it to be an actual ImageContent with a valid width,

valid height, and valid content type.

But at this point in time, we don't have an image id.

So if I were to run this test at this point in time,

we're failing because we still have a hash in our image content field.

And we would like it to be an actual ImageContent object.

So as I indicated, we have some work to do.

And that work is going to be after it gets built.

So let's listen for the after(:build) event for the image.

And let's reassign the image_content property to be the result of

FactoryGirl.build of passing in the image_content properties.

So basically what we're going to do is we're going to take this hash and

pass it in as properties of how we're going to build a brand new image_content.

Except this time, instead of saying attributes for, we're going to say build.

And of course, our image could be nil.

Okay, so with that change of factory,

we are now have a relationship between image and image_content.

And we can have an image hash that inside of it has image_content hash.

And we can have a image object that has a relationship, yet

a transient relationship, to an ImageContent object.

Both of which are ready to be stored in the database

once they have all the requisite information.

In summary, we implemented an ImageContent factory.

And then, we related our ImageContent to the image using a transient property,

allowing our image to reference its current content.

This will aid us in the future in being able to post an image

where an ImageContent is part of an image.

But of course, the ImageContent is stored in Mongo and not the relational database,

so we're keeping it transient.

What's next?

Generating image content sizes.

Let's take that original image coming in and

let's scale it to standard sizes from thumbnail to large.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play