How to upload a Base64 DataURI string of an image directly from the browser?

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.

Have more questions? Submit a request

Comments

  • Avatar
    Nicolson Dsouza

    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

  • Avatar
    Roee Ben-Ari

    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 its file attribute 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-

Powered by Zendesk