Why Isnt My Image Upload on Heroku

• Add-ons
• All Add-ons
• Cloudinary - Image and Video Direction

This improver is operated by Cloudinary Ltd.

Manage, optimize, and deliver high-performance image and video experiences.

Cloudinary - Epitome and Video Management

Last updated September 03, 2020

Table of Contents

• Sample transformations
• Install the improver
• Using with Ruddy on Rails
• Using with Node.js
• Using with Django
• Local environment setup
• Direction panel
• Back up
• Additional resources

Cloudinary is a cloud service that offers a solution to a web application'due south unabridged epitome direction pipeline.

Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter contour image extraction in a snap, in any dimension and style to match your website's graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more than.

Cloudinary offers comprehensive APIs and assistants capabilities and is easy to integrate with any spider web application, existing or new.

Cloudinary provides URL and HTTP based APIs that can exist easily integrated with any Web development framework.

For Ruby on Rails, Django, and Node.js, Cloudinary provides libraries for simplifying the integration even farther.

Sample transformations

Cloudinary provides a variety of transformations to uploaded images - all available simply by modifying the image URL at runtime. For instance, this sample epitome is automatically available via a CDN at the following URL:

            http://res.cloudinary.com/demo/prototype/upload/sample.jpg                      

Generating a 150x100 version of the sample paradigm and downloading it through a CDN:

            http://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill/sample.jpg                      

Converting to a 150x100 PNG with rounded corners of 20 pixels:

            http://res.cloudinary.com/demo/epitome/upload/w_150,h_100,c_fill,r_20/sample.png                      

For plenty more transformation options, see our image transformations documentation.

Generating a 120x90 thumbnail based on automatic face detection of the Facebook profile motion picture of Neb Clinton:

            http://res.cloudinary.com/demo/image/facebook/c_thumb,g_face,h_90,w_120/billclinton.jpg                      

For more than details, encounter our documentation for embedding Facebook and Twitter profile pictures.

For a more advanced example, take a look at the following Cloudinary URL that generates the image below:

            http://res.cloudinary.com/demo/image/facebook/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_techcrunch,g_south_west,x_5,y_5,w_50/a_10/AriannaHuffington.png                      

Supplant demo in all examples above with your Cloudinary's cloud name you become afterwards installing the add-on.

What happened here? Simply accessing the above URL told Cloudinary to remotely fetch Arriana Huffington's Facebook profile picture, created a 150x150px thumbnail using face detection based cropping, rounded the image's corners, added a sepia effect, converted information technology to a transparent PNG format, added a watermark layer on the bottom-left corner, rotated the image past ten degrees clock-wise and ultimately delivered the resulting image through a fast CDN using smart caching techniques. Isn't that great?

Install the addition

To install the free version of Cloudinary addition, simply run:

            $ heroku addons:create cloudinary -----> Calculation cloudinary to myapp... done                      

You can also practice this from the Resources department of your awarding's configuration page on Heroku.

Using with Ruby on Rail

Getting started guide

Take a look at our Getting started guide for Ruby on Rails.

Installation

Edit your Gemfile, add the following line and run parcel install

            gem 'cloudinary'                      

If you would like to use our optional integration module of paradigm uploads with ActiveRecord using CarrierWave, install CarrierWave precious stone:

Edit your Gemfile and run bundle install:

            gem 'carrierwave' gem 'cloudinary'                      

Annotation: The CarrierWave gem should be loaded earlier the Cloudinary gem.

Upload

Assuming y'all accept your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following instance uploads a local JPG to the cloud:

            Cloudinary::Uploader.upload("my_picture.png")  # => {"public_id"=>"aamzahmqpc0irmlrcakyg", "version"=>1336304198, "signature"=>"abcdefgc024acceb1c5baa8dca46797137fa5ae0c3", "width"=>80, "peak"=>120, "format"=>"png", "resource_type"=>"epitome", "url"=>"http://res.cloudinary.com/demo/image/upload/v1336304198/aamzahmqpc0irmlrcakyg.png", "secure_url"=>"https://d3jpl91pxevbkh.cloudfront.net/demo/paradigm/upload/v1336304198/aamzahmqpc0irmlrcakyg.png"}                      

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

            cl_image_tag("aamzahmqpc0irmlrcakyg.png")  # => http://res.cloudinary.com/demo/image/upload/aamzahmqpc0irmlrcakyg.png                      

