Rails Cloudinary Widget implementation trouble - ruby-on-rails

Question

I am in the process of moving from Dropzone's widget to Cloudinary's widget and running into heaps of trouble.
First off Dropzone is currently working beautifully with uploads to cloudinary. I am moving to their proprietary widget for a bunch of reasons that would just distract this post.
The issue I am having is "simple" at first glance. Images are uploading correctly to Cloudinary. It is on the subsequent form post that I am having issues.
Dropzone automagically creates necessary hidden inputs and values...Cloudinary you have to roll your own. So I have done that and not only is it not working the input values are very different to what dropzone generates for the very same image. I cannot find the logic in dropzone.js that can explain how the inputs are created.
For example, here is what dropzone renders for one image:
<input type="hidden" name="entity[job_entries_attributes][0][images][]" value="eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNkpLQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--7d13c16894d2a146f1ac85e12ddea03d9c14c26e">
When I hand roll I have access to the object returned from direct upload to Cloudinary - public_id, asset_id, etc. But none of them resemble the value above. I am assuming the post and subsequent image rendering is failing because of this.
Anyone have experience with this??? Driving me nuts...

Answer 1

The Upload Widget is an interactive UI for uploading images to your Cloudinary Media Library account and its usage can be extended depending on the use case requirements. Although, the widget does not have many features that Dropzone has, but you can use the different events to include additional custom processes using javascript or HTML (see sample demos here and here).
<div id="widgetdiv"></div>
<script type="text/javascript">
cloudinary.openUploadWidget({
cloudName: 'cloudname',
inlineContainer: '#widgetdiv',
uploadPreset: 'uploadPreset',
showPoweredBy: false,
sources: ['local','instagram']},
(error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
console.log('Custom implementations here...');
var filename = result.info.secure_url.split('/').pop().split('#')[0].split('?')[0];
var filesize = result.info.bytes;
// Populate form, card container, post to another endpoint, etc
}
}
);
</script>