Using Cloudinary Image upload outside the admin ui

[Nathan Quinn]

Hey since Keystone doesn't come with registering new accounts (I don't know why they would only have sign in and sign up and not register) but anyway, I'm trying to add an image upload in my register page and have it use cloudinary with keystone.

[David Vermeir]

It's pretty easy to make your own registration and sign in page for new users (I for example have one for non-admin UI users). I would check the SydJS website if I were you, it's a great source for examples.

A lot of Keystone is not documented (for example, I had to browse through the code to find its Mandrill implementation). Check out how the cloudinaryimage.js works in keystone/lib/fieldTypes.

[Nathan Quinn]

Look I need some help, i like what you are saying here and have been relentlessly reading the keystone files trying to understand a little more. I've edited the signin.jade and signout.jade files to work the way I want. I've also created my own registration which adds to the user model on post but it's not inside the keystone directory. I just need a way to register and upload a pic on registration.

[David Vermeir]

I hear what you're saying. :) I'm currently working on the same thing (a cloudinary image field for outside the admin UI), so I'll post a solution here if someone doesn't answer first. I've made custom fields before for the admin UI but this is something on a whole other level since you can't just copy the cloudinaryImage fieldtype's logic.

I'll keep you updated on my progress.

[j...@keystonejs.com]

Hey Nathan, David's on the right track in another post with the UpdateHandler.

You can get an UpdateHandler instance from any item (including newly created ones) then pass it form data to process; as long as you've named your fields correctly it will handle them and validate / upload / save accordingly.

It is what the Admin UI uses for creating / saving data, so you can do anything the Admin UI does with a few lines of code as long as you don't need to do anything too fancy and custom.

And as an up-side, if you're not sure what to name your fields, just check how the Admin UI does it ;-)

(Actually, it's documented here under 'special paths')

For a really simple example check out the gist I wrote earlier (API scaffolding) - it implements the UpdateHandler for creating and updating Posts.

You'll probably also want to set the fields option (at least), and maybe some custom requiredFields.

We're working on forums for keystone, you can see the (working!) work in progress here - https://github.com/JedWatson/keystone-forum

It's got a lot of great examples too on how to work with registration, creating, querying and updating data.

Hope this helps point you in the right direction.

Cheers,

Jed.

[j...@keystonejs.com]

By the way, on the "why no registration page" question -

We figure that it's a rare case for you to want people to be able to sign up for access to your complete backend, which is why there's no default registration page like the signin and sign out pages. It's (likely) only something you need if you're building user features into the front end of your site, in which case you'll (again, likely) have some custom requirements.

Also, although there are conventions for users, you can actually use any model / structure you like, and change everything. More power than most cases need but important for more complex applications... More commonly, you can also use different models for your app sign in vs. admin (keystone) signin.

It might be good to add a feature that adds a default signup page though based on the default models the yeoman generator provides, though... (or possibly just add a registration template to the generator)

I've added an issue here to add it to the generator: https://github.com/JedWatson/generator-keystone/issues/10

If you think there's a good case for a registration page in Keystone itself, let me know :)

[Nathan Quinn]

So my biggest qualm with this is what's the point of User && User.canAccessKeystone, if keystone doesn't even have a basic User implementation outside of the keystone admin ui? In which case there should be a register, login, logout for a regular user and if that user has access to admin ui the option stands in the screen after login whether they want to go to ui or back to home.

[Erik]

I am also interested in using the slick multiple image upload form exposed in the admin UI for type coudinaryImages type. I have had no luck implementing it outside the admin UI however. Any suggestions?

[Shashi R]

Hi Eric,

Any luck uploading cloudinary images outside admin-UI? I was able to upload single image without direct-upload but not multiple images and also I like preview features in admin UI.

[Bradley McCrorey]

I was able to get it working using updatehandler. Simply name your file field in html as "{path}_upload[]". The last part "[]" eluded me for ages. Now I have a field in my user list that is easily updated via updatehandler. Very cool.

This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Pixel Press Technology, LLC is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.

[Swarnendu Dutta]

Hello,

I am using KeystoneCMS. I have this upload image form.i created a model, a route controller and a template file. i have included the scripts as mentioned in the cloudinary docs. Could anyone pls now help me out the next steps ???

Thanks

[Chris Troutner]

It sounds like a few people were able to find the solutions they needed in this thread, but after a couple days of wading through code I'm stuck on the final piece and now I'm worried I may have gone off into left field. I need some guidance.

My requirements are slightly different. I'm not trying to upload an image outside the Admin UI, but update the .url value of an existing image in the database. My intention is to allow a client to use Cloudinary's image manipulation tools, which apply filters by manipulating the URL of the image source. I then want them to be able to update the .url property of the existing image with this new URL.

I found this thread along with these other two threads that talk about uploading images outside the UI. I also found Jed's Gist on opening up the API. I implemented the code in the Gist and wrote a front-end to download, modify, and upload blog posts. Now I'm trying to do the same thing with images. 

Here is a pastebin of the modifications I made to /routes/index.js.

Here is a pastebin of the modifications I made to the /routes/api/posts.js example to create /routes/api/img.js.

I can successfully list/get/upload image JSON data through the API. When I do the same upload steps as a blog post, no error is generated, but the returned JSON data is unmodified.

Like I said, I wrote a front-end that interacts with the blog posts and successfully uploads changes. I've gone over and over my front-end for image manipulation and I'm pretty sure my code is OK. I'm pretty sure the updated JSON I'm uploading is simply being rejected without creating an error. From the console.log of the server it looks like everything is going through just fine, but when the upload handler responds with JSON, it's unmodified. 

I can upload the code for my front-end if anyone is interested, but it's dense and requires bootstrap CSS and few other custom files to load correctly in a browser.

Is my 'hunch' correct that the modification to the url property is being rejected? Any thoughts on how to get around this?

I appreciate any help you can provide.

-Chris Troutner

[Ryan Cole]

Hey Chris, really late to the party here, but I'll post anyways.

You'll need to use the actual cloudinary node package, to do the transforms. You could do something like this in your model, or else where in your route controller.

function makeSizes(block) {

    if(block.posterImage){

        block.posterImage = {

            'original': block.posterImage.secure_url,

            '750x450': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '750x450' }),

            '750x730': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '750x730' }),

            '168x285': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '168x285' }),

            '956x285': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '956x285' }),

            '956x590': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '956x590' }),

            '256x155': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '256x155' }),

            '256x325': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '256x325' }),

            '532x155': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '532x155' }),

            '532x325': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '532x325' }),

            '810x325': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '810x325' }),

            '810x500': cloudinary.url(block.posterImage.public_id, { secure: true, format: 'jpg', transformation: '810x500' })

        };

    }

    return block;

}

Here the .postImage is the cloudinary field, and the transformations are named transformations as described in the cloudinary docs.

Hope it helps someone!