You can also specify your ain public ID:

            Cloudinary::Uploader.upload("http://world wide web.example.com/image.jpg", :public_id => 'sample_remote')  # => {"public_id"=>"sample_remote", "version"=>1336304441, "signature"=>"abcde20044f8c8ba71fb31ebe81e9d72ec8763dd", "width"=>100, "height"=>100, "format"=>"jpg", "resource_type"=>"image", "url"=>"http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg", "secure_url"=>"https://d3jpl91pxevbkh.cloudfront.net/demo/paradigm/upload/v1336304441/sample_remote.jpg"}                      

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

            cl_image_tag("sample_remote.jpg")  # => http://res.cloudinary.com/demo/prototype/upload/sample_remote.jpg                      

See our documentation for plenty more options of direct uploading to the deject from your Ruby code or direct from the browser.

Embedding and transforming images

Any image uploaded to Cloudinary tin be transformed and embedded using powerful view helper methods:

The post-obit example generates an image of an uploaded sample image while transforming it to fill a 100x150 rectangle:

            cl_image_tag("sample.jpg", :width => 100, :meridian => 150, :crop => :fill)                      

Another instance, embedding a smaller version of an uploaded paradigm while generating a 90x90 face detection based thumbnail:

            cl_image_tag("woman.jpg", :width => xc, :summit => 90, :ingather => :pollex, :gravity => :face up)                      

You can provide either a Facebook name or a numeric ID of a Facebook profile or a fan page.

Embedding a Facebook contour to friction match your graphic design is very simple:

            facebook_profile_image_tag("billclinton.jpg", :width => 90, :pinnacle => 130, :crop => :fill, :gravity => :north_west)                      

Same goes for Twitter:

            twitter_name_profile_image_tag("billclinton.jpg")                      

See our documentation for more than information well-nigh displaying and transforming images in Rails.

CarrierWave integration

Cloudinary's Cherry jewel includes an optional plugin for CarrierWave. If you lot already employ CarrierWave, just include Cloudinary::CarrierWave to switch to cloud storage and image processing in the cloud.

            class PictureUploader < CarrierWave::Uploader::Base   include Cloudinary::CarrierWave     ...   end                      

For more details on CarrierWave integration see our documentation.

Nosotros also published an interesting blog post virtually Ruby on Runway image uploads with CarrierWave and Cloudinary.

Face detection based cropping

Cloudinary can automatically crop a clear picture of a person in a way that the face of the person is in the center of the derived film.

For example, we want to display a face thumbnail of the following uploaded image:

The following view helper method would generate a 100x100 thumbnail while using face detection for correctly cropping the paradigm:

            cl_image_tag("face_top.jpg", :width =>100, :height => 100, :crop => :thumb, :gravity => :confront)                      

Cloudinary also supports fill cropping based on the position of a detected confront and can ingather past detecting multiple faces in the same paradigm.

See our face detection documentation for more details. Additional examples are bachelor in our web log post.

Sprite generation

A sprite is a single image that combines multiple images needed in your web awarding. In this example, the browser downloads only a unmarried image while the CSS lawmaking directs the browser to the portion of the sprite to display for each contained image. Sprites are a bang-up way to improve user experience past reducing network overhead and bypassing download limitations.

Cloudinary supports generating sprites with multiple uploaded images. Simply assign tags to uploaded images so you can group multiple images into a single sprite sharing the same tag.

Y'all can assign tags while uploading images. For example:

            Cloudinary::Uploader.upload("amazon_logo.png", :tags => ["logo"])                      

Yous tin can also manage tag assignment using our API. The post-obit case adds the logo tag to 4 images with the given public IDs.

            Cloudinary::Uploader.add_tag('logo', ['google_logo', 'apple_logo', 'amazon_logo', 'microsoft_logo'])                      

Generating a sprite can be done either dynamically when showtime accessing its URL or eagerly. The post-obit command generates a sprite with all images sharing the logo tag:

            Cloudinary::Uploader.generate_sprite('logo')                      

In club to embed sprite based images in your HTML views, simply include the automatically generated CSS of the sprite:

            cl_sprite_tag("logo")                      

This would generate a Stylesheet link tag:

            <link href="http://res.cloudinary.com/demo/image/sprite/logo.css" rel="stylesheet" type="text/css"/>                      

