Skip to main content

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

Comments

10 comments

  • 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

    0
  • 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-

    0
  • sankar

    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 ?

     

    0
  • Raz Ziv

    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.

    0
  • sankar

    thanks Raz

    any chance you can show an example if i already have the base64 image as a DataURI ?

     

    Thanks again

    0
  • Raz Ziv

    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/

    0
  • Daniel Ross

    is it possible to fetch a base64 uri as a layer?

    0
  • Anthony Datu

    Hi @Daniel Ross, 

    Yes, you may fetch a base64 URI as a layer.  Here's the reference documentation for layer `l_fetch`: https://cloudinary.com/documentation/transformation_reference#l_fetch

    I hope that helps.  

    -Anthony

    0
  • Daniel Ross

    I was wondering about something like

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAccAAAHHAQMAAADwMgHxAAAABlBMVEX///8AAABVwtN+AAAD9ElEQVR4nO2cvXXjQAyEoadAoUpgKS6NKo2lsASFDPSE28UMsEufL7Ev8yCgZWo/Rnj4GYAy+7atDnu3TwfvfTzNfLOrm91f5v68uO+3t9lyXHjcXyJFJrnH4X7fbu6PINt9ks1wsh9rZy84YYtIkYO8OXyreR/u+9Z8rlmQxMM1QS7t/EOkyC9JhrFGujcXbEYXpM/h2SJF/pvsOW5nApxssyqbRIr8iowIhSzIciqyoLdyKlwQ3regzPpX/hT5m0m62Lv7YVxa8Hpez5cgeaGJFJnkZEtkQUfpFG0dvO/D37g1er5PJvJXk+F9DwSv/mmpCBbW9YGIZT14URpwZkGRIoOEFtDPs9bu1Tjci8pSuzhVAYcfXkSKPJHpVutelVS4W2/rgvxgZEvvi1QoUuQnEpIR49NWPgc/vGd4i0C3n71PpEhW2FS4W+PPBEhpYDybtsIFRYosMqz6tQf+jz7O6hlzAgx7iBRZZKqTjE/dBRG8/Hn10Lpx1Gye8ZtIkf+BNGTNg65JTYruHC6LXQGfjvFBIkUGCW18SdnJhp7Qvc+fxDF8wbNZg4kUOdfxvQPkregFc02A6tR78tao9EdtJlLkiEqwng+3AcUz7qlmWmTMLOtFigwSrV0NcNckwwJnUoT8mZ7qL5EikxyO56MXzDYQ85WRIvOYixQ5kdxUgiwe1TjImPOikrrkFO/o+MEaTKTIVLhtrJog0YU2zlUTM0oDpVotpQqIFMnttTfaujUj2LQhEFmQlRRVgfjELChS5LkvgwtabSoxC+auwKWSpYkUeSapBVgtLm054sUbAWFLiUoQwk2kSJKojqpO6pfUta/V0c1zXsvuT6TIbN9SLXoY1Unna7WMYDElgSBQBRd0TZEiqXAb66TcBMgaPL6MkW25pnd5yUWKPJM37t9mre0MXqkKYHdyJMCqxkWK/CnJ86U4ZdEVPy6xxSX+jYh35KfdRIqcybUmdmu/YM6L7W+v9ZMq923uIkWKTEWcbWDpmlnM26mOz+1vFymySEOBbmPpBMZqDLrmaXdyHxFMpMg8Ru+LLHhU/fTKGV3OV7ima4x9IkUyC7pnArxhhDL2TfJNpiS9ZnTdRIqk4xndytP7guF8JfC7VzMXJlLkTA5b3U/ehzDGBq++5EWkyCJXHx5FjSlr8GsNe0tUOqa2TqRIknv8GfGp38/RCrcGnlmqI8b5/D6SSJEYuUURFd5n+U4bHa+qcX+Xp7qffzNQpEiQa27iupc6GR0dEqATLxMp8m8yKynPBDj9VAnIKr8+eZ/I303GpyS5TeL5Q0lP6pQ+Gj+IByJFFokvMNTPwmqsmlhGMFjkydqYEynyZ+S37Q/fx2t4pMRZFQAAAABJRU5ErkJggg==

    Of course i said they can upload it and convert then use.

    Thanks Anthony.

    0
  • Tamara Yulevich

    Hi Anthony,

    Currently, this is not something that we support. Please also feel free to suggest this on our public roadmap. Please let me know if there is anything else I can help you with

    Best,
    Tamara

    0

Please sign in to leave a comment.