Image management using Spring & Cloudinary.

Posted on Updated on

Cloudinary is your one stop shop for every image related task. It is a software–as-a-service (SaaS) solution hosted in the cloud. Cloudinary manages your web application’s resources in the cloud. The resources are delivered from high-performance servers through Content Delivery Networks.

Cloudinary is an end-to-end image management solution for your website and mobile apps. Cloudinary covers everything from image uploads, storage, manipulations, optimizations to delivery. You can easily upload images to the cloud, automatically perform smart image manipulations without installing any complex software. All your images are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications.

Cloudinary provides many features which include Image upload, Image Transformation, Image storage and many more. Click here to see their all features.

Further we will see a sample demonstration to image upload and transformation using Spring MVC and Cloudinary.

Technologies used in this examples are :
1. JDK 8
2. Maven 3.3.9
3. Spring
4. Tomcat
5. Cloudinary Account – Before starting this example make sure you have the Cloudinary account to get the following details –
a. Cloudinary cloud name
b. Cloudiinary API key
c. Cloudinary API Seceret

cloudinaryaccount

 

This example has been implemented using Eclipse IDE and Maven. Run the following command to create the Maven based project in your workspace through command prompt.
mvn archetype:generate -DgroupId={project-packaging} -DartifactId={project-name} -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

For example –

mvn archetype:generate -DgroupId=com.c2s.upload -DartifactId=SpringCloudinaryDemo -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

It will create the project in your workspace.

cloudinaryprojectcreate

Import the project as existing maven project in your eclipse IDE and add the following folder in the maven based project –

cloudinaryprojectstructure

1). Add below dependencies in your pom.xml and build the project to add these dependencies in the project.
Command – mvn clean install

2). Add below servlet mapping configuration into web.xml

3). Spring Configuration –

Register “CommonsMultipartResolver” to tell Spring to use commons-upload library to handle the file upload form. The rest is just normal bean declaration.
File – mvc-dispatcher-servler.xml

4). File Upload Controller – Extends the SimpleFormController and handle the file upload form like a normal form.

File : FileUploadController.java

5). FileUpload.java class

6). FileUploadValidator.java class to validate the image upload –

7). View Page –

The Spring’s form tag didn’t comes with any file upload tag (that’s weird). So, you have to declared the pure HTML file tag >input type=”file” /> manually. Furthermore, in the Spring’s form, define the form encoding attribute enctype=”multipart/form-data”, so that the browser will know how to handle the multipart file. In last, wrap some Spring’s form error tag to display the error message.

File: FileUploadForm.jsp

8). If the file is uploaded successfully, display the uploaded file name.

File: FileUploadSuccess.jsp

9). Demo –

URL: http://localhost:8080/SpringCloudinaryDemo/fileupload.htm
Render a file upload component.
fileupload

Display the error message if user didn’t select a file to upload while clicking on the upload button.

 

fileuploaderror

Upload the image File from your computer/laptop

 

upload

 

If file upload successful, display the transformed image file.

 

afterupload

Also we can login to Cloudinary account to verify the uploaded image file –

cloudinaryuploadverify

 

If you want to explore more about Cloudinary and its integration with other platform, please go through following resources –

1). Architecture & Concepts –

http://cloudinary.com/documentation/architecture_and_concepts

2). Cloudinary Image Management –

http://cloudinary.com/documentation/upload_images

3). Cloudinary Image API –

http://cloudinary.com/documentation/image_upload_api_reference

4). Cloudinary Video Management –

http://cloudinary.com/documentation/video_management

5). Cloudinary Integration –

http://cloudinary.com/documentation/java_integration

6). Cloudinary Github –

https://github.com/cloudinary

Download the attached zip project.
springcloudinarydemo

Stay tuned for more updates!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.