In your HTML lawmaking, only employ the public ID of the original uploaded images as the class name:

            <div class="amazon_logo"/>                      

You can also automatically generate sprites while transforming all included images to fit in a certain dimension. The following example shows how to generate a sprite of the logo tag while transforming all images to fit in a 120x50 rectangle:

            cl_sprite_tag("logo", :width => 120, :height => fifty, :crop => :fit)                      

The following dynamic URLs let accessing the generated CSS and PNG of the sprite:

            http://res.cloudinary.com/demo/image/sprite/w_120,h_50,c_fit/logo.css  http://res.cloudinary.com/demo/image/sprite/w_120,h_50,c_fit/logo.png                      

For more details, see our documentation of sprite generation in general and sprite generation in Rails.

Using with Node.js

Getting started guide

Take a expect at our Getting started guide for Node.js.

Installation

Edit your package.json, add cloudinary to the dependencies section. For example:

            {   "name": "node-example",   "version": "0.0.1",   "dependencies": {     "express": "2.5.ten",     "cloudinary": ""   },   "engines": {     "node": "0.6.x"   } }                      

Run npm install to install the Cloudinary npm in your local environment:

            $ npm install npm http Go https://registry.npmjs.org/cloudinary ... cloudinary@0.ii.i ./node_modules/cloudinary  ----- temp@0.4.0  ----- underscore@1.iii.iii  ----- coffee-script@1.3.iii                      

Cloudinary npm will be automatically installed and bachelor for your awarding on Heroku when you push a new version (git push button heroku master).

Upload

Assuming you have your Cloudinary configuration parameters divers (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

            var cloudinary = crave('cloudinary') cloudinary.uploader.upload("my_picture.jpg", function(result) { panel.log(result) })                      

Below is an example of an upload'due south result:

            { public_id: '4srvcynxrf5j87niqcx6w',   version: 1340625837,   signature: '01234567890abcdef01234567890abcdef012345',   width: 200,   height: 200,   format: 'jpg',   resource_type: 'image',   url: 'http://res.cloudinary.com/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg',   secure_url: 'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg' }                      

The uploaded image is assigned a randomly generated public ID. The epitome is immediately available for download through a CDN:

            cloudinary.url("4srvcynxrf5j87niqcx6w.jpg")  // http://res.cloudinary.com/demo/paradigm/upload/4srvcynxrf5j87niqcx6w.jpg                      

You tin as well specify your own public ID:

            cloudinary.uploader.upload("http://www.example.com/image.jpg",   function(result) {     panel.log(upshot)     }, {public_id: 'sample_remote'})  { public_id: 'sample_remote',   version: 1336304441,   signature: 'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd',   width: 100,   height: 100,   format: 'jpg',   resource_type: 'image',   url: 'http://res.cloudinary.com/demo/prototype/upload/v1336304441/sample_remote.jpg',   secure_url: 'https://d3jpl91pxevbkh.cloudfront.cyberspace/demo/image/upload/v1336304441/sample_remote.jpg' }                      

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

            cloudinary.url("sample_remote.jpg")  // http://res.cloudinary.com/demo/image/upload/sample_remote.jpg                      

See our documentation for plenty more than options of uploading to the cloud from your Node.js code or directly from the browser.

You can likewise use cloudinary.upload_stream to write to the uploader every bit a stream:

            var fs = require('fs'); var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); }); var file_reader = fs.createReadStream('my_picture.jpg', {encoding: 'binary'}).on('information', stream.write).on('end', stream.end);                      

Hither's a sample code that uses the Express framework for displaying an upload grade, uploading an epitome to Cloudinary using streams and displaying a transformed version of the uploaded image:

            var express = crave('limited'); var fs = require('fs');  var cloudinary = require('cloudinary');  var app = express.createServer(express.logger()); app.use(express.bodyParser())  app.get('/', function(req, res) {   res.send('<class method="post" enctype="multipart/form-data">'     + '<p>Public ID: <input type="text" name="title"/></p>'     + '<p>Paradigm: <input blazon="file" proper noun="prototype"/></p>'     + '<p><input type="submit" value="Upload"/></p>'     + '</form>'); });  app.post('/', function(req, res, next) {   stream = cloudinary.uploader.upload_stream(function(result) {     console.log(upshot);     res.send('Done:<br/> <img src="' + result.url + '"/><br/>' +              cloudinary.paradigm(result.public_id, { format: "png", width: 100, pinnacle: 130, crop: "fill up" }));   }, { public_id: req.torso.title } );   fs.createReadStream(req.files.image.path, {encoding: 'binary'}).on('data', stream.write).on('end', stream.stop); });  if (!module.parent) {   var port = process.env.PORT || 5000;   app.listen(port, function() {     console.log("Listening on " + port);   }); }                      

