{"id":28054,"date":"2022-03-24T19:29:32","date_gmt":"2022-03-24T19:29:32","guid":{"rendered":"http:\/\/Upload-Images-to-Cloudinary-with-Netlify-Functions"},"modified":"2022-03-24T19:29:32","modified_gmt":"2022-03-24T19:29:32","slug":"upload-images-to-cloudinary-with-netlify-functions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/","title":{"rendered":"Upload Images to Cloudinary with Netlify Functions"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>When it comes to creating and delivering your digital assets with the least amount of effort, <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> has you covered with an end-to-end management solution. This article will go through the steps involved in uploading images to Cloudinary using serverless functions.<\/p>\n<p>With serverless functions, we can write backend or server-side code without the burden of managing servers. In this article, we will be using <a href=\"https:\/\/www.netlify.com\/products\/functions\/\">Netlify functions<\/a>, and it allows us to create, deploy, and manage serverless lambda functions without requiring an AWS account. Still, under the hood, Netlify functions are powered by <a href=\"https:\/\/www.serverless.com\/framework\/docs\/providers\/aws\/guide\/functions\">AWS Lambda<\/a>.<\/p>\n<p>This article assumes\u2014or hopes is perhaps a better word\u2014that you are familiar with the basics of JavaScript and React.js.<\/p>\n<p>Here is a link to the demo on <a href=\"https:\/\/codesandbox.io\/s\/upload-images-to-cloudinary-with-netlify-functions-g81qw\">CodeSandbox<\/a> and the source code on <a href=\"https:\/\/github.com\/ifeoma-imoh\/cloudinary-image-uploader\">GitHub<\/a>.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/upload-images-to-cloudinary-with-netlify-functions-g81qw?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"upload-images-to-cloudinary-with-netlify-functions-g81qw\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h2>Prerequisite<\/h2>\n<p>To follow this article, I recommend you have the following:<\/p>\n<ul>\n<li>Node version 10 or newer.<\/li>\n<li>Basic understanding of JavaScript, Serverless Functions, and Node.js.<\/li>\n<li>Integrated Development Environment (e.g., Visual studio code).<\/li>\n<li><\/li>\n<\/ul>\n<h2>Project Setup<\/h2>\n<p>Open your terminal and run the following command to create a React application in a folder called <code>imageUploader<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npx create-react-app imageuploader\n<\/code><\/span><\/pre>\n<p>Now let\u2019s install the dependencies we will need for this project.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm install netlify cloudinary dotenv\n<\/code><\/span><\/pre>\n<p>The next step is to install the Netlify CLI tool. Run the following command to install it as a dev dependency.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm install -D netlify-cli\n<\/code><\/span><\/pre>\n<p>Following that, we need to create a folder where our Netlify can find serverless functions. Create a folder called <code>functions<\/code> at the root of your project. Create a file called <code>uploadImage.js<\/code> within that folder and add the following code to it. This will be our serverless function.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    exports.handler = <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event, context<\/span>) <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> {\n        <span class=\"hljs-attr\">statusCode<\/span>: <span class=\"hljs-number\">200<\/span>,\n        <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify({ <span class=\"hljs-attr\">message<\/span>: <span class=\"hljs-string\">'Hello World'<\/span> })\n      }\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We will update the logic for the upload functionalities later, but this is basic enough to show that the API is working for now.<\/p>\n<p>Let\u2019s create a <code>netlify.toml<\/code> file at the root of our project. This is a config file for Netlify, and it will be used to specify how Netlify should build our site. Add the following to the file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    &#91;build]\n    functions = <span class=\"hljs-string\">\"functions\"<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><code>functions<\/code> is the directory where our serverless function is located.<\/p>\n<p>To access a local development server that supports serverless functions, we need to add a script to the <code>package.json<\/code> file.<\/p>\n<p>Add the following to the <code>scripts<\/code> section of your <code>package.json<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-string\">\"dev\"<\/span>: <span class=\"hljs-string\">\"netlify dev\"<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019re all set up! Run the following command in your terminal to start up your local development server.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm run dev\n<\/code><\/span><\/pre>\n<p>Once the server successfully runs, open the link below in your browser to test the serverless function.<\/p>\n<pre><code>http:\/\/localhost:8888\/.netlify\/functions\/uploadImage\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CAA98CE5EE8C903B39EB52E4BE05B0191B80110ED100AF6AB219BE6A7E221E5_1634465199834_CleanShot+2021-10-17+at+14.06.232x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"667\"\/><\/p>\n<p>Let\u2019s work on the interface we\u2019ll use to upload images. Open your <code>App.css<\/code> file and replace whatever is inside with the following.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-class\">.App<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">450px<\/span>;\n      <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f2f2f2<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: auto;\n      <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">5rem<\/span>; \n      <span class=\"hljs-attribute\">display<\/span>: flex;\n      <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n      <span class=\"hljs-attribute\">align-items<\/span>: center;\n      <span class=\"hljs-attribute\">justify-content<\/span>: center;\n    }\n    <span class=\"hljs-selector-tag\">h4<\/span> {\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n      <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n    }\n    <span class=\"hljs-selector-class\">.uploadBtn<\/span> {\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span> <span class=\"hljs-number\">2.5rem<\/span>;\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#370aa0<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n      <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n      <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    }\n    <span class=\"hljs-selector-class\">.imgUrl<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">height<\/span>: auto;\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Upload Image Component<\/h2>\n<p>Open your <code>App.js<\/code> file and add the following to it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"App\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>Upload Images<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"upload\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">hidden<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"uploadBtn\"<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"upload\"<\/span>&gt;<\/span>Upload Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You can test the React app by heading to the following localhost URL:<\/p>\n<pre><code>http:\/\/localhost:8888\n<\/code><\/pre>\n<p>The output in the browser should look like this.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CAA98CE5EE8C903B39EB52E4BE05B0191B80110ED100AF6AB219BE6A7E221E5_1634465337188_CleanShot+2021-10-17+at+14.08.372x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"735\"\/><\/p>\n<p>Now let\u2019s set up our environment variables. Create a root-level file called <code>.env<\/code> and add the following variable to it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    CLOUDINARY_NAME=<span class=\"hljs-string\">\"cloud name\"<\/span>\n    CLOUDINARY_API_KEY=<span class=\"hljs-string\">\"api key\"<\/span>\n    CLOUDINARY_API_SECRET=<span class=\"hljs-string\">\"api secret\"<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Cloudinary Setup<\/h2>\n<p>We need to get the values for the variables from Cloudinary. Log in to your Cloudinary account or <a href=\"https:\/\/cloudinary.com\/\">create a free account<\/a> if you do not have one already.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CAA98CE5EE8C903B39EB52E4BE05B0191B80110ED100AF6AB219BE6A7E221E5_1634452803467_CleanShot+2021-10-17+at+10.38.282x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"475\"\/><\/p>\n<p>After you register and log in to your account, you will be directed to your Dashboard page. The account details section on the dashboard page shows your <code>cloud name<\/code>, <code>API Key<\/code>, and <code>API Secret<\/code>. Copy and add the keys to the environmental variables.<\/p>\n<h2>Upload Serverless Function<\/h2>\n<p>Now let\u2019s update our serverless function. Update your <code>uploadImage.js<\/code> file with the following.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"cloudinary\"<\/span>).v2;\n    <span class=\"hljs-keyword\">const<\/span> dotenv = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"dotenv\"<\/span>);\n    dotenv.config();\n    cloudinary.config({\n      <span class=\"hljs-attr\">cloud_name<\/span>: process.env.CLOUDINARY_NAME,\n      <span class=\"hljs-attr\">api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n      <span class=\"hljs-attr\">api_secret<\/span>: process.env.CLOUDINARY_API_SECRET\n    });\n    \n    <span class=\"hljs-comment\">\/\/ When doing a signed upload, you'll use a function like this:<\/span>\n    exports.handler = <span class=\"hljs-keyword\">async<\/span> event =&gt; {\n      <span class=\"hljs-keyword\">const<\/span> file = event.body;\n      <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(file, {\n        <span class=\"hljs-attr\">image_metadata<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      });\n      <span class=\"hljs-keyword\">return<\/span> {\n        <span class=\"hljs-attr\">statusCode<\/span>: <span class=\"hljs-number\">200<\/span>,\n        <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify(res)\n      };\n    };\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, we import Cloudinary and <code>dotenv<\/code>. We configure Cloudinary and <code>dotenv<\/code> with the config function.<\/p>\n<p>We\u2019re also exporting the handler method, a typical synchronous serverless Lambda function that takes an event as a parameter. We\u2019re getting the file from <code>event.body<\/code> and passing it to Cloudinary\u2019s upload method.<\/p>\n<p>In the return statement, we return the 200 status code and body as the response from Cloudinary.<\/p>\n<p>Now let\u2019s update the functionality for our frontend so that it works as expected. Update your <code>App.js<\/code> file with the following.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> &#91;loading, setLoading] = useState(<span class=\"hljs-literal\">false<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> &#91;success, setSuccess] = useState(<span class=\"hljs-literal\">false<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> &#91;imgUrl, setImgUrl] = useState(&#91;]);\n    \n      <span class=\"hljs-keyword\">const<\/span> readFile = <span class=\"hljs-function\">(<span class=\"hljs-params\">file<\/span>) =&gt;<\/span> {\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n          <span class=\"hljs-keyword\">const<\/span> reader = <span class=\"hljs-keyword\">new<\/span> FileReader();\n          reader.onload = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n            resolve(reader.result);\n          };\n          reader.onerror = reject;\n          reader.readAsDataURL(file);\n        });\n      };\n      <span class=\"hljs-keyword\">const<\/span> handleUpload = <span class=\"hljs-keyword\">async<\/span> (e) =&gt; {\n        setSuccess(<span class=\"hljs-literal\">false<\/span>);\n        <span class=\"hljs-keyword\">if<\/span>(e.target.files.length &gt; <span class=\"hljs-number\">0<\/span>) {\n          setLoading(<span class=\"hljs-literal\">true<\/span>);\n          <span class=\"hljs-keyword\">const<\/span> file = <span class=\"hljs-keyword\">await<\/span> readFile(e.target.files&#91;<span class=\"hljs-number\">0<\/span>]);\n      \n          <span class=\"hljs-keyword\">try<\/span> {\n            <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(\n              <span class=\"hljs-string\">\"\/.netlify\/functions\/uploadImage\"<\/span>,\n              {\n                <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n                <span class=\"hljs-attr\">body<\/span>: file,\n              }\n            );\n            <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> response.json();\n            setLoading(<span class=\"hljs-literal\">false<\/span>);\n            setSuccess(<span class=\"hljs-literal\">true<\/span>);\n            setImgUrl(data.url);\n            <span class=\"hljs-built_in\">console<\/span>.log(data.url);\n            } \n          <span class=\"hljs-keyword\">catch<\/span> (error) {\n              <span class=\"hljs-built_in\">console<\/span>.error(error);\n              setLoading(<span class=\"hljs-literal\">false<\/span>);\n          }\n        }\n      }\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"App\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span>Upload Images<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"upload\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleUpload}<\/span> <span class=\"hljs-attr\">hidden<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"uploadBtn\"<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"upload\"<\/span>&gt;<\/span>{loading ? \"Uploading...\" : \"Upload an Image\"}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n          {success &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"imgUrl\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{imgUrl}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Uploaded new\"<\/span> \/&gt;<\/span>}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App; \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, we created state for the variables <code>loading<\/code>, <code>success<\/code>, and <code>imageURL<\/code>, which will help us keep track of when an image is uploading when it has already been uploaded and then get the URL for the uploaded image.<\/p>\n<p>In the code above, we created states for the variables <code>loading<\/code>, <code>success<\/code>, and <code>imageURL<\/code>, which will help us keep track of when an image is uploading when it has already been uploaded and then get the URL for the uploaded image.<\/p>\n<p>We have the <code>readFile<\/code> function, which is used to read a file and convert it to a blob URL in the format Cloudinary accepts.<\/p>\n<p>We also created a function called <code>handleUpload<\/code>, and as its name suggests, it gets the file that needs to be uploaded and sends the API request to the serverless function we created. It returns a response with the image URL, which we then display after the image has been uploaded successfully.<\/p>\n<p>Head over to your development server and upload an image. Here\u2019s what mine looks like after a successful upload. Hopefully, you\u2019re up and running as well.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CAA98CE5EE8C903B39EB52E4BE05B0191B80110ED100AF6AB219BE6A7E221E5_1634464406254_CleanShot+2021-10-17+at+13.53.072x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"790\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, we learned how to build an image upload feature using Netlify\u2019s serverless functions and Cloudinary.<\/p>\n<p><strong>Here are some resources you might find helpful:<\/strong><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_upload_api_reference#upload_method\">Cloudinary Upload API Reference<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.netlify.com\/products\/functions\/\">Netlify Functions Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.serverless.com\/framework\/docs\/providers\/aws\/guide\/functions\">AWS Lambda Functions<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28055,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,246,380,371],"class_list":["post-28054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-react","tag-serverless","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Upload Images to Cloudinary with Netlify Functions<\/title>\n<meta name=\"description\" content=\"In this jam, we&#039;ll look at how to upload images to Cloudinary using Netlify&#039;s serverless functions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Images to Cloudinary with Netlify Functions\" \/>\n<meta property=\"og:description\" content=\"In this jam, we&#039;ll look at how to upload images to Cloudinary using Netlify&#039;s serverless functions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T19:29:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Upload Images to Cloudinary with Netlify Functions\",\"datePublished\":\"2022-03-24T19:29:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"React\",\"Serverless\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\",\"name\":\"Upload Images to Cloudinary with Netlify Functions\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA\",\"datePublished\":\"2022-03-24T19:29:32+00:00\",\"description\":\"In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Images to Cloudinary with Netlify Functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Upload Images to Cloudinary with Netlify Functions","description":"In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/","og_locale":"en_US","og_type":"article","og_title":"Upload Images to Cloudinary with Netlify Functions","og_description":"In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T19:29:32+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/"},"author":{"name":"","@id":""},"headline":"Upload Images to Cloudinary with Netlify Functions","datePublished":"2022-03-24T19:29:32+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","keywords":["Guest Post","Javascript","React","Serverless","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/","name":"Upload Images to Cloudinary with Netlify Functions","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","datePublished":"2022-03-24T19:29:32+00:00","description":"In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-netlify-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload Images to Cloudinary with Netlify Functions"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925542\/Web_Assets\/blog\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d\/3f03097c1a4ed6d46fce1abba50a733282d1b3cc-1280x720-1_28055c393d.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28054"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28055"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}