{"id":244310,"date":"2016-08-09T05:34:28","date_gmt":"2016-08-09T12:34:28","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244310"},"modified":"2019-01-04T17:47:58","modified_gmt":"2019-01-05T00:47:58","slug":"image-upload-manipulation-react","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/image-upload-manipulation-react\/","title":{"rendered":"Image Upload and Manipulation with React"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by <a href=\"http:\/\/damonbauer.me\/\" rel=\"noopener\">Damon Bauer<\/a>, who tackles a pretty common web developer job: offering user image uploads. I&#8217;d hesitate to call it <em>easy<\/em>, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it used to be. Damon even <a href=\"https:\/\/github.com\/damonbauer\/react-cloudinary\" rel=\"noopener\">does it<\/a> entirely in the browser!<\/em><\/p>\n<p><!--more--><\/p>\n<p>A common thing web developers need to do is give users the ability to upload images. At first it might seem trivial, but there are things to think about when building an image upload component. Here are just some of the considerations:<\/p>\n<ul>\n<li>What image types will you allow?<\/li>\n<li>What size do the images need to be? How will that impact performance?<\/li>\n<li>What aspect ratio should the images be?<\/li>\n<li>How will the images be moderated? Inappropriate images be caught?<\/li>\n<li>Where will the images be hosted? How will that be administered?<\/li>\n<\/ul>\n<p>Server-side tools such as <a href=\"https:\/\/github.com\/thoughtbot\/paperclip\" rel=\"noopener\">Paperclip<\/a> and <a href=\"http:\/\/github.com\/JimBobSquarePants\/ImageProcessor\" rel=\"noopener\">ImageProcessor<\/a> provide a solution for most of these concerns. Unfortunately, there isn&#8217;t an off-the-shelf tool to use in a single page app (that I&#8217;ve found). I&#8217;ll show you how I solved this inside a <a href=\"https:\/\/facebook.github.io\/react\/\" rel=\"noopener\">React<\/a> application that doesn&#8217;t use a server-side language at all.<\/p>\n<p>Here&#8217;s a little demo of what we&#8217;ll be building:<\/p>\n<figure id=\"post-244313\" class=\"align-none media-244313\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/Dropzone.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<h3>Toolkit<\/h3>\n<p>The three tools I used include:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/okonet\/react-dropzone\" rel=\"noopener\">react-dropzone<\/a> to accept an image from a user<\/li>\n<li><a href=\"https:\/\/github.com\/visionmedia\/superagent\" rel=\"noopener\">superagent<\/a> to transfer the uploaded image<\/li>\n<li><a href=\"https:\/\/cloudinary.com\" rel=\"noopener\">Cloudinary<\/a> to store and manipulate the images<\/li>\n<\/ul>\n<h3>Setting Up Cloudinary<\/h3>\n<p><a href=\"http:\/\/cloudinary.com\/\" rel=\"noopener\">Cloudinary<\/a> is a cloud-based service where you can store, manipulate, manage and serve images. I chose to use Cloudinary because it has a free tier that includes all the features I need. You&#8217;ll need at least a free account to get started.<\/p>\n<p>Let&#8217;s say you want to crop, resize, and add a filter to uploaded images. Cloudinary has the concept of <em>transformations<\/em>, which are chained together to modify images however you need. Once uploaded, the transformations occur, modifying and storing the new image.<\/p>\n<p>In the Cloudinary dashboard, go to <b>Settings > Upload<\/b> and select &#8220;Add upload preset&#8221; under Upload presets.<\/p>\n<figure id=\"post-244314\" class=\"align-none media-244314\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/AddPreset.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>On the following screen, change &#8220;Mode&#8221; to &#8220;Unsigned&#8221;. This is necessary so you can upload right to Cloudinary without negotiating a private key using a server-side language.<\/p>\n<figure id=\"post-244315\" class=\"align-none media-244315\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/Unsigned.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Add any transformations by selecting &#8220;Edit&#8221; in the &#8220;Incoming Transformations&#8221; section. This is where you can crop, resize, change quality, rotate, filter, etc. Save the preset, and that&#8217;s it! You now have a place to upload, manipulate, store, and serve images for your app. Take note of the <em>preset name<\/em>, as we&#8217;ll use it later on. Let&#8217;s move on to the code.<\/p>\n<h3>Accepting User Input<\/h3>\n<p>To handle the image upload, I used <a href=\"https:\/\/github.com\/okonet\/react-dropzone\" rel=\"noopener\">react-dropzone<\/a>. It includes features such as drag and drop, file type restriction, and multiple file uploading.<\/p>\n<p>To begin, install the dependencies. In your command line, run:<\/p>\n<pre rel=\"Command Line\"><code>npm install react react-dropzone superagent --save<\/code><\/pre>\n<p>Then import <code>React<\/code>, <code>react-dropzone<\/code>, and <code>superagent<\/code> into your component. I&#8217;m using the ES6 <code>import<\/code> syntax:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React from 'react';\r\nimport Dropzone from 'react-dropzone';\r\nimport request from 'superagent';<\/code><\/pre>\n<p>We&#8217;ll use <code>superagent<\/code> later on. For now, in your component&#8217;s render method, include a <code>react-dropzone<\/code> instance:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">export default class ContactForm extends React.Component {\r\n\r\n  render() {\r\n    &lt;Dropzone\r\n      multiple={false}\r\n      accept=\"image\/*\"\r\n      onDrop={this.onImageDrop.bind(this)}&gt;\r\n      &lt;p&gt;Drop an image or click to select a file to upload.&lt;\/p&gt;\r\n    &lt;\/Dropzone&gt;\r\n  }<\/code><\/pre>\n<p class=\"explanation\">Readyer Lucas Recoaro wrote in saying that the following Dropzone snippet works better for him. Seems likely the syntax changed in a newer verson of the lib.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">&lt;Dropzone\r\n  onDrop={this.onImageDrop.bind(this)}\r\n  accept=\"image\/*\"\r\n  multiple={false}&gt;\r\n    {({getRootProps, getInputProps}) =&gt; {\r\n      return (\r\n        &lt;div\r\n          {...getRootProps()}\r\n        &gt;\r\n          &lt;input {...getInputProps()} \/&gt;\r\n          {\r\n          &lt;p&gt;Try dropping some files here, or click to select files to upload.&lt;\/p&gt;\r\n          }\r\n        &lt;\/div&gt;\r\n      )\r\n  }}\r\n&lt;\/Dropzone&gt;<\/code><\/pre>\n<p>Here&#8217;s a rundown of what this component is doing:<\/p>\n<ul>\n<li><code>multiple={false}<\/code> allows only one image to be uploaded at a time.<\/li>\n<li><code>accept=\"image\/*\"<\/code> allows any image type. You can be more explicit to limit only certain file types, e.g. <code>accept=\"image\/jpg,image\/png\"<\/code>.<\/li>\n<li><code>onDrop<\/code> is a method that is fired when an image is uploaded.<\/li>\n<\/ul>\n<p>When using the React ES5 class syntax (<code>React.createClass<\/code>), all methods are &#8220;autobound&#8221; to the class instance. The code in this post uses the ES6 class syntax (<code>extends React.Component<\/code>), which does not provide autobinding. That&#8217;s why we use <code>.bind(this)<\/code> in the <code>onDrop<\/code> prop. (If you aren&#8217;t familiar with <code>.bind<\/code>, you can <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/bind\" rel=\"noopener\">read about it here<\/a>.<\/p>\n<h3>Handling the Image Drop<\/h3>\n<p>Now, let&#8217;s set up the method to do something when an image is uploaded.<\/p>\n<p>First, set up a <code>const<\/code> for two pieces of important upload information: <\/p>\n<ol>\n<li>The upload preset ID (created automatically for you when you created your upload preset)<\/li>\n<li>Your Cloudinary upload URL<\/li>\n<\/ol>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ import statements\r\n\r\nconst CLOUDINARY_UPLOAD_PRESET = 'your_upload_preset_id';\r\nconst CLOUDINARY_UPLOAD_URL = 'https:\/\/api.cloudinary.com\/v1_1\/your_cloudinary_app_name\/upload';\r\n\r\nexport default class ContactForm extends React.Component {\r\n\/\/ render()<\/code><\/pre>\n<p>Next, add an entry to the component&#8217;s initial state (using <code>this.setState<\/code>); I&#8217;ve called this <code>uploadedFileCloudinaryUrl<\/code>. Eventually, this will hold an uploaded image URL created by Cloudinary. We&#8217;ll use this piece of state a little bit later.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">export default class ContactForm extends React.Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      uploadedFileCloudinaryUrl: ''\r\n    };\r\n  }<\/code><\/pre>\n<p>The <code>react-dropzone<\/code> documentation states that it will always return an array of the uploaded file(s), so we&#8217;ll pass that array to the <code>files<\/code> parameter of the <code>onImageDrop<\/code> method. As we only allow one image at a time, we know that the image will always be in the first position of the array.<\/p>\n<p>Call <code>handleImageUpload<\/code>, passing the image (<code>files[0]<\/code>) to this method. I broke this into a separate method, following the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Single_responsibility_principle\" rel=\"noopener\">Single responsibility principle<\/a>. Essentially, this principle teaches you to keep methods compact and only do one thing.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">export default class ContactForm extends React.Component {\r\n\r\n  constructor(props) { ... }\r\n\r\n  onImageDrop(files) {\r\n    this.setState({\r\n      uploadedFile: files[0]\r\n    });\r\n\r\n    this.handleImageUpload(files[0]);\r\n  }\r\n\r\n  render() { ... }\r\n\r\n}<\/code><\/pre>\n<h3>Handling the Image Upload and Transfer<\/h3>\n<p>First, use <code>superagent<\/code> to POST to Cloudinary using the two <code>const<\/code> we set up earlier. Using the <a href=\"https:\/\/visionmedia.github.io\/superagent\/#field-values\" rel=\"noopener\"><code>.field<\/code> method<\/a> gives us the ability to attach data to the POST request. These pieces of data contain all the information Cloudinary needs to handle the uploaded image. By calling <code>.end<\/code>, the request is performed and a callback is provided.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">export default class ContactForm extends React.Component {\r\n\r\n  constructor(props) { ... }\r\n\r\n  onImageDrop(files) { ... }\r\n\r\n  handleImageUpload(file) {\r\n    let upload = request.post(CLOUDINARY_UPLOAD_URL)\r\n                        .field('upload_preset', CLOUDINARY_UPLOAD_PRESET)\r\n                        .field('file', file);\r\n\r\n    upload.end((err, response) =&gt; {\r\n      if (err) {\r\n        console.error(err);\r\n      }\r\n\r\n      if (response.body.secure_url !== '') {\r\n        this.setState({\r\n          uploadedFileCloudinaryUrl: response.body.secure_url\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  render() { ... }\r\n\r\n}<\/code><\/pre>\n<p>Inside of the <code>.end<\/code> callback, I&#8217;m logging any errors that are returned. It&#8217;s probably best to tell the user that an error occurred as well.<\/p>\n<p>Next, we check if the response we received contains a URL that is not an empty string. This means that the image was uploaded and manipulated and Cloudinary generated a URL. For example, if a user was editing their profile and uploaded an image, you could store the new image URL from Cloudinary in your database.<\/p>\n<p>With the code we&#8217;ve written thus far, a user can drop an image and the component will send it to Cloudinary and receives a transformed image URL for us to use.<\/p>\n<h3>Render, continued<\/h3>\n<p>The last part of the component is a <code>div<\/code> that holds a preview of the uploaded image.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">export default class ContactForm extends React.Component {\r\n\r\n  constructor(props) { ... }\r\n\r\n  onImageDrop(files) { ... }\r\n\r\n  handleImageUpload(file) { ... }\r\n\r\n  render() {\r\n    &lt;div&gt;\r\n      &lt;div className=\"FileUpload\"&gt;\r\n        ...\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div&gt;\r\n        {this.state.uploadedFileCloudinaryUrl === '' ? null :\r\n        &lt;div&gt;\r\n          &lt;p&gt;{this.state.uploadedFile.name}&lt;\/p&gt;\r\n          &lt;img src={this.state.uploadedFileCloudinaryUrl} \/&gt;\r\n        &lt;\/div&gt;}\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  }<\/code><\/pre>\n<p>The ternary operator outputs <code>null<\/code> (nothing) if the <code>uploadedFileCloudinaryUrl<\/code> state is an empty string. Recall that by default, we set the component&#8217;s <code>uploadedFileCloudinaryUrl<\/code> state to an empty string; this means that when the component is rendered, this <code>div<\/code> will be empty.<\/p>\n<p>However, When Cloudinary responds with a URL, the state is no longer an empty string because we updated the state in <code>handleImageUpload<\/code>. At this point, the component will re-render, displaying the name of the uploaded file and a preview of the transformed image.<\/p>\n<h3>Wrap Up<\/h3>\n<p>This is just the groundwork for an image upload component. There are plenty of additional features you could add, like:<\/p>\n<ul>\n<li>Allowing uploading multiple images<\/li>\n<li>Removal of uploaded images<\/li>\n<li>Displaying errors if uploading fails for any reason<\/li>\n<li>Using a mobile device&#8217;s camera as the upload source<\/li>\n<\/ul>\n<p>So far, this set up has worked well for my needs. Having to hardcode the upload preset isn&#8217;t perfect, but I&#8217;ve yet to experience any issues with it.<\/p>\n<p>Hopefully you&#8217;ve gotten an understanding of how you can upload, store and manipulate images using React without a server-side language. If you have any questions or comments, I&#8217;d love to hear them! I&#8217;ve created a repository where you can <a href=\"https:\/\/github.com\/damonbauer\/react-cloudinary\" rel=\"noopener\">see this code in action<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I&#8217;d hesitate to call it easy, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it [&hellip;]<\/p>\n","protected":false},"author":248328,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[806,585,557],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":359708,"url":"https:\/\/css-tricks.com\/new-age-dam-apis-to-simplify-your-media-workflows\/","url_meta":{"origin":244310,"position":0},"title":"New Age DAM APIs to Simplify Your Media Workflows","date":"December 30, 2021","format":false,"excerpt":"High-velocity, online businesses produce multiple digital assets like banners, images, videos, PDFs, etc., to promote their businesses online. For such businesses, Digital Asset Management (DAM) solutions are essential. These solutions help centrally store, manage, organize, search and track digital assets. Having a central repository of assets helps in the faster\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/CSS-tricks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340716,"url":"https:\/\/css-tricks.com\/the-humble-img-element-and-core-web-vitals\/","url_meta":{"origin":244310,"position":1},"title":"The Humble `img` Element And Core Web Vitals","date":"May 17, 2021","format":false,"excerpt":"Addy Osmani on images in HTML: The humble\u00a0<img>\u00a0element has gained some superpowers over the years. Given how central it is to image optimization on the web, let\u2019s catch up on what it can do and how it can help improve user experience and the\u00a0Core Web Vitals. Addy does a good\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/11-humble-img-element-and-core-web-vitals.png?fit=1200%2C736&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365579,"url":"https:\/\/css-tricks.com\/useful-tools-for-creating-avif-images\/","url_meta":{"origin":244310,"position":2},"title":"Useful Tools for Creating AVIF Images","date":"May 9, 2022","format":false,"excerpt":"AVIF (AV1 Image File Format) is a modern image file format specification for storing images that offer a much more significant file reduction when compared to other formats like JPG, JPEG, PNG, and WebP. Version 1.0.0 of the AVIF specification was finalized in February 2019 and released by Alliance for\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/avif-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342257,"url":"https:\/\/css-tricks.com\/start-serving-optimized-images-in-vue\/","url_meta":{"origin":244310,"position":3},"title":"Start Serving Optimized Images in Vue","date":"June 17, 2021","format":false,"excerpt":"Images have become extremely important to the effectiveness of websites. They speak a 1000 words, attract attention, and stimulate emotions. However, web performance is also a growing problem for most websites. And images are at the heart of many web performance issues. According to HTTP Archive, images are at least\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/imageengine_host.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":320540,"url":"https:\/\/css-tricks.com\/pre-caching-image-with-react-suspense\/","url_meta":{"origin":244310,"position":4},"title":"Pre-Caching Images with React Suspense","date":"September 21, 2020","format":false,"excerpt":"Suspense is an exciting, upcoming feature of React that will enable developers to easily allow their components to delay rendering until they\u2019re \u201cready,\u201d leading to a much smoother user experience. \"Ready,\" in this context, can mean a number of things. For example, your data loading utility can tie into Suspense,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/react-suspense.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305332,"url":"https:\/\/css-tricks.com\/add-beautiful-images-with-the-unsplash-api\/","url_meta":{"origin":244310,"position":5},"title":"Add Beautiful Images with the Unsplash API","date":"March 26, 2020","format":false,"excerpt":"Perhaps you know Unsplash? I'd wager it's the most popular stock photography site out there for two big reasons: Every photo on there is pretty darn niceEvery photo is entirely free even for commercial use. You don't have to ask permission or even credit it (although that's appreciated). Here's something\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/cover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244310"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248328"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244310"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244310\/revisions"}],"predecessor-version":[{"id":280947,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244310\/revisions\/280947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}