Embedding and transforming images

Whatsoever image uploaded to Cloudinary can exist transformed and embedded using powerful view helper methods:

The following example generates the URL for accessing an uploaded sample epitome while transforming it to fill a 100x150 rectangle:

            cloudinary.url("sample.jpg", { width: 100, height: 150, crop: "fill" })                      

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

            cloudinary.url("adult female.jpg", { width: xc, acme: 90, crop: "thumb", gravity: "face up" })                      

You can provide either a Facebook proper noun or a numeric ID of a Facebook profile or a fan folio.

Embedding a Facebook profile to match your graphic design is very simple:

            cloudinary.url("billclinton.jpg", { width: 90, acme: 130, type: "facebook", crop: "fill", gravity: "north_west"})                      

Same goes for Twitter:

            cloudinary.url("billclinton.jpg", { type: "twitter_name" })                      

You can also generate image tags for your HTML folio by using the cloudinary.image method. The syntax is very similar to the cloudinary.url method:

            cloudinary.image("sample", { format: "png", width: 100, top: 100, crop: "fill"})  // <img src='http://res.cloudinary.com/demo/epitome/upload/c_fill,h_100,w_100/sample.png' acme='100' width='100'/>                      

See our documentation for more data most displaying and transforming images in Node.js.

For more transformation examples, come across our image transformation documentation.

Using with Django

Getting started guide

Have a look at our Getting started guide for Python & Django.

Installation

Install Cloudinary's Python library past running:

            $ pip install cloudinary  Downloading/unpacking cloudinary   Downloading cloudinary-0.2.one.tar.gz   Running setup.py egg_info for package cloudinary  Installing collected packages: cloudinary   Running setup.py install for cloudinary  Successfully installed cloudinary Cleaning up...                      

Create a pip requirements file which declares the required Python modules:

            $ pip freeze > requirements.txt                      

The requirements.txt file should include all required packages including Cloudinary's:

            $ cat requirements.txt  Django==ane.4 cloudinary==0.two.1 distribute==0.six.27 dj-database-url==0.2.ane poster==0.viii.1 psycopg2==2.four.5 wsgiref==0.1.2                      

Cloudinary's package will exist automatically installed and available for your awarding on Heroku when you push a new version (git push heroku master).

Upload

Bold you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret divers via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very elementary.

The following instance uploads a local JPG to the cloud:

            cloudinary.uploader.upload("my_picture.jpg")                      

Below is an example of an upload's result:

            {u'secure_url': u'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg', u'public_id': u'4srvcynxrf5j87niqcx6w', u'format': u'jpg', u'url': u'http://res.cloudinary.com/demo/epitome/upload/v1336304441/sample_remote.jpg', u'height': 200, u'width': 200, u'version': 1340625837, u'signature': u'01234567890abcdef01234567890abcdef012345', u'resource_type': u'epitome'}  The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:  ```python cloudinary.utils.cloudinary_url("4srvcynxrf5j87niqcx6w.jpg")  # http://res.cloudinary.com/demo/image/upload/4srvcynxrf5j87niqcx6w.jpg                      

You lot can besides specify your own public ID:

            cloudinary.uploader.upload("http://www.case.com/image.jpg", public_id = 'sample_remote')  # {u'secure_url': u'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1336304441/sample_remote.jpg', u'public_id': u'sample_remote', u'format': u'jpg', u'url': u'http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg', u'height': 100, u'width': 100, u'version': 1336304441, u'signature': u'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd', u'resource_type': u'prototype'}   The uploaded image is assigned with the given `sample_remote` public ID. The image is immediately available for download through a CDN:  ```python cloudinary.utils.cloudinary_url("sample_remote.jpg")  # http://res.cloudinary.com/demo/image/upload/sample_remote.jpg                      

See our documentation for enough more than options of uploading to the deject from your Python & Django code or directly from the browser.

Embedding and transforming images

Any image uploaded to Cloudinary can exist transformed and embedded using powerful view helper methods:

