You can use Cloudinary's jQuery plugin (and the jQuery-File-Upload plugin) for uploading directly from the browser. If you already initialized an input upload file input field (e.g., '.image_upload'), the following Javascript commands would get a canvas content as a Base64 dataURI that is sent to the file upload field. Uploading to Cloudinary starts automatically in the same way it works for regular image selection.
var data = canvas.toDataURL('image/png');
$('.image_upload').fileupload('option', 'formData').file = data;
$('.image_upload').fileupload('add', { files: [ data ] });
Check the following pages for more details about direct image upload from the cloud: signed upload (or in Rails for example) and unsigned upload.
Information regarding BASE64 upload from your server-side can be further read here:
http://support.cloudinary.com/hc/en-us/articles/203125741-Can-I-upload-using-DATA-URI-BASE64-
UPDATE: Uploading using Base64 representation is limited to file-size of 60MB.
Comments
6 comments
I still don't get it,
var imageData = canvas.toDataURL();
$('.image_upload').fileupload('option', 'formData').file = imageData;
$('.image_upload').fileupload('add', { files: [ imageData ] });
I still don't know why do I have to give a dom element to uploada data uri which I already have it.
and there is no call back to let me know when the data uri is actually uploaded.
Is this client side code only, or it involves server side code too?
I am nodejs developer.
Sorry if I am missing something,
an urgent reply would be nice.
Thanks
The DOM element with the class of
image_upload(in the example above) is the input field that is initialized with the uploader responsible for getting the image from the client. The upload is triggered when itsfileattribute contains data.The upload call has several callback events which you can listen to. One of those is
cloudinarydone, which is fired once the upload is completed.For more information:
http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
Regarding your question - This is a client-side code (jQuery). You can perform such uploads from the server-side too, for more information:
http://support.cloudinary.com/hc/en-us/articles/203125741-Can-I-upload-using-DATA-URI-BASE64-
can some one post a full working example rather than snippets of code mentioned above for a direct upload from the browser to cloudinary please ?
Hi Sankar,
Please find the following jsfiddle, which shows a full implementation of direct uploading via the browser: https://jsfiddle.net/a04chdzs/1
In case you still encounter any issues when trying to implement the same in your project, please open a support ticket at support@cloudinary.com and we will be happy to further assist you.
thanks Raz
any chance you can show an example if i already have the base64 image as a DataURI ?
Thanks again
Sure, Sankar.
Please see below an additional jsfiddle for uploading a base64 URI of an image directly from your browser, using jQuery:
https://jsfiddle.net/tsfgbowd/
Please sign in to leave a comment.