{"id":27916,"date":"2022-03-24T19:22:09","date_gmt":"2022-03-24T19:22:09","guid":{"rendered":"http:\/\/Upload-to-Cloudinary-with-Azure-Functions"},"modified":"2022-03-24T19:22:09","modified_gmt":"2022-03-24T19:22:09","slug":"upload-to-cloudinary-with-azure-functions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/","title":{"rendered":"Upload to Cloudinary with Azure Functions"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Azure functions provide an elegant serverless solution that allows users to build applications by writing pieces of event-driven functions relevant to their business logic without focusing on scaling and managing infrastructures. Cloudinary, on the other hand, is a PaaS that provides an excellent solution for storing and managing media assets(images, videos, etc.).<\/p>\n<p>This article will illustrate how to upload media assets to Cloudinary with an Azure serverless function. First, we will create an azure project locally that would hold a single serverless function to handle file uploads. Next, we will deploy the local project to the cloud to make the serverless functions globally accessible. Finally, we will expose and trigger the serverless function via a traditional HTTP request from a simple React application with the desired files.<\/p>\n<p>Let\u2019s get started! Here\u2019s a <a href=\"https:\/\/codesandbox.io\/s\/upload-files-to-cloudinary-with-azure-functions-ty1zu\">link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/upload-files-to-cloudinary-with-azure-function-ty1zu?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-files-to-cloudinary-with-azure-function-ty1zu\"\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 along with this tutorial, you will need to have:<\/p>\n<ul>\n<li>NodeJs installed on your machine.<\/li>\n<li>Basic knowledge of ReactJs.<\/li>\n<li>Basic understanding of the Azure platform.<\/li>\n<\/ul>\n<h2>Project Setup<\/h2>\n<p>Let\u2019s set up our project environment; open your terminal, and run the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-comment\"># create a React app and install axios<\/span>\n    mkdir frontend\n    npx create-react-app frontend\n    cd frontend\n    npm i axios\n    \n    <span class=\"hljs-comment\"># create an empty node project and install Cloudinary<\/span>\n    cd ..\/\n    mkdir azurefunc\n    cd azurefunc\n    npm init --y\n    npm install cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The source code of our application will live in two folders. The folder <code>frontend<\/code> will hold our React application, while the folder <code>azurefunc<\/code> will hold the local copy of our serverless functions.<\/p>\n<p>The command above creates both folders, then bootstraps a react application in the <code>frontend<\/code> folder and installs the axios dependency. Next, it initializes the <code>azurefunc<\/code> folder and installs the Cloudinary SDK, which will be used to upload media assets to Cloudinary.<\/p>\n<h2>Setup Cloudinary<\/h2>\n<p>To be able to upload media assets to Cloudinary, we need our Cloudinary credentials. If you don\u2019t have a Cloudinary account yet, <a href=\"https:\/\/cloudinary.com\/signup\">sign up<\/a> for a free account here. Log in after creating your account, and on your dashboard page, you should see your credentials (cloud name, etc.).<\/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_A1D3CF3AD4EEAE46D00833FA86C4406554C98ACE453A7C0611991416AE67D8F4_1637466598643_CleanShot+2021-11-21+at+07.48.542x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"508\"\/><\/p>\n<p>Our credentials will be stored in an environment variable when we configure our function project.<\/p>\n<h2>Creating the Function App<\/h2>\n<p>The <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/search\/?&amp;ef_id=Cj0KCQiAkNiMBhCxARIsAIDDKNXNSQHw76bEcNrO4vo44eSipHlerMhTW1IDls3GbtvS7szlbXYFMtoaAqBZEALw_wcB:G:s&amp;OCID=AID2200227_SEM_Cj0KCQiAkNiMBhCxARIsAIDDKNXNSQHw76bEcNrO4vo44eSipHlerMhTW1IDls3GbtvS7szlbXYFMtoaAqBZEALw_wcB:G:s&amp;gclid=Cj0KCQiAkNiMBhCxARIsAIDDKNXNSQHw76bEcNrO4vo44eSipHlerMhTW1IDls3GbtvS7szlbXYFMtoaAqBZEALw_wcB\">Azure cloud platform<\/a> allows users to create and test functions directly from the dashboard. Regardless, the recommended approach is to develop and test serverless functions locally before deploying to the cloud, and that\u2019s what we will be doing.<\/p>\n<blockquote>\n<p>The terminal commands from here should be done in the <code>azurefunc<\/code> folder unless stated otherwise.<\/p>\n<\/blockquote>\n<h2>Installing Tools<\/h2>\n<p>For convenience, we will also use the Visual Studio Code Azure tool extension, which integrates all the CLI tools and provides an easy-to-use interface to work with the function project.<\/p>\n<p>We need two CLI tools:<\/p>\n<ul>\n<li>Azure CLI tool: we will be using this tool to access and manage our resources; download <a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli#install\">here<\/a>.<\/li>\n<li>Azure core function tools will be used to bootstrap, debug, and test our local function project. This tool requires the Azure CLI tool as a dependency when executing some commands.<\/li>\n<\/ul>\n<p>Run the following in your terminal to install this tool.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm i -D azure-functions-core-tools\n<\/code><\/span><\/pre>\n<p>Now go to the <strong>Extensions<\/strong> tab of your VS Code IDE, search, and install the azure tools extension shown below.<\/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_E513B3BF5C0A49C28A81AA7F50C68CCA03CE9EA3417C8E25C9B6235EC97FE588_1637251435170_Screenshot+319.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1064\" height=\"533\"\/><\/p>\n<p>After the installation, you should see an icon on the activity bar, as shown below.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637484671298_CleanShot+2021-11-21+at+12.50.322x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"585\"\/><\/p>\n<h2>Initialize the Project<\/h2>\n<p>To get started, click on the <strong>Azure icon<\/strong> on the activity bar, then select <strong>Create New Project<\/strong>.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637484812498_CleanShot+2021-11-21+at+12.52.012x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"639\"\/><\/p>\n<p>Select the desired folder and language; we used the default folder <code>azurefunc<\/code> and Javascript as shown below. Select the <strong>Skip for now<\/strong> option when asked to select a template.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637485586417_CleanShot+2021-11-21+at+13.05.132x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1496\" height=\"1060\"\/><\/p>\n<h2>Create Serverless Function<\/h2>\n<p>As mentioned earlier, azure functions can be triggered by different events.<\/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_E513B3BF5C0A49C28A81AA7F50C68CCA03CE9EA3417C8E25C9B6235EC97FE588_1637253353190_AZURE+FUNCTION+TRIGGERS.jpg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"726\" height=\"345\"\/><\/p>\n<p>The tools we installed provide us with several templates to create serverless functions depending on how we want them to be triggered. In this case, since we only want our function to run when an HTTP request is made, we would be using the <strong>HTTP-trigger<\/strong> template to create the function.<\/p>\n<p>To create a function, click on the azure icon on the activity bar and select the thunderbolt icon.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637486441535_CleanShot+2021-11-21+at+13.19.482x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"519\"\/><\/p>\n<p>Select the <strong>HTTP trigger<\/strong> template and give the function a name. I called mine <code>upload<\/code>. Finally, for the Authorization level, select <code>anonymous<\/code>.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637486817817_CleanShot+2021-11-21+at+13.25.492x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1938\" height=\"1182\"\/><\/p>\n<p>We can also create the function using the CLI by running the following:<\/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\">    func <span class=\"hljs-keyword\">new<\/span> --template <span class=\"hljs-string\">\"Http Trigger\"<\/span> --name upload\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>Irrespective of how you chose to create the function, you have a folder structure identical to 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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637487229145_CleanShot+2021-11-21+at+13.33.062x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"469\"\/><\/p>\n<p>The <code>index.js<\/code> file holds the primary serverless function\u2019s logic. The <code>function.json<\/code> file contains the settings for our function, such as input and output bindings. This file was automatically configured based on the template we chose. In our case, the settings tell the Azure function that its input and output are an HTTP request and response object.<\/p>\n<p>Before updating our serverless function with the upload logic, we need to store our Cloudinary credentials in an environment variable. Update your <code>local.settings.json<\/code> file with the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">    {\n      <span class=\"hljs-attr\">\"IsEncrypted\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n      <span class=\"hljs-attr\">\"Values\"<\/span>: {\n        <span class=\"hljs-attr\">\"AzureWebJobsStorage\"<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n        <span class=\"hljs-attr\">\"FUNCTIONS_WORKER_RUNTIME\"<\/span>: <span class=\"hljs-string\">\"node\"<\/span>,\n        <span class=\"hljs-attr\">\"cloudSecret\"<\/span>:<span class=\"hljs-string\">\"INSERT-YOUR-CLOUDINARY-API-SECRET-HERE\"<\/span>\n        <span class=\"hljs-string\">\"ApiKey\"<\/span>:<span class=\"hljs-string\">\"INSERT-YOUR-CLOUDINARY-API-KEY-HERE\"<\/span>\n      },\n    <span class=\"hljs-attr\">\"Host\"<\/span>: {\n      <span class=\"hljs-comment\">\/\/...<\/span>\n     }\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now let\u2019s update our serverless function with the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" 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> config = {\n      <span class=\"hljs-attr\">cloud_name<\/span>: INSERT-CLOUDINARY-CLOUD-NAME-HERE,\n      <span class=\"hljs-attr\">api_key<\/span>: INSERT-CLOUDINARY-API-KEY-HERE,\n      <span class=\"hljs-attr\">api_secret<\/span>: process.env.cloudSecret,\n      <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n    };\n    cloudinary.config(config);\n    <span class=\"hljs-built_in\">module<\/span>.exports = <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">context, req<\/span>) <\/span>{\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> cloudinaryRes = <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(req.body.file, {\n          <span class=\"hljs-attr\">resource_type<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>,\n        });\n        context.res.body = cloudinaryRes;\n        context.done();\n      } <span class=\"hljs-keyword\">catch<\/span> (error) {\n        context.res = {\n          <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-number\">500<\/span>,\n          <span class=\"hljs-attr\">body<\/span>: error,\n        };\n      }\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\">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>First, we bring in the Cloudinary SDK and configure it with our credentials. In the main function, we use this module to attempt to upload the file contained in the request body, which will come as a base64 string. By setting  <code>resource_type<\/code> to <code>auto<\/code> in the upload settings, Cloudinary will automatically detect the file type (image, video) and handle it accordingly. If the upload is successful, we get a successful response from the Cloudinary servers; otherwise, it responds with an error message.<\/p>\n<blockquote>\n<p>Cloudinary allows different file source options. Our upload call, in this case, uses the base64 option.<\/p>\n<\/blockquote>\n<h2>Test the Function Locally<\/h2>\n<p>To test our local project, Run the following in your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    func start\n<\/code><\/span><\/pre>\n<p>This command executes our local function app as expected. It also displays the URLs to all the serverless functions with the acceptable HTTP methods in the terminal.<\/p>\n<p>We only get one URL displayed in our case since we defined one serverless function.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637583635453_CleanShot+2021-11-22+at+16.19.382x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"401\"\/><\/p>\n<p>We can use this URL to test our serverless function locally by making an HTTP request to the endpoint.<\/p>\n<h2>Deploy to Cloud<\/h2>\n<p>The URL to our serverless function, for now, is only accessible locally. To make it globally available, we would have to deploy our project to the cloud. Before proceeding, you need to have an account on the Azure cloud platform. Create a free account <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\">here<\/a>.<\/p>\n<p>In the Azure extension in VS Code, click on the Sign in to Azure link. You will be redirected to the Azure cloud platform to log in with your cloud credentials.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637490168281_CleanShot+2021-11-21+at+14.21.362x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"574\"\/><\/p>\n<p>Now, click on the <strong>upload<\/strong> to cloud icon to deploy the function app.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637493346410_CleanShot+2021-11-21+at+15.09.402x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"537\"\/><\/p>\n<p>Click the <strong>Create new Function App in Azure<\/strong> and choose a globally unique name for your function. Select the runtime stack and the region where you want to deploy it.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637496460221_CleanShot+2021-11-21+at+16.07.032x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1281\"\/><\/p>\n<p>This extension under the hood uses the CLI tool to create a function project on your cloud account using the name specified and attaches it to a storage account, and then it deploys your local project.<\/p>\n<p>Once you\u2019re done deploying, visit the <strong>Function App<\/strong> section of the Azure cloud platform and select the newly created function project. In its <strong>Function<\/strong> section, you should see the list of functions available in the project. As expected, we only have the <strong>upload<\/strong> function. Next, select it and click on the button to get the function\u2019s URL, as seen below.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637494813987_CleanShot+2021-11-21+at+15.39.482x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1263\"\/><\/p>\n<h2>Include Environment Variables in Deployment<\/h2>\n<p>Some of our Cloudinary credentials integral to our application currently reside in the <code>local.settings.json<\/code> file. Remember this file is not part of the deployment. We need to replicate the environment variables that currently live in this file to our deployed application. To see how to add environment variables using the CLI tool, <a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/webapp\/config\/appsettings?view=azure-cli-latest#az_webapp_config_appsettings_set\">check here<\/a>.<\/p>\n<h2>Building the Frontend<\/h2>\n<p>We now have our function app running, and we have the URL to communicate with this function. We are now going to compose a simple React application to communicate with the serverless function.<\/p>\n<p>In the frontend directory, 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> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"axios\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/App.css\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <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;file, setFile] = useState(<span class=\"hljs-literal\">null<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> &#91;isLoading, setIsLoading] = useState(<span class=\"hljs-literal\">false<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> &#91;res, setRes] = useState({});\n      <span class=\"hljs-keyword\">const<\/span> handleChange = <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {\n        setFile(event.target.files&#91;<span class=\"hljs-number\">0<\/span>]);\n        setRes({});\n      };\n      <span class=\"hljs-keyword\">const<\/span> readFileAsBase64 = <span class=\"hljs-keyword\">async<\/span> (file) =&gt; {\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> () =&gt; {\n        <span class=\"hljs-keyword\">const<\/span> fileInBase64 = <span class=\"hljs-keyword\">await<\/span> readFileAsBase64(file);\n        setIsLoading(<span class=\"hljs-literal\">true<\/span>);\n        <span class=\"hljs-keyword\">try<\/span> {\n          <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> axios.post(\n            <span class=\"hljs-string\">\"https:\/\/azure-func-app1.azurewebsites.net\/api\/upload?\"<\/span>,\n            {\n              <span class=\"hljs-attr\">file<\/span>: fileInBase64,\n            }\n          );\n          setRes(res.data);\n          alert(<span class=\"hljs-string\">\"success\"<\/span>);\n        } <span class=\"hljs-keyword\">catch<\/span> (error) {\n          <span class=\"hljs-built_in\">console<\/span>.log({ error });\n          alert(<span class=\"hljs-string\">\"error\"<\/span>);\n        } <span class=\"hljs-keyword\">finally<\/span> {\n          setIsLoading(<span class=\"hljs-literal\">false<\/span>);\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\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">htmlFor<\/span>=<span class=\"hljs-string\">\"file_id\"<\/span>&gt;<\/span> select file<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n              <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"file_id\"<\/span>\n              <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span>\n              <span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*, video\/* \"<\/span>\n              <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span>\n            \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>\n              {Object.keys(res).map((key) =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"output-item\"<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{key}<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>{key}:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>{typeof res&#91;key] === \"object\" ? \"object\" : res&#91;key]}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              ))}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span>\n            {file &amp;&amp; (\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{handleUpload}<\/span> <span class=\"hljs-attr\">disabled<\/span>=<span class=\"hljs-string\">{isLoading}<\/span>&gt;<\/span>\n                {isLoading ? \"uploading...\" : \"upload\"}\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            )}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\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>This component allows the user to select an image or video and then displays a button to enable the user to upload the selected file. The upload function converts the selected file to a base64 data string then it requests the URL of our serverless function. If it succeeds, it then gets the JSON response and displays it to the screen. Otherwise, it prints an error to the console.<\/p>\n<p>Run the following in your terminal to see the app running:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm run start\n<\/code><\/span><\/pre>\n<p>Running our app now, we get some <strong>CORS<\/strong> errors when communicating with the serverless function. By default, every deployed function app accepts requests from domains with the same base URL. We would have to enlist our React app\u2019s URL to make it a recognized endpoint.<\/p>\n<p>Navigate to <code>Function App<\/code> on your cloud account. Go to the API section on the left sidebar, select the CORS button, add as many origins as you require, and save. In this case, we specified a wildcard <code>*****<\/code>, which means it will accept and process requests from any domain.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637497398808_CleanShot+2021-11-21+at+16.22.382x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"711\"\/><\/p>\n<p>Save your settings and restart the function app. We should be able to select and upload media assets to Cloudinary now from our React app.<\/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_D894F71C9AF2789AE2D4493BB0BD2E5239F3749CC73B3A3B12043BC63D0112BC_1637508369461_CleanShot+2021-11-21+at+19.24.282x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1303\"\/><\/p>\n<p>To view uploaded images, log in to your Cloudinary account and head over to your media library.<\/p>\n<p>Find the complete project <a href=\"https:\/\/github.com\/ifeoma-imoh\/uplod-to-cloudinary-with-azure-functions\">here<\/a> on GitHub.<\/p>\n<h2>Conclusion<\/h2>\n<p>Serverless architecture has ushered in a new frontier on how we develop our applications. This article shows us a bit of what can be achieved using Azure Functions, and it provides a basis for exploring them deeply in future projects.<\/p>\n<p><strong>Resources you may find helpful<\/strong><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/deploy-configure-credentials?tabs=cli\">Configure deployment credentials for Azure App Service<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/azure.microsoft.com\/en-us\/\">Azure documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/\">Cloudinary documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/?view=azure-cli-latest\">Azure CLI documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/deploy-continuous-deployment?tabs=github\">Continuous deployment to Azure App service<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27917,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,175,246,380,371,373],"class_list":["post-27916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-jamstack","tag-react","tag-serverless","tag-under-review","tag-upload"],"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 to Cloudinary with Azure Functions<\/title>\n<meta name=\"description\" content=\"This article illustrates how to upload media assets to Cloudinary with Azure function.\" \/>\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-to-cloudinary-with-azure-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload to Cloudinary with Azure Functions\" \/>\n<meta property=\"og:description\" content=\"This article illustrates how to upload media assets to Cloudinary with Azure function.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T19:22:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.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-to-cloudinary-with-azure-functions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Upload to Cloudinary with Azure Functions\",\"datePublished\":\"2022-03-24T19:22:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA\",\"keywords\":[\"Guest Post\",\"JAMStack\",\"React\",\"Serverless\",\"Under Review\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\",\"name\":\"Upload to Cloudinary with Azure Functions\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA\",\"datePublished\":\"2022-03-24T19:22:09+00:00\",\"description\":\"This article illustrates how to upload media assets to Cloudinary with Azure function.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload to Cloudinary with Azure 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 to Cloudinary with Azure Functions","description":"This article illustrates how to upload media assets to Cloudinary with Azure function.","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-to-cloudinary-with-azure-functions\/","og_locale":"en_US","og_type":"article","og_title":"Upload to Cloudinary with Azure Functions","og_description":"This article illustrates how to upload media assets to Cloudinary with Azure function.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T19:22:09+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.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-to-cloudinary-with-azure-functions\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/"},"author":{"name":"","@id":""},"headline":"Upload to Cloudinary with Azure Functions","datePublished":"2022-03-24T19:22:09+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA","keywords":["Guest Post","JAMStack","React","Serverless","Under Review","Upload"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/","name":"Upload to Cloudinary with Azure Functions","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA","datePublished":"2022-03-24T19:22:09+00:00","description":"This article illustrates how to upload media assets to Cloudinary with Azure function.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-to-cloudinary-with-azure-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload to Cloudinary with Azure 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\/v1681925899\/Web_Assets\/blog\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae\/df3a2afb0447374f4258d5417bd4b8dce3c147fa-1280x720-1_2791728dae.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27916","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=27916"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27917"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}