{"id":298,"date":"2016-09-22T05:19:11","date_gmt":"2016-09-22T12:19:11","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/custom-api-for-image-upload\/"},"modified":"2025-06-11T08:17:25","modified_gmt":"2025-06-11T15:17:25","slug":"custom-api-for-image-upload","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/custom-api-for-image-upload\/","title":{"rendered":"How to upload images from the camera control to Azure blob storage"},"content":{"rendered":"

We have seen several customers asking us this question- \u201cCan I upload the photos taken using the Camera control in PowerApps to an Azure blob storage?\u201d. The answer is : \u201cYes certainly, you can do that using a Custom API in PowerApps<\/a>\u201d.\u00a0 The immediate next question is : \u201cDo you have an example for such an API?\u201d. This blog post is attempting to provide an answer to that question.<\/p>\n

This article explains how to create a Azure API App which takes in a image file, stores it on an Azure blob storage account and returns the URL of the image. This API can then be called from any application including PowerApps.<\/p>\n

The complete source code for this solution can be found at https:\/\/github.com\/pratapladhani\/ImageUploadAPI<\/a>.<\/p>\n

Lets start.<\/p>\n\n

Create an Azure API App<\/h2>\n

Create <\/strong>a new ASP.NET Web Application <\/strong>> Azure API App <\/strong>> by the name ImageUploadAPI<\/em><\/strong>.<\/p>\n

Select the Host in the cloud<\/strong> checkbox.<\/p>\n

\u00a0<\/p>\n

\"image\"<\/p>\n

\u00a0<\/p>\n

Provide the API App Name<\/strong>, select the appropriate Subscription<\/strong>, Resource Group <\/strong>and App Service Plan <\/strong>and click on Create<\/strong>.<\/p>\n

\u00a0\"image\"<\/p>\n

\u00a0<\/p>\n

Create <\/strong>a New Class in the Controllers folder by the name \u201cAddFileParamTypes.cs<\/strong>\u201d. Replace the code <\/strong>in the file with the code given below:<\/p>\n

using System.Collections.Generic;\nusing System.Web.Http.Description;\nusing Swashbuckle.Swagger;\nnamespace ImageUploadAPI.Controllers\n{\n    public class AddFileParamTypes : IOperationFilter\n    {\n        public void Apply(Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription)\n        {\n            if (operation.operationId == \"UploadImage\")  \/\/ SwaggerOperation\n            {\n                operation.consumes.Add(\"multipart\/form-data\");\n                operation.parameters = new List<Parameter>\n                {\n                    new Parameter\n                    {\n                        name = \"file\",\n                        required = true,\n                        type = \"file\",\n                        @in = \"formData\",\n                        vendorExtensions = new Dictionary<string, object> { {\"x-ms-media-kind\", \"image\" } }\n                    }\n                };\n                operation.parameters.Add(new Parameter()\n                {\n                    name = \"fileName\",\n                    @in = \"query\",\n                    required = false,\n                    type = \"string\"\n                });\n            }\n        }\n    }\n}<\/pre>\n
Create <\/strong>a New Class in the Controllers folder by the name \u201cInMemoryMultipartFormDataStreamProvider.cs<\/strong>\u201d. Replace the code<\/strong> in the file with the code given below:<\/p>\n
using System;\nusing System.Collections.Generic;\nusing System.Collections.ObjectModel;\nusing System.Collections.Specialized;\nusing System.IO;\nusing System.Net.Http;\nusing System.Net.Http.Headers;\nusing System.Threading.Tasks;\nnamespace ImageUploadAPI.Controllers\n{\n    public class InMemoryMultipartFormDataStreamProvider : MultipartStreamProvider\n    {\n        private NameValueCollection _formData = new NameValueCollection();\n        private List<HttpContent> _fileContents = new List<HttpContent>();\n        \/\/ Set of indexes of which HttpContents we designate as form data\n        private Collection<bool> _isFormData = new Collection<bool>();\n        \/\/\/ <summary>\n        \/\/\/ Gets a <see cref=\"NameValueCollection\"\/> of form data passed as part of the multipart form data.\n        \/\/\/ <\/summary>\n        public NameValueCollection FormData\n        {\n            get { return _formData; }\n        }\n        \/\/\/ <summary>\n        \/\/\/ Gets list of <see cref=\"HttpContent\"\/>s which contain uploaded files as in-memory representation.\n        \/\/\/ <\/summary>\n        public List<HttpContent> Files\n        {\n            get { return _fileContents; }\n        }\n        public override Stream GetStream(HttpContent parent, HttpContentHeaders headers)\n        {\n            \/\/ For form data, Content-Disposition header is a requirement\n            ContentDispositionHeaderValue contentDisposition = headers.ContentDisposition;\n            if (contentDisposition != null)\n            {\n                \/\/ We will post process this as form data\n                _isFormData.Add(String.IsNullOrEmpty(contentDisposition.FileName));\n                return new MemoryStream();\n            }\n            \/\/ If no Content-Disposition header was present.\n            throw new InvalidOperationException(string.Format(\"Did not find required '{0}' header field in MIME multipart body part..\", \"Content-Disposition\"));\n        }\n        \/\/\/ <summary>\n        \/\/\/ Read the non-file contents as form data.\n        \/\/\/ <\/summary>\n        \/\/\/ <returns><\/returns>\n        public override async Task ExecutePostProcessingAsync()\n        {\n            \/\/ Find instances of non-file HttpContents and read them asynchronously\n            \/\/ to get the string content and then add that as form data\n            for (int index = 0; index < Contents.Count; index++)\n            {\n                if (_isFormData[index])\n                {\n                    HttpContent formContent = Contents[index];\n                    \/\/ Extract name from Content-Disposition header. We know from earlier that the header is present.\n                    ContentDispositionHeaderValue contentDisposition = formContent.Headers.ContentDisposition;\n                    string formFieldName = UnquoteToken(contentDisposition.Name) ?? String.Empty;\n                    \/\/ Read the contents as string data and add to form data\n                    string formFieldValue = await formContent.ReadAsStringAsync();\n                    FormData.Add(formFieldName, formFieldValue);\n                }\n                else\n                {\n                    _fileContents.Add(Contents[index]);\n                }\n            }\n        }\n        \/\/\/ <summary>\n        \/\/\/ Remove bounding quotes on a token if present\n        \/\/\/ <\/summary>\n        \/\/\/ <param name=\"token\">Token to unquote.<\/param>\n        \/\/\/ <returns>Unquoted token.<\/returns>\n        private static string UnquoteToken(string token)\n        {\n            if (String.IsNullOrWhiteSpace(token))\n            {\n                return token;\n            }\n            if (token.StartsWith(\"\\\"\", StringComparison.Ordinal) && token.EndsWith(\"\\\"\", StringComparison.Ordinal) && token.Length > 1)\n            {\n                return token.Substring(1, token.Length - 2);\n            }\n            return token;\n        }\n    }\n}<\/pre>\n
Create <\/strong>a New Class in the Controllers folder by the name \u201cUploadedFileInfo.cs<\/strong>\u201d. Replace the code<\/strong> in the file with the code given below:<\/p>\n
namespace ImageUploadAPI.Controllers\n{\n    public class UploadedFileInfo\n    {\n        public string FileName { get; set; }\n        public string FileExtension { get; set; }\n        public string FileURL { get; set; }\n        public string ContentType { get; set; }\n    }\n}<\/pre>\n
Add <\/strong>the Windows Azure Storage Nuget Package<\/a> to the project by running the following command in the Package Manager Console. <\/a><\/p>\n
Install-Package WindowsAzure.Storage <\/pre>\n
\u00a0<\/p>\n
Delete <\/strong>the ValuesController <\/strong>class from the Controllers folder<\/p>\n
Create a new Class in the Controllers folder by the name \u201cUploadImageController.cs\u201d.\u00a0 Replace the code<\/strong> in the file with the following code.<\/p>\n
using System;\nusing System.IO;\nusing System.Linq;\nusing System.Net;\nusing System.Net.Http;\nusing System.Threading.Tasks;\nusing System.Web.Http;\nusing Microsoft.WindowsAzure.Storage;\nusing System.Configuration;\nusing ImageUploadAPI.Controllers;\nusing Swashbuckle.Swagger.Annotations;\nnamespace ImageUpload.Controllers\n{\n    public class UploadImageController : ApiController\n    {\n        [HttpPost]\n        [SwaggerResponse(\n            HttpStatusCode.OK,\n            Description = \"Saved successfully\",\n            Type = typeof(UploadedFileInfo))]\n        [SwaggerResponse(\n            HttpStatusCode.BadRequest,\n            Description = \"Could not find file to upload\")]\n        [SwaggerOperation(\"UploadImage\")]\n        public async Task<IHttpActionResult> UploadImage(string fileName = \"\")\n        {\n            \/\/Use a GUID in case the fileName is not specified\n            if (fileName == \"\")\n            {\n                fileName = Guid.NewGuid().ToString();\n            }\n            \/\/Check if submitted content is of MIME Multi Part Content with Form-data in it?\n            if (!Request.Content.IsMimeMultipartContent(\"form-data\"))\n            {\n                return BadRequest(\"Could not find file to upload\");\n            }\n            \/\/Read the content in a InMemory Muli-Part Form Data format\n            var provider = await Request.Content.ReadAsMultipartAsync(new InMemoryMultipartFormDataStreamProvider());\n            \/\/Get the first file\n            var files = provider.Files;\n            var uploadedFile = files[0];\n            \/\/Extract the file extention\n            var extension = ExtractExtension(uploadedFile);\n            \/\/Get the file's content type\n            var contentType = uploadedFile.Headers.ContentType.ToString();\n            \/\/create the full name of the image with the fileName and extension\n            var imageName = string.Concat(fileName, extension);\n            \/\/Get the reference to the Blob Storage and upload the file there\n            var storageConnectionString = ConfigurationManager.AppSettings[\"StorageConnectionString\"];\n            var storageAccount = CloudStorageAccount.Parse(storageConnectionString);\n            var blobClient = storageAccount.CreateCloudBlobClient();\n            var container = blobClient.GetContainerReference(\"images\");\n            container.CreateIfNotExists();\n            var blockBlob = container.GetBlockBlobReference(imageName);\n            blockBlob.Properties.ContentType = contentType;\n            using (var fileStream = await uploadedFile.ReadAsStreamAsync()) \/\/as Stream is IDisposable\n            {\n                blockBlob.UploadFromStream(fileStream);\n            }\n            var fileInfo = new UploadedFileInfo\n            {\n                FileName = fileName,\n                FileExtension = extension,\n                ContentType = contentType,\n                FileURL = blockBlob.Uri.ToString()\n            };\n            return Ok(fileInfo);\n        }\n        public static string ExtractExtension(HttpContent file)\n        {\n            var invalidChars = Path.GetInvalidFileNameChars();\n            var fileStreamName = file.Headers.ContentDisposition.FileName;\n            var fileName = new string(fileStreamName.Where(x => !invalidChars.Contains(x)).ToArray());\n            var extension = Path.GetExtension(fileName);\n            return extension;\n        }\n    }\n}\n<\/pre>\n
Open <\/strong>the SwaggerConfig.cs <\/strong>file from the App_Start folder. <\/strong><\/p>\n
Search <\/strong>for the following comment in the code.\u00a0 <\/strong><\/p>\n
\u00a0<\/p>\n
\/\/ ***** Uncomment the following to enable the swagger UI *****<\/pre>\n
\u00a0<\/p>\n
Uncomment <\/strong>the next 4 lines of code after the comment, once done the code should look like as follows.<\/p>\n
\u00a0 <\/pre>\n
                    })\n                    .EnableSwaggerUi(c =>\n                    {\n<\/pre>\n
Search <\/strong>for the following comment in the code.\u00a0 <\/strong><\/p>\n
\/\/c.OperationFilter<AddDefaultResponse>();<\/pre>\n
Add <\/strong>the following two lines of code immediately after the line<\/p>\n
\/\/ Adding the AddFileParamTypes OperationFilter for Swagger to understand Multipart Form Data\nc.OperationFilter<AddFileParamTypes>();<\/pre>\n\n
Test your API locally using the Microsoft Azure Storage Emulator<\/h2>\n
Open <\/strong>the Web.Config <\/strong>file and find the <appSettings> section.<\/p>\n
Add <\/strong>the following line in between the <appSettings> and <\/appSettings> tag like this .<\/p>\n
  <appSettings>\n    <add key=\"StorageConnectionString\" value=\"UseDevelopmentStorage=true\" \/>\n  <\/appSettings><\/pre>\n
Start <\/strong>the Microsoft Azure Storage Emulator<\/a> as we have used the UseDevelopmentStorage=true flag above to test.<\/p>\n
Run <\/strong>the application by clicking F5. <\/strong>It should open the browser window with the URL http:\/\/localhost:<PortNumber>\/. Append the string swagger <\/strong>to the end of the URL to make it http:\/\/localhost:<PortNumber>\/swagger<\/strong> in the browser Address Bar and press Enter<\/strong>.\u00a0<\/strong><\/p>\n
You should see the swagger UI page. Expand <\/strong>by clicking <\/strong>the UploadImage <\/strong>link and click <\/strong>on the \u201cPost<\/strong>\u201d button. Browse <\/strong>for an image file from your machine. [Optionally] provide a fileName and Click <\/strong>on the \u201cTry it out!<\/strong>\u201d button.<\/p>\n
\u00a0<\/p>\n
\"image\"<\/p>\n
You should see a 200 Response Code with a JSON in the Response Body containing the four properties similar to the screenshot below.<\/p>\n
\"image\"\u00a0<\/p>\n
\u00a0<\/p>\n\n
Publish the API to Azure<\/h2>\n
Create <\/strong>a new Storage account of type Blob Storage or use an existing one and add a Container of type Blob by the name images<\/em>. Construct your StorageConnectionString by replace the MyStorageAccountName <\/em>and 1234 <\/em>with your Storage account name and one of the Access keys.<\/p>\n
DefaultEndpointsProtocol=https;AccountName=MyStorageAccountName<\/em>;AccountKey=1234<\/em><\/pre>\n
\u00a0<\/p>\n
Change <\/strong>the value of the StorageConnectionString in the Web.Config file to the actual StorageConnectionString constructed above.<\/p>\n
\u00a0<\/p>\n
Publish <\/strong>your API to Azure, by right clicking on the project and selecting Publish<\/strong>.<\/p>\n
Test <\/strong>by appending swagger to the end of the URL for example https:\/\/yourapiname.azurewebsites.net\/swagger<\/a>.<\/p>\n
You should the swagger UI page as earlier. \u00a0Expand <\/strong>by clicking <\/strong>the UploadImage <\/strong>link and click <\/strong>on the \u201cPost<\/strong>\u201d button. Browse <\/strong>for an image\u00a0 file from your machine. [Optionally] provide a fileName and Click <\/strong>on the \u201cTry it out!<\/strong>\u201d button.<\/p>\n
\"image\"<\/p>\n
You should see a 200 Response Code with a JSON in the Response Body containing the four properties similar to the screenshot below.<\/pre>\n
\"image\"<\/pre>\n\n
Source Code Location<\/h2>\n
The complete source code for this solution can be found at https:\/\/github.com\/pratapladhani\/ImageUploadAPI<\/a>.<\/p>\n\n
Download the Swagger file for registration with PowerApps<\/h2>\n
PowerApps requires the APIs to be registered using the swagger file<\/a>. Swagger UI allows us to download the swagger file directly from the browser.\u00a0 <\/p>\n
Copy<\/strong> the URL from the Swagger UI (as shown in the image below) and paste<\/strong> it on the address bar of a new browser window<\/strong>. \"image\"<\/p>\n
Save <\/strong>the file locally in your machine by the name \u201cImageUploadAPI-swagger.json\u201d.<\/p>\n
\"image\"<\/p>\n\n
Register the Custom API in PowerApps using the swagger file<\/h2>\n
Browse <\/strong>to https:\/\/web.powerapps.com<\/a>. Login using your work or school email id. Click <\/strong>on Manage <\/strong>on the left nav and then on Connections<\/strong>.<\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Then click on New Connection <\/strong>on the top right side.<\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Click on Custom<\/strong> and then on New custom API.<\/strong><\/p>\n
\"image\"<\/p>\n
Give a Name \u201cImageUpload\u201d <\/strong>for your custom API. This is how you will call your API from PowerApps. Select <\/strong>the Swagger file from your local machine for Swagger API definition<\/strong>. [Optional] Add any API icon file (32X32).\u00a0 [Optional] Provide a description for your API.<\/p>\n
<\/strong>\u00a0<\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Click on Next<\/strong>. Select <\/strong>\u201cNo Authentication\u201d as the authentication type and click on Create<\/strong>. It is not recommended <\/strong>to leave your API endpoint as \u201cNo Authentication\u201d. We shall test the API first and later I shall point to the steps for securing the API and the custom API endpoint with AAD authentication. <\/p>\n
\"image\"<\/p>\n\n
Create a PowerApp with Camera control <\/h2>\n
Open <\/strong>PowerApps on your Windows 8\/10 machine (If you haven\u2019t installed PowerApps yet, you can download <\/strong>PowerApps from https:\/\/aka.ms\/powerappswin<\/a>). Sign-in <\/strong>using your work or school email id.\u00a0 Then click on New <\/strong>from the left nav and look for Create an app <\/strong>> Blank app <\/strong>> Tablet layout.<\/strong><\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
This will open a blank Tablet app with a default screen. Click <\/strong>on Insert <\/strong>> Media <\/strong>> Camera <\/strong>to insert a camera control to the page. <\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Move the Camera1 control to the center of the screen. <\/p>\n
\"image\"<\/p>\n
[Optional]<\/strong> If you are using a device with multipe cameras, you may want to have a way to switch between front and back cameras. We shall insert a Toggle Switch an bind it to the Camera control to toggle between front and back cameras. <\/p>\n
\n
Click on Insert <\/strong>> Controls <\/strong>> Toggle <\/strong>to insert a Toggle control. Click Insert <\/strong>> Text box <\/strong>to insert a Text box (label) control. Place it next to the camera and change the Text <\/strong>property for the Text box <\/strong>to “Toggle front\/back camera”<\/strong>.<\/p>\n<\/blockquote>\n
\"image\"<\/p>\n
\n
With the Camera1<\/strong> control selected, change the dropdown on the top left to Camera <\/strong>and type the following formula in the Formula bar.<\/p>\n<\/blockquote>\n
\n
If(Toggle1.Value, 1,0)<\/pre>\n<\/blockquote>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Add a Text Input Box for entering the File name.\u00a0 Click Insert <\/strong>> Text<\/strong> >\u00a0 Text input<\/strong> to add a Text input control to the screen. <\/p>\n
\"image\"<\/p>\n
Move <\/strong>the Text Input <\/strong>below the Camera control. Change<\/strong> the Text <\/strong>property of the Text Input <\/strong>to an empty string “”. Change <\/strong>the HintText<\/strong> property of the Text Input <\/strong>to “File name”.<\/strong>\u00a0\"image\"<\/p>\n
Click <\/strong>on File > Save <\/strong>and the give a name to your app \u201cCameraUploadApp\u201d to save your app to The cloud<\/strong>.<\/p>\n
\"image\"<\/p>\n\n
Use the custom API to upload the image from the Camera control<\/h2>\n
Add the Data source for the custom API in the PowerApps app. Click on Content<\/strong> > Data Sources<\/strong> > Add data source<\/strong> button from the right pane. <\/p>\n
\"image\"<\/p>\n
Click on Add connection.<\/strong><\/p>\n
\"image\"<\/p>\n
Select the ImageUpload<\/strong> API that you created earlier and click on Connect <\/strong>to add it to the app. <\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
Now we shall use a formula to upload the camera\u2019s image using the api and collect the output file path to a static collection. <\/p>\n
Click <\/strong>on the Camera control <\/strong>then click on Action <\/strong>> OnSelect <\/strong>and enter the following formula:<\/p>\n
\"image\"<\/p>\n
Collect(MyPictures, {URL:ImageUploadAPI.UploadImage(Camera1.Photo, {fileName: TextInput1.Text}).FileURL, Name:TextInput1.Text, Time:Now()})<\/pre>\n
This formula adds passes the current Camera picture and the text from the Text Input box to the API and adds the output FileURL to a new collection with these three columns : URL, Name & Time. It also assigns the same Text Input text to the Name and assigns the current time to the Time column. <\/p>\n
Lets now insert a Gallery below to display this new collection.<\/p>\n
Click<\/strong> on Insert <\/strong>> Gallery <\/strong>> Select the third item on the first row – Horizontal Image Gallery With Text <\/strong>to add a gallery to the screen. <\/p>\n
\"image\"<\/p>\n
Position it below the Camera Control and resize it to use the full width of the screen.<\/p>\n
\"image\"<\/p>\n
With the Gallery1 <\/strong>selected, change <\/strong>the Items <\/strong>property from ImageGallerySample <\/strong>to MyPictures.<\/strong><\/p>\n
\"image\"<\/p>\n
Click <\/strong>on the Preview the app\u00a0 <\/strong>icon on the top right <\/strong>OR press F5 to Preview <\/strong>the app. <\/p>\n
\"image\"<\/p>\n
Enter the name of the image and then click <\/strong>on the Camera to execute the upload. Change the name of the image and click on the Camera again to upload a new image. <\/p>\n
You should see the newly uploaded images in the gallery below.\u00a0 Select the Gallery and use the right nav to modify which columns bind to which controls. Select the URL, Name & Time respectively for the Image & and the two text boxes.<\/p>\n
\"image\"<\/p>\n
\"image\"<\/p>\n
\u00a0<\/p>\n
You have successfully uploaded the images to the blob storage. You can verify that with Azure Storage Explorer<\/a> as well.<\/p>\n
\"image\"<\/p>\n\n
[Optional but recommended] Secure the API app and the custom API with Azure Active Directory<\/h2>\n
Please follow this article<\/a> to configure AAD for the API App. <\/p>\n
Once completed follow this tutorial<\/a> for configuring AAD authentication for the custom API.<\/p>\n
In a subsequent blog post, I\u2019ll try to show all the steps for securing both the API App as well as protecting the custom API also with AAD. <\/p>\n\n
Feedback welcome<\/h2>\n
Hope this is helpful. Looking forward to the great scenarios that you all with build using PowerApps. <\/p>\n
Please share your feedback using the comments below.\u00a0 Also do suggest other topics that you would like us to blog about.\u00a0 <\/p>\n","protected":false},"excerpt":{"rendered":"
This article explains how to create a Azure API App which takes in an image file, stores it on a Azure blob storage account and returns the URL of the image. This API can then be called from any application including PowerApps.<\/p>\n","protected":false},"author":100,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[],"job-role":[],"product":[3473],"property":[],"topic":[3421],"coauthors":[2347],"class_list":["post-298","post","type-post","status-publish","format-standard","hentry","audience-it-professional","product-power-apps","topic-application-modernization"],"yoast_head":"\nHow to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"This article explains how to create a Azure API App which takes in an image file, stores it on a Azure blob storage account and returns the URL of the image. This API can then be called from any application including PowerApps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/custom-api-for-image-upload\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-22T12:19:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:17:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png\" \/>\n<meta name=\"author\" content=\"Pratap Ladhani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pratap Ladhani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\"},\"author\":[{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pratap-ladhani\/\",\"@type\":\"Person\",\"@name\":\"Pratap Ladhani\"}],\"headline\":\"How to upload images from the camera control to Azure blob storage\",\"datePublished\":\"2016-09-22T12:19:11+00:00\",\"dateModified\":\"2025-06-11T15:17:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\"},\"wordCount\":1631,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\",\"name\":\"How to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png\",\"datePublished\":\"2016-09-22T12:19:11+00:00\",\"dateModified\":\"2025-06-11T15:17:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage\",\"url\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png\",\"contentUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to upload images from the camera control to Azure blob storage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/b65835b61629a2fd09f24a46fceb2bff\",\"name\":\"Pratap Ladhani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=gef2fe6828f30df80244cfd43b7ca6b57\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g\",\"caption\":\"Pratap Ladhani\"},\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pladhani\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog","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:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/","og_locale":"en_US","og_type":"article","og_title":"How to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog","og_description":"This article explains how to create a Azure API App which takes in an image file, stores it on a Azure blob storage account and returns the URL of the image. This API can then be called from any application including PowerApps.","og_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/custom-api-for-image-upload\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2016-09-22T12:19:11+00:00","article_modified_time":"2025-06-11T15:17:25+00:00","og_image":[{"url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png","type":"","width":"","height":""}],"author":"Pratap Ladhani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pratap Ladhani","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#article","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/"},"author":[{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pratap-ladhani\/","@type":"Person","@name":"Pratap Ladhani"}],"headline":"How to upload images from the camera control to Azure blob storage","datePublished":"2016-09-22T12:19:11+00:00","dateModified":"2025-06-11T15:17:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/"},"wordCount":1631,"commentCount":0,"publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/","name":"How to upload images from the camera control to Azure blob storage - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png","datePublished":"2016-09-22T12:19:11+00:00","dateModified":"2025-06-11T15:17:25+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#primaryimage","url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png","contentUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/86e9cc23-ee32-410c-8cc5-439ed14f8ee0.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2016\/09\/22\/custom-api-for-image-upload\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"How to upload images from the camera control to Azure blob storage"}]},{"@type":"WebSite","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/b65835b61629a2fd09f24a46fceb2bff","name":"Pratap Ladhani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=gef2fe6828f30df80244cfd43b7ca6b57","url":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g","caption":"Pratap Ladhani"},"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pladhani\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":1,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":128791,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/298\/revisions\/128791"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=298"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=298"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=298"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=298"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=298"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=298"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}