0

I am trying to figure out how to implement direct file upload to Cloudinary from a user's browser, using a Java backend. This is similar to this question about node.js, but for Java.

Cloudinary's blog post on the topic:

http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

Is pretty sparse in the manual method, and doesn't detail what the exact HTML/JS end result should look like, so getting this working in Java has been tough.

What exactly needs to happen to make this work?

Community
  • 1
  • 1
JBCP
  • 13,109
  • 9
  • 73
  • 111

1 Answers1

0

I gave up waiting for an answer and implemented one myself. The code is available in this fork of the cloudinary_java project.

I've also created a pull requeste to the official cloudinary_java project.

You can use the new functionality like this:

<%@ taglib prefix="cl" uri="http://cloudinary.com/jsp/taglib" %>
...
<cl:upload tags="userProfilePhoto" fieldName="cloudinaryResource" />
<input type="hidden" name="cloudinaryResource" />

Following cloudinary's documentation, you should be able to get images to upload. You will then want to register a handler for successfully upload, and figure out how to save the public_id and format back to your server.

Here is an example of using the cloudinary image tag to create an tag:

<cl:image id="profilePhoto" crop="crop" height="120" width="120"
    extraClasses="profilePhoto" publicId="${cloudinaryPublicId}" format="jpg" />

We configure Cloudinary like this:

in our properties file:

cloudinary.api.key=<api-key-here>
cloudinary.api.secret=<api-secret-here>
cloudinary.cloud-name=<cloud-name-here>

in our cloudinary-config.xml spring config:

<bean id="cloudinaryConfigMap" class="java.util.HashMap">
    <constructor-arg>
        <map key-type="java.lang.String" value-type="java.lang.String">
            <entry key="api_key" value="${cloudinary.api.key}" />
            <entry key="api_secret" value="${cloudinary.api.secret}" />
            <entry key="cloud_name" value="${cloudinary.cloud-name}" />
            <entry key="callback" value="$[app.url.base]/path/to/cloudinary_cors.html" />
        </map>
    </constructor-arg>
</bean>

<bean id="cloudinary" class="com.cloudinary.Cloudinary">
    <constructor-arg index="0" ref="cloudinaryConfigMap" />
</bean>

<bean id="cloudinarySingleton" class="com.cloudinary.SingletonManager" 
    init-method="init" destroy-method="destroy">
    <property name="cloudinary" ref="cloudinary" />
</bean>

This configures Cloudinary from our config system, then stores the result in SingletonManager. When the Spring context is shutdown, the Cloudinary object is cleared from the singleton so memory is not leaked.

I hope this helps someone else!

JBCP
  • 13,109
  • 9
  • 73
  • 111