In addition to uploading assets from a local path or a remote URL, Cloudinary supports uploading assets using the Base64 data URI scheme.
The maximum file size which can be uploaded this way is 60 MB - for larger files, you should upload the file data using the standard upload methods, or by passing a remote URL.
Using our Ruby SDK as an example, an upload call that provides a Base64 data URI will look something like this, with a base64 DATA URI as the first parameter to the upload method, which becomes the 'file' parameter of the call to our upload API:
Cloudinary::Uploader.upload(data:[<MIME-type>][;charset=<encoding>][;base64],<data>);
As a specific example that you can try directly, the below code will upload the following PNG image, via its Base64 representation: 
If you prefer to generate the HTTP request yourself without using one of our SDKs, note that the data URI must be first url-escaped. For example, using the same image as the example above:
"data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4%2F%2F8%2Fw38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg%3D%3D"
We also have an example of using JQuery on the client side to send an upload from the browser using base64 encoding - for that example, please see the Uploading a Base64 DataURI string of an image directly from the browser article
Comments
16 comments
Using the exact data URI of this example (and using a pure HTTP POST request to my cloud), I get the error message
everything else (signature) being obviously correct. How can I debug this? Thanks!
Hi Julian,
How are you uploading this image? Can you share the code and your account's cloud name and I will be able to look into it deeper. If privacy is a concern then please feel free to open a support ticket here: https://support.cloudinary.com/hc/en-us/requests/new with the details and we will be happy to help.
Thanks,
Aditi
Hi Aditi,
thanks for your response, much appreciated! I'm just evaluating some aspects of cloudinary...
anyway, the request is a simple cURL command:
Seemingly, the signature is correct, otherwise I suspect I'd get a different error message. Nothing fancy, really
Hi Julian,
I just tested uploading the same data URI image with curl and it uploaded successfully.
Here is the command I used:
curl -X POST https://api.cloudinary.com/v1_1/<cloud name>/image/upload --data 'file=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4%2F%2F8%2Fw38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg%3D%3D×tamp=1563412399&public_id=curlPost&api_key=<your api key>&signature=<sha-1 signature>'
Please open a support ticket here: https://cloudinary.zendesk.com/agent/ if you continue having problem uploading image. Please include your cloud name in the ticket and we will be able to debug it further.
Thanks,
Aditi
ah, it's a x-www-form-urlencoded post, not formdata... that was my mistake, thanks!
Hello. This information here and in the documentation was helpful and I am able to get my app to send image data to Cloudinary. However, I have to make the images very small or low quality. Otherwise, the URI becomes too long. I am using Unity to create my apps. Is there away around this size limit or a way to upload a local file using a program written with Unity? Thank you in advance.
Hi Scott,
May I please ask some additional information on how you're performing the uploads, specifically;
In general, if you're Uploading Base64 DataURI then that will be sent in the body of the request and thus should not create any issues despite how long the URI might be. The only limit would be the 60MB max filesize for assets uploaded using a Base64 Data URI which is a limit on Cloudinary.
Hello. Thank you for responding.
The following is my code written in C# on Unity. I apologize that the indentations get lost when I paste in the code.
public void UploadPic(string label)
{
byte[] bytes = ImageConversion.EncodeToJPG( (Texture2D) snappedPic.texture, 100);
string encodedimage = Convert.ToBase64String(bytes);
Debug.Log("encoded image: " + encodedimage);
string timestamp = System.DateTimeOffset.UtcNow.ToUnixTimeSeconds().ToString();
string signature =
"tags=" + label +
"×tamp=" + timestamp +
cloudinary_secret;
Debug.Log(CreateSignature(signature));
currentRequest = new RequestHelper
{
Uri = "https://api.cloudinary.com/v1_1/" + cloudinary_cloudname + "/image/upload",
Params = new Dictionary<string, string> {
{ "file", "data:image/png;base64," + encodedimage },
{ "tags", label },
{ "timestamp", timestamp},
{ "api_key", cloudinary_apikey},
{ "signature", CreateSignature(signature)}
},
Body = new Models.CloudinaryUploadResponse
{
},
EnableDebug = true
};
RestClient.Post(currentRequest)
.Then(res =>
{
RestClient.ClearDefaultParams();
Debug.Log("This is the response:" + Models.CloudinaryUploadResponse.CreateFromJson(res.Text).url);
Debug.Log("Upload Response: " + res.Text);
})
.Catch(err => this.LogMessage("error", err.Message));
}
In the ImageConversion.EncodeToJPG function, the snappedPic.texture is a 224x224 pic reduced from an image obtained with the camera. The integer 100 is the quality for the jpeg. I get an HTP/1.1 414 URI too long error. It works if I reduce the quality to 50. The successfully uploaded image with quality 50 is:
The request sent with quality 50 is:
https://api.cloudinary.com/v1_1/dv3jgterf/image/upload?file=data%3aimage%2fpng%3bbase64%2c%2f9j%2f4AAQSkZJRgABAQAAAQABAAD%2f2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2f2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2fwAARCADgAOADASIAAhEBAxEB%2f8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL%2f8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4%2bTl5ufo6erx8vP09fb3%2bPn6%2f8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL%2f8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3%2bPn6%2f9oADAMBAAIRAxEAPwDj6KTNGaAFopKTNADs0ZpmaUGgB%2baM03vxVmG2Z8EjrQBAMk8VYjtZX7YFX4IEi5KjNW1KH5dwHoAKAMwae3c05dNdugNWpbgplRhcdzVB72TPDmgC4ulIERmfr1HpUw0aJ7fckoMmfu%2b1Zkdy8jhWkIHrmppm8hARKzE9x0oAkfSZFGfX0qN9MlUdDzT7XU9rASgn3z0rVivopEO9CcdCo60Ac%2fJaTR9VqAgjqK35GEuSo4HrVaa3R1yBg%2b9AGVu4xikzU00BQ5HSq9AD80oNR5pQaAJAaWmA0ueKABzzUeaVzTaAJkOY2qeBsoRnpVaP7jU6B9rjPSgCuaM0uKSgANIaDSUAFKKSlQZYCgC3aQbzuI4rWjiwoJ%2bVajs4VjhVmHHetvS9LfU5lbGIV6n1oAw7idFTagwB37moodUECnZEpcjG49q6XxPoUFvCssLAEDBWuTFk5G4g4oArSyNJIWJJJpERm%2b6pNXUsecnn2rpNGsoQvzoKAONKspwQRV%2bC1mms2KoWGeK2te0lBIHgAG48VtabZra2Ko4BbvQBwbW0qD5kI%2fCrGn3Jt5tznKjtXXXttE6nCisSTSwZvlGAaALOlv8A2tdGAxLg8gjtVq%2f0mSy%2bWRQ0Z6N6UaVH%2fZc%2fmxAEkY5rpYLy21FDDMoBI6GgDgLi2AQ45FY86bXrrNftDplwVAzC%2fwB0%2blYN%2fbEIHA6igDMpaSjNACg07NMzS0AD0zNK5ptAEsZ%2bVqCSrZFJGRg%2fSnSD90jfhQAwimmnmmmgBpopaKAEq1p8HmzjIyM1WHJxXT6Hpiz3UKIflA3yN6CgCa%2bsmWyiK4AZgoFa9tqUmnxLa28YbI%2b96Vm65eia6VYiBHF8qAVqwwCOBTxkjJNAFO5ElwSZ2Lk%2btQ%2bQFi2YrRaEORhue9QyoAevSgCglsCenNX4CIiEHbrTTiKIuaggcsSfWgDQuUS6iXOflYGpGmA3LTEOIRntVa5kxz60ATB1mjIz84qFlyM9xVWOYpOCD1rQKgru6ZoAgALYxU6w5QFThgeopIygcc1IJNr4HQ0AQa1JJJYFZwGOODVBbBb7TPNibMijlK2b2JbqxZF%2b8BkVi2N99ju0KjC9GWgDmLy3MEhBFVq7LxNYRMguYAPLkGRjsa41wVYigAopKOlAA9MzTmPFMoAlj6n6VYC7rbFVYzz%2bFW7dgY8ZoAgpDS0hoASmmlNJQBNax%2bZKK7W12adozMh%2fez8fRa5nRoPNcZ6E1uXzgQgDt2oAo2cZurts8hea6hGbyQsgAwOtczoUubuQetbswZieeKAHQyDc4FRHG87z1NM3bBgVWmmJNAEmoSYjVR3ptjgjBqtLIZSPap7PiSgDWGNlUpgSCe1Wj9wD1qtdPtQrQBnk4kB960JJswjFUNuRk05JCRtoAuIU4JNS%2beoGBUEMWasm2ATPegC1bvuHPQ1zetoLe%2fyvCtzW9akjj0rN8QwhoxJ6UAFnP5%2bnPbyHKkZGexrlr%2bHZMcVr2MuFB7ZpdYiRoePvdRxQBzdJTm4JptACN0ptK3SmUASxn5qe4ICEfxDP6mooz81SvkohGcDI%2fwA%2fnQA6kpaSgBDTadjNCjLAUAdJoNuVhEjcDrS3VwoZgwyCauWwFvpqjH8I5rE1CQeaPTrQBb0NQdQbbXTFNwwK5PSZngm8xRkk8D1rq4pZHVSYiCaAIpLcAHJrOuo8ZIrXliYNvz%2bFZ9yN0m0UAUYVyasxDZKKeIgmDip0i3EEUATjDYJ7VTuFLyjjipvImW5Zw%2bY2H3fSja4DeYRjPFAFaVMAAVGIShzVgYZiaVjxigCa1dce9XE%2bYc9Ky0JRuK1omV4unBFADFVPMJUg%2fSs%2fX2c220Jx61eiVAvyLt5ou4jLauhwcigDiIJG3%2bWD36Vv24SeHyXwWAxmubfMF6wPBU1r6dKftiHqDzQBz93GYbmSM%2fwnFQGtfxLGI9VcjowBrIJoAaelNNONMNAD4%2fvCrduQUx6MT%2fKqafeFWrY8mgBKKKDQA2prSMy3MaAdTUVbHhe0N3q8SjGFOSTQBt6kRFbiIDoADXNz%2fvboRryTxXTeISIpXUMCPasLRYPtGrx9wDk0AdPY6NBbwRB1BfGc%2b9X5A4VREAcHnPpSuctjOMdKg86WNgGUYJxmgB16dseRwazcc5PWr19liBVCZgikntQA2adI1%2bY0tjeKxINZEsjTPlqu6ehVs4oA19%2bSMGqF9csvHSrTAhsk9u1Zl1h35NAFYXMgbg1cguRJw3BqjLGVGVpsMpDjNAGyo3c1oWxxGBWZE3FaFvxHmgBd%2bC2exqVZlZKos%2b0sc5JNESSN0oAwvEdmIrj7QgwG60ugtC14hmOEA5rX1y33aY5YcgZrmrR8SR7Op6%2fWgCz4uEbXiTQrtjK4Fc9XT%2bILfOlwzAHIOGJrl6AA02lJptADl%2b8Ks25%2bdqqDrVm3%2fwBaR7UAOoNFFACV0PhUBGuJTkbU61z1dBogKaXdPz82BQAzU5v3YGck1b8NQNHcecVJBHWs7yzd38duO5AruILaO0hWNVAwKAGThXXcp5FRQnzAN38JqwwQ9sGq0Hylx70ALdn5s1i6jJgbfWti6bOMVkXMJlmUdu9AFO3iL%2fMauwNhsDtUnlKkeFpiLtoAuytujHris2VMnNXQ2Vx3xUTJ3NAESBdh3VF5EZYEcYqRmAOKUAt90UASAgAAVcWXEOB1rOKsjYZSKnTLDGaAB3LNgVLFI6dKjWIk8VOkB7tQBJKBeQmKToa467hewvjGT8oOQa7NIiOd1Y3ii0LW63Cr93qaAFJ%2b2aDcpnLKNwrjj1rqdCuCY5IwgYSRkcmuZnUpM64xgkUARGm0402gBR1qxbnFwPcEfpVfGMc1PAwW7iY9AwzQBJSUUUAFdPpy7fD5%2fwBuSuYrpoQV0GIjoWNAE%2fhaw8%2fUJrl%2fux8D611E6NjJ6etYfgxy0NwhHG7Oa2pZTGxU8rQBTkjk6q2RUAcqxB61daUAYC4BqlcD5s0ARyyYHNVy4Jp0nJxTHjPWgAJycU8LUKZB5qZpAqHdxQA1QTcZ%2fhxUkhHT1pqyr5IOajVwXyaAJEttzirjQLbqHkxin2QDyDFUPElw8cnlrxQBIdatN%2flSRZXpuqxNZqYxPbndGwzXIZycmun8KXZkk%2byyHKnoDQAKSpqwihj1q3qNh5bkoPlPNZiuUODQBoIhHpUOow%2bfYyRkdRRFcKBzVlWEqEY60AcVYA212IwfumsnU0KX8w%2f2s1rzo0WtOh7NmqXiGHytSb3ANAGUabTjTaAAVKv%2btT6ioqkJwVNAE9FFFAAK6ePefD0B%2fh3kVzFdPpqG58OyYf8A1LZ20Aang0qLKcZGd9atwDu56Vy3h64a1vShPyO1dhcpvTIoAoSAYqrKTirDnHBqCTpQBSuJNibvSpbSeKePDcNmq14pa3kA6jmsWG8mj%2bUUAdU0SdQap3MDSKdpptlK8seWqzg9KAMXznizGxxzVyAFo9wqLUYQRnuDRYSMCI%2boNAGpaSmJwafrVr9shEqD5gKgHyGr9s%2b5dvUUAce6MjEMMEVt%2bGPkvVc1LqNiCSwHNP0m3MbgjrQB17BZ19a5%2fU7PyZsgcGtm1YoMNSahEs0NAHPwRgsM1eRfmGOlVkQq%2fwBKtFwiGRugFAHJ3%2fzeJGwM8qKoeKm3aofZQK0bAHUNdeRT8oYtn6Vh63L5upzHOcNjNAGeabTqbQAlPboKbTj90UAT0UZooAWuk8HXIS8kt3AKzKVwfWuaq1ptwba%2bilU%2fdYGgDWaNrfWFjbjEgB%2fOu5lUrCoHpXM%2bKrfD2%2bp2%2fwByUAkjsa39OvI7%2byQlgHC8igCnNG6ncarZya1ZU3xc1TEIAJoAoOvzkHowxWCLY%2fbfLx%2fFXRTLzx2pkdgDN9p7YoAkghWKIKKUjBzT8c02Zh0WgDO1IhVBxmmacvzKSKfqKF7dm7gUtgpECOTg4oAuMhzVqxH7zBqNGUmrNsoEvFAF2awM65XFFnprQyAtitG2Hy1KeOaAIjGM1BO%2b1SDVoEOeKo3zAHFAGc%2bPMyKz%2fEFz9m01gDgvwK03AA3twBXJa3ctqN8kMPKA7V9zQBY0L%2fQ9Mubt0yCNoNcpO2%2bVm9TXYeImj0zRYNPjP7wjL4rjD1oAbTadSGgBKefuimU%2f%2bEUAS0maKSgB2acpwc0ynCgDutFYa14ZnsmP7yLlKyYJ5bNEnjYgodsiVX8Kah9h1RNzYRjg1r%2bI7T7DqrS4zb3Qz7A0AdHC63FojqQcioXQgc1n%2bHLkCF7YnLp09xV65dmbBGKAKMoG44pYidpTPFTG1bZuJqHBU0AIQRUePWrJG4ZFRMlAFaRQ0bKR1FNiTbEq%2bgqztyKaEGKAEUhe9XbVsuKp%2bXyKtw%2fKQaAOhtz8gqVhuGKyor9I8bjV9LlJU3I1ADl2xDArKvd0k2R0q3JIeaqyzJDG0shwqjJoAyNduvs9h5QP7x%2bBWZ4WsPtWpea%2f%2brtxuJ9TVTUrv7ZO8xzzwgro9OiGi%2bGpJpeJZhnmgDkvFF59r1WQg8KcCsQ1NcSebM7nuc1CaAEppp1NNABTv4abTh92gCSkpaSgApQaSigCWKQo4ZTgg5r0S1kTxJ4baI4NxEPl9cjpXm4rY8O6u%2bk3yyA5jbhh7UAWoZZIJPlylzCcEHuPSuusJo9QgjlBBbHzD0NZniTT1niTWLI7g%2fLgVj2s80QFxaSEN%2fEnrQB2M2VDA%2fhiqzIu0A9TVWx1uK8TZJ8kw6g1fZcgGgCqBtbaaHXd0GKklQ5DCkyRwetAEBUAYANIoUqPWpsupAxwaQKqjlT9aAGrGDT2UouaepCimzPuFAEA5PNSRSSRnKninLErqCDzUpjCx46e9AEyStL%2fAFrE1e%2bW5l%2byRn92pzIf6Uup6sltGbe2YNI3BYdqwYjLct9nt0LyOeSOpoA0tGsl1LWQdv8Ao8PJ9KXxprCzSC0gPyJwcVoyXUXhzRGgCgXTjmuDnlaaVnY5JOaAIjTTSmkNACGmmnUhoASnD7tNxTh0NAElJSmigBKKKKAFpQaSloA6fwx4h%2bxH7Jd%2fPbPwQecVf1fQGTN9pTB7dvmwD92uLFbmieI7nTCIyfMgP3kNAEEKPPcbQdsgPWugt9SuLVFS7jbb0Dipp7DT9bX7Vpcqw3HUoTiqy3V1YOsWpW5aMcBscGgDWhvbaeMbJFye1SyIGxWcsGkX3zRP5MnYg4xVgWV%2fbpmCWOdOxLc0AW0HyFXHToayLLVEe5mt5SAQx2mpli1K7YRyOkKHgkHmr0fhSxUZeQs575oAaqBjwwIqMplj6VIdAkiP%2bj3eF9GNUZ7WeJist2igdxQBLLNFbDc8gGO2azL3Ubi9Qpb5SLu3rUyyaVApad2nl%2fOq7LdalJttofKi7k8DFAGIsUslx5MQLuTjjvXT2y23hi0M05El5IOF9KgkuLHQbfEJWa9PVvSuXvLuW8maWZyzMaAHanfzahdNNM2Se3pVE08000ANppp1JigBtIafTTQAlKOhpKctAEtJTqTFADaMU7FGKAEApcUtLigBKUUYoxQBLDPJA26N2U%2bxrfsfFUqQiC9iW5i%2f2hzXOYooA7GNvD98dwd7V26gHgVaTRsqDaauCp7Fq4YHFPSaRT8rsPxoA7qPQbsn5tTTFWG0a4AGdUAFcGLy4%2f57P%2bdKby4PWZz%2bNAHcHSMD59WGPr%2f9eqVxZ6PDzPfvKw6gGuSM8h6u350wux6k0AdDNqGk2zg2tsZGHdzVO98RXVwuyPEKdMIMVkmmkUAI7FjljkmmGnYoxQBGaQipCKTFAERFJipCKTFADDTDUhFMagBtKtJSrQB%2f%2f9k%3d&tags=Enter+Label1×tamp=1574829372&api_key=<api_key>&signature=1b6ec80224d716b245bb2c440cdb415e2c000885
When I use quality 100, the URI becomes much longer because of the encoded image. I use REST client for Unity (https://github.com/proyecto26/RestClient )
Hello.
Thank you for offering your help.
I figured it out. Since URI's have a length limit, I was exceeding it by placing the encoded image string directly in the URI. I should be sending the lengthy string within the body of the Post. The following worked fine:
public void UploadPic(string label)
{
byte[] bytes = ImageConversion.EncodeToJPG((Texture2D)snappedPic.texture, 100);
string encodedimage = Convert.ToBase64String(bytes);
string timestamp = System.DateTimeOffset.UtcNow.ToUnixTimeSeconds().ToString();
string signature =
"tags=" + label +
"×tamp=" + timestamp +
cloudinary_secret;
Debug.Log(CreateSignature(signature));
currentRequest = new RequestHelper
{
Uri = "https://api.cloudinary.com/v1_1/" + cloudinary_cloudname + "/image/upload",
Params = new Dictionary<string, string> {
{ "tags", label },
{ "timestamp", timestamp},
{ "api_key", cloudinary_apikey},
{ "signature", CreateSignature(signature)}
},
Body = new Models.CloudinaryUploadRequest
{
file = "data:image/png;base64," + encodedimage,
},
EnableDebug = true
};
RestClient.Post(currentRequest)
.Then(res =>
{
RestClient.ClearDefaultParams();
Debug.Log("Upload Response: " + res.Text);
})
.Catch(err => this.LogMessage("error", err.Message));
}
I am also having trouble uploading the base64 images. I am using the Node client. Will post the code below
Comment: is too long (maximum is 65536 characters after encoding) is what happens when I try to comment with the base64 str
Hi Jordan,
We can certainly investigate the issue with Base64 uploads you are seeing.
Could you please share your cloud name, this code snippet and the Base64 String (could be as a text file attachment) to us by submitting it through https://support.cloudinary.com/hc/en-us/requests/new? We will then be able to check our logs and provide more details on why these uploads are failing.
I'm trying to upload a signed picture with curl using the base64 and I'm receiving this error:
{"error": {
"message": "Unsupported source URL: data:image/png"
}
}
My example of curl:
How can I do to upload local image using curl?
Hi Renato,
Thanks for reaching out.
Your DATA URI must be first url-escaped. In your curl, try replacing
file=data:image/png;base64,withfile=data%3Aimage%2Fpng%3Bbase64%2CLet me know if this works for you or if you have any further questions.
Kind Regards,
Tia
Thanks for this Tia
Worked like a charm using encoding in param :))
Final result:
Hi Renato,
You are very welcome. I'm glad you got it working.
Kind Regards,
Tia
Please sign in to leave a comment.