The post-obit example generates the URL for accessing an uploaded sample prototype while transforming it to fill a 100x150 rectangle:

            cloudinary.utils.cloudinary_url("sample.jpg", width = 100, elevation = 150, crop = "fill up")                      

Another example, embedding a smaller version of an uploaded paradigm while generating a 90x90 face detection based thumbnail:

            cloudinary.utils.cloudinary_url("woman.jpg", width = 90, height = xc, ingather = "pollex", gravity = "face")                      

You tin can provide either a Facebook proper name or a numeric ID of a Facebook contour or a fan page.

Embedding a Facebook profile to match your graphic design is very simple:

            cloudinary.utils.cloudinary_url("billclinton.jpg", width = 90, height = 130, blazon = "facebook",crop => "make full", gravity => "north_west")                      

Same goes for Twitter:

            cloudinary.utils.cloudinary_url("billclinton.jpg", type = "twitter_name")                      

Come across our documentation for more information well-nigh displaying and transforming images in Python & Django.

For more transformation examples, see our image transformation documentation.

For integrating with your Django application, you lot tin can use the following classes and template tags:

cloudinary.CloudinaryImage

Represents an prototype stored in Cloudinary.

Usage: img = cloudinary.CloudinaryImage("sample", format="png")

            img.url(width=100, height=100, crop="fill") # http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png  img.image(width=100, height=100, crop="make full") # <img src="http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png" width="100" peak="100"/>                      

cloudinary.models.CloudinaryField

Allows you to store references to Cloudinary stored images in your model. Returns an CloudinaryImage object.

            class Poll(models.Model):   # ...   image = cloudinary.models.CloudinaryField('epitome')                      

cloudinary.forms.CloudinaryField

Form field that allows you to validate and convert to CloudinaryImage a signed Cloudinary image reference (see here).

Template tags

Initialization:

            {% load cloudinary %}                      

Epitome tags tin exist generated from public_id or from CloudinaryImage object using:

            {% cloudinary image width=100, height=100, ingather="fill up" %} # <img src="http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png" width="100" peak="100" crop="scale"/>                      

The following tag generates an html form that tin can be used to upload the file directly to Cloudinary. The upshot is a redirect to the supplied callback_url.

            {% cloudinary_direct_upload callback_url %}                      

Optional parameters:

            public_id - The name of the uploaded file in Cloudinary                      

Local surround setup

After provisioning the add-on it's necessary to locally replicate the config vars and so your evolution environment can operate confronting the service.

You tin can use heroku config for displaying Cloudinary's environment variables:

            $ heroku config | grep CLOUDINARY CLOUDINARY_URL      => cloudinary://123456789012345:abcdeghijklmnopqrstuvwxyz12@n07t21i7                      

Though less portable it'southward also possible to prepare local surround variables using consign CLOUDINARY_URL=value.

Utilise Heroku Local to configure, run and manage process types specified in your app's Procfile. Heroku Local reads configuration variables from a .env file. Use the post-obit control to add the Cloudinary values retrieved from heroku config to .env.

            $ heroku config -southward | grep CLOUDINARY >> .env $ more .env                      

Credentials and other sensitive configuration values should not be committed to a publicly available source-command. In Git exclude the .env file with: repeat .env >> .gitignore.

Management panel

The Management Console allows y'all to scan through uploaded images and generated transformations. You tin also view your usage reports and cloud settings. Comprehensive documentation is likewise available.

The dashboard can be accessed via the CLI:

            $ heroku addons:open cloudinary Opening cloudinary for myapp...                      

or by visiting the Heroku Dashboard and selecting the application in question. Select Cloudinary from the Add-ons menu.

Support

All Cloudinary back up and runtime problems should exist logged with Heroku Back up at https://support.heroku.com. Any non-back up related issues or production feedback is welcome at info@cloudinary.com.

Boosted resources

Additional resources are available at:

• Website
• Features overview
• Twitter Profile
• Documentation
• Cognition Base
• Documentation for Ruby on Rails integration
• Documentation for Python & Django
• Documentation for Node.js
• Documentation for jQuery
• Epitome transformations documentation
• Upload API documentation

Our open-source customer libraries can be found at:

• Reddish on Rails
• Python & Django
• Node.js
• jQuery
• Coffee

whitworthpubilty.blogspot.com

Source: https://devcenter.heroku.com/articles/cloudinary

Share this post