Clojure lab

This time we well upgrade our app with picture uploading feature.

There is 2 ways to work with pictures

• upload them on the local machine and handle all the resizing stuff with special libraries or
• use remote service that does all this work for you

Pluses and minuses of first way:

• ’+’ speed - no need to connect to remote service and wait for uploaded and resized picture
• ’-’ you need to know what libraries to use
• ’-’ you will have 1 or 2 ways of uploading pictures
• ’-’ you need computing power, more pics more power

Second way:

• ’+’ no need in any infrastructure, you just upload the picture and get url of it
• ’+’ about 10 ways to upload picture ( facebook, dropbox and so on..)
• ’+’ no need to learn how convertion libraries work- you just need to know how to use service
• ’+’ you need not any computing power but you have to pay for service if you handle lot’s of pictures
• ’-’ speed because of the connection to remote service
• ’-’ you need to pay for service if you use it a lot

Mostly using remote service is good for small apps or for prototypes that handles 100 to 1000 pics a day. Maybe things will change soon but comparing and analysing these two ways is topic of another article.

Let’s code something !

Short list of todos.

1. Add picture uploading to “Add book” section and display uploaded picture under “Author” and “Title” fields
2. Submit book info and reload books list all with ajax calls
3. Can change picture of a book in list, also in ajax style

I will use filepicker for pictures handling. Nice and easy to use service. We upload picture to service and get back url with uploaded picture. You can apply some restrictions to uploading like maximum size, weight ( in MB), convert picture or not.

So in our app we will upload and convert picture and then store it to S3 Amazon bucket. Mostly in your projects you will store images at the services like S3 because it’s convinient fast and reliable. Also we need to use remote server for static files for heroku - heroku doesn’t allow you store static files (like pictures) on the service.

First task in our short list

Upload picture and display it under title author fields.

To make filepicker service work you need filepicker.js library, you can take it here.

Include it with: (include-js “/js/filepicker.js”) in common.clj file. We need some html code to handle uploading and some cljs to convert and store our picture to localhost. Here is the HTML code:

CLJS code: Upload picture via widget, convert it to 100px and store to S3, insert url string in hidden field:

Store and convert functions check at github repo.

Important notice! You need to update your filepicker account with Amazon S3 service credentials.

Second task

Submit book info and reload books list all with ajax calls

Here is cljs code for that:

Third task

Update picture of the book

Notice here as we use this-as macro. If we click a link then we need this to get attribues of the link our macro this-as plays role of this. You can name this as you like

(fn[e](this-as bid (update-img bid e)))).

That’s it we are done with S3 uploading. As usual you can find all code at github.