In recent posts we’ve covered how to simply move your website’s assets, either static or dynamic to Cloudinary. In this post, we wanted to detail how you can upload photos to Cloudinary directly from your users’ browsers, without going through your own servers in the process. Below you will find a general explanation of our direct uploading solution, detailed integration examples and advanced tips.<\/p>\n
Uploading images directly to the cloud<\/h3>\n
The common way of uploading images from your web application to the cloud involves a form in your application that uploads an image to your server that in turn uploads the same image to the cloud.<\/p>\n
While this approach works, you might want to consider a more direct approach – delivering images directly from your users’ browser to the cloud without going through your intermediary server<\/strong><\/span>.<\/p>\n This approach is faster as it eliminates redundant file uploads<\/a>, it reduces load on your servers and it bypasses common limitations of shared web hosting (e.g. maximum size of allowed uploaded data, maximum number of concurrent requests to your application, etc.). In addition, the approach we detail below is simple to integrate with modern web browsers and includes many modern uploading UI elements such as drag & drop support, showing uploading progress, multiple file uploads support and more.<\/p>\n<\/div>\n Cloudinary’s service supports direct uploading to the cloud out-of-the-box. That\u2019s basically it. Your visitors will now be able to upload images using drag-and-drop support (or regular browsing) and images will be uploaded directly to Cloudinary with a progress bar support. Setting up direct uploads from your Rails application is quite simple. Here is a detailed explanation: Alternatively, If you use Asset Pipeline, \u00a0simply edit your application.js and add the following line:<\/p>\n 4.<\/strong><\/span>\u00a0Add the Cloudinary configuration parameters to your view:<\/p>\n 5.<\/strong><\/span>\u00a0Add cl_image_upload_tag<\/strong><\/em>to a form in your view.\u00a0This tag adds a file input element that is already configured to use direct uploading. In this example, we also perform an incoming transformation (limit to 1000×1000) and add a custom class to the HTML element:<\/p>\n This is it if you use CarrierWave<\/strong> for managing your image uploads in your Rails application, together with Cloudinary\u2019s plugin for CarrierWave<\/a>\u00a0(recommended).<\/p>\n Another great option is to use the Attachinary GEM<\/strong><\/a>\u00a0developed by Milovan Zogovic. Direct uploading to Cloudinary comes out of the box with Attachinary.<\/p>\n If you use uploading without CarrierWave or Attachinary, one last step is required – extracting the public ID and version of the uploaded image when the form is submitted to your controller:<\/p>\n Having stored the image_id, you can now display a directly uploaded image in the same way your display any other Cloudinary hosted image:<\/p>\n Setting up direct uploads from your Django application is quite similar to the RoR approach. Here is a detailed explanation:<\/p>\n 1.<\/strong><\/span>\u00a0Make sure you use Cloudnary\u2019s latest Python library.<\/p>\n 2.<\/strong><\/span>\u00a0In your Django template, load Cloudinary and include jQuery and all relevant jQuery plugins:<\/p>\n 3.<\/strong><\/span>\u00a0Add a file uploading tag to your form:<\/p>\n 4.<\/strong><\/span>\u00a0Edit your views.py<\/strong><\/em> and define the image form field as a CloudinaryJsFileField<\/strong><\/em> instance.\u00a0This class does all the behind-the-scenes magic for you. In the example below, the dummy save action receives the uploaded image.<\/p>\n In the examples above, we’ve shown detailed integration instructions based on Cloudinary\u2019s Ruby and Python client libraries. The same integration concept can be used together with our PHP<\/strong> library using the cloudinary_js_config and cl_image_upload_tag methods.<\/p>\n We will soon enhance our documentation to include detailed instructions for direct Cloudinary uploads using all of our other client libraries.<\/p>\n In the meantime, following are detailed instructions on how to use direct uploading in your development environment without our client libraries, using Cloudinary\u2019s jQuery plugin directly.<\/p>\n 1.<\/strong><\/span> Include jQuery and the following jQuery plugins in your HTML page:<\/p>\n jquery.js, jquery.ui.widget.js, jquery.iframe-transport.js, jquery.fileupload.js, jquery.cloudinary.js<\/strong><\/em><\/p>\n 2.<\/strong><\/span>\u00a0Define your account\u2019s Cloudinary configuration. Note that only public parameters are included (secrets must not be included in public HTML pages or client-side Javascript code):<\/p>\n 3.<\/strong><\/span>\u00a0Add a file input field to your HTML form.<\/p>\n For example:<\/p>\n The unescaped JSON content of data-form-data is:<\/p>\n That’s it. Image uploads by either browsing or drag-and-drop will head straight to the Cloudinary service. When done, the reference (public ID, version and signature) will be saved in the field you requested, for storing in your model at the server side.<\/p>\n You can also listen to various events in your Javascript code. For example:<\/p>\n Modern websites frequently use fancy upload widgets that include progress bars, live previews, multiple file uploads and more. The approach we\u2019’e shown above can be easily customized and extended to feature all of these advanced capabilities. Together with Cloudinary’s jQuery plugin, these great looking file upload widgets can upload your user’s photos directly to Cloudinary, generate preview thumbnails on-the-fly and deliver the resulting photos from a fast CDN.<\/p>\n Direct uploading is a powerful feature that many of our readers requested. Try it out and tell us what you think?<\/p>\n If you have a cool code sample in any development framework with or without a fancy UI, share it with our community<\/a><\/strong> and we will give you a generous one year discount for any of Cloudinary\u2019s paid plans.<\/p>\n UPDATE – July 2014<\/strong>: A simpler solution for direct uploading to the cloud, without server-side signature, was introduced. See\u00a0Direct upload made easy, from browser or mobile app to the cloud<\/a>.<\/p>\n Where do you host all of your website’s assets – still on your own web servers? In modern websites, images alone contribute to more than 50% of a website\u2019s load time, and recent studies show that even a 1 second delay in a page’s load speed can result in more than 5% loss in conversion. […]<\/p>\n","protected":false},"author":41,"featured_media":23366,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,119,183,257],"class_list":["post-21150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-file-upload","tag-jquery","tag-ruby-on-rails"],"acf":[],"yoast_head":"\nDirect uploading to Cloudinary<\/h3>\n
\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary\/image\/upload\/w_0.5\/mpshcbcqxrkrq2q16cl6aw.png\")
The process is based on Cloudinary’s jQuery plugin<\/a><\/strong> which in turn includes upload support based on jQuery File Upload Plugin<\/a><\/strong>, one of todays leading file upload solutions. Direct uploading is done using modern HTML5 cross origin resource sharing (CORS<\/a><\/strong>) and gracefully degrades to a seamless iframe based solution for older browsers.
\nTo get the Cloudinary upload solution working, we will go through the following steps (detailed more granularly later on):<\/p>\n\n
\nWhen the upload is complete, your image’s Cloudinary public ID will be added to your original form and submitted to your server. Use this public ID when you want to access the uploaded image in the future, either in its original form or after using Cloudinary’s on-demand image transformations. You can also get the plugin to call a Javascript callback routine when uploading to Cloudinary is completed.
\nWith our client libraries, setting up direct image uploads to Cloudinary is even simpler. Below are integration instructions for Ruby on Rails, Python \/ Django and other web dev platforms.
\nUPDATE – July 2014<\/strong>: A simpler solution for direct uploading to the cloud, without server-side signature, was introduced. See\u00a0Direct upload made easy, from browser or mobile app to the cloud<\/a>.<\/p>\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary\/image\/upload\/w_0.5\/dlkljlg1rzl8yo7th7wfhq.png\")
<\/p>\nRuby on Rails Integration<\/h3>\n
\n1.<\/strong><\/span>\u00a0Make sure you use the latest version of Cloudinary\u2019s Ruby GEM.
\n2.<\/strong><\/span>\u00a0Place cloudinary_cors.html<\/strong><\/em> in the public folder of your Rails app.\u00a0The file is available in the vendor\/assets\/html<\/strong><\/em> folder of the Ruby GEM.
\n3.<\/strong><\/span>\u00a0Make sure to include the relevant jQuery plugins in your view.\u00a0They are located in the vendor\/assets\/javascripts<\/strong><\/em>folder of the Ruby GEM.<\/p>\n<%= javascript_include_tag \"jquery.ui.widget\", \"jquery.iframe-transport\", \n \"jquery.fileupload\", \"jquery.cloudinary\" %>\n<\/pre>\n
\/\/= require cloudinary<\/pre>\n
<%= cloudinary_js_config %><\/pre>\n
<%= form_tag(some_path, :method => :post) do \u00a0%>\n <%= cl_image_upload_tag(:image_id, :crop => :limit, :width => 1000, :height => 1000, \n :html => {:class => \"image_upload\"}) %>\n\u00a0 \u00a0 ...\n<%= end %>\n<\/pre>\n\u00a0 if @params[:image_id].present?\n\u00a0 \u00a0 \u00a0preloaded = Cloudinary::PreloadedFile.new(params[:image_id])\n\u00a0 \u00a0 \u00a0# Verify signature by calling preloaded.valid?\n\u00a0 \u00a0 \u00a0@model.image_id = preloaded.identifier\n\u00a0 end\n<\/pre>\n
<%= cl_image_tag(@model.image_id, :crop => :fill, :width => 120, :height => 80) %>\n<\/pre>\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary\/image\/upload\/w_0.08\/kiblgce0r9sxpcacnyzxlq.png\")
<\/p>\nPython & Django Integration<\/h3>\n
{% load cloudinary %}\n{% load staticfiles %}\n<script src=\"{% static \"js\/jquery.js\" %}\" type=\"text\/javascript\"><\/script>\n{% cloudinary_includes %}<\/pre>\n<form action=\"\/posts\/save\" method=\"post\">\n\u00a0 {% csrf_token %}\n\u00a0 {{ form.image }}\n\u00a0 <input type=\"submit\" value=\"Submit\" \/>\n<\/form><\/pre>\nfrom django import forms\nimport cloudinary, cloudinary.uploader, cloudinary.forms\n\nclass UploadFileForm(forms.Form):\n image = cloudinary.forms.CloudinaryJsFileField()\n\ndef save(request):\n form = UploadFileForm(request.POST)\n cloudinary.forms.cl_init_js_callbacks(form, request)\n if request.method == 'POST':\n if form.is_valid():\n image = form.cleaned_data['image']\n return HttpResponseRedirect(image.url())\n return render_to_response('posts\/upload.html', \n RequestContext(request, {'form': form, 'post': p}))\n<\/pre>\nOther development frameworks and advanced usage<\/h3>\n
<script type=\"text\/javascript\">\n $.cloudinary.config({\"api_key\":\"1234567890\",\"cloud_name\":\"demo\"});\n<\/script><\/pre>\n\n
\n
<input name=\"file\" type=\"file\" \n class=\"cloudinary-fileupload\" data-cloudinary-field=\"image_upload\" \n data-form-data=\" ... html-escaped JSON data ... \" ><\/input>\n<\/pre>\n
{ \"timestamp\": 1345719094, \n \"callback\": \"https:\/\/www.example.com\/cloudinary_cors.html\",\n \"signature\": \"7ac8c757e940d95f95495aa0f1cba89ef1a8aa7a\", \n \"api_key\": \"1234567890\" }\n<\/pre>\n\n
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {\n $('.preview').html(\n $.cloudinary.image(data.result.public_id, \n { format: data.result.format, version: data.result.version, \n crop: 'scale', width: 200 })); \n $('.image_public_id').val(data.result.public_id); \n return true;\n});<\/pre>\nFancy upload UI<\/h3>\n
Further Reading on File Upload<\/span><\/strong><\/h3>\n
\n