In this blog post I will show you how you can quickly build a public facing file upload tool using Dropzone.js and the Power Automate action When a HTTP Request is Received (Premium license required). Files dropped in by a browser can easily be uploaded to OneDrive or a SharePoint document library.
Table of contents
Introduction
You could use this tool to allow customers or partners to easily transfer files into your environment.
The flow includes some basic file type checking to ensure that certain file types are not uploaded. If you would like to try a demo of the client side of the flow, check out this page. Here is a screenshot of an example of how it would look.
Files are simply dropped on to the page and then they are uploaded to a SharePoint document library, immediately after. This flow consists of two parts and the trigger for both of them is When a HTTP Request is received:
- A HTTP Server that serves the HTML and Javascript to the browser
(Can be served from Power Automate or any other web server). - Another HTTP Server Flow which receives the uploaded files from the client and uploads them to SharePoint.
The Server Component
The first step is to build the server component. This will ingest the uploads from the client and the flow for this is very simple, here is a screenshot:
Server Side Flow Code and Implementation
To make it as easy as possible for you to build this flow, I have put all of the actions into a scope which you can copy into one of your own flows, so to implement this for yourself, follow these steps:
- Create a new flow and use When a HTTP request is received as the trigger.
- Modify the HTTP method to POST.
- Copy the scope code below and paste it into your flow from My Clipboard.
- Modify the settings compose action to include your SharePoint site and document library path.
- Optional: Modify the UnsafeFileTypes array to your liking.
- Save the Flow and then copy the HTTP POST URL from the first step, you will need it in the next step.
{
"id": "6c9bd70a-d149-40b6-ad46-a6eb-cfa45e3a",
"brandColor": "#8C3900",
"connectionReferences": {
"shared_sharepointonline": {
"connection": {
"id": "/providers/Microsoft.PowerApps/apis/shared_sharepointonline/connections/shared-sharepointonl-46297fd3-182c-4215-bd63-ab2ad4fa0c11"
}
}
},
"connectorDisplayName": "Control",
"icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=",
"isTrigger": false,
"operationName": "FileUpload",
"operationDefinition": {
"type": "Scope",
"actions": {
"Settings": {
"type": "Compose",
"inputs": {
"siteAddress": "https://accendo1.sharepoint.com/sites/PowerAutomateText",
"documentLibrary": "/Web Uploads"
},
"runAfter": {},
"description": "Used to configure the settings for the remainder of the flow",
"trackedProperties": {
"filename": "@{replace(substring(triggerBody()['$multipart'][0]['headers']['Content-Disposition'],add(indexOf(triggerBody()['$multipart'][0]['headers']['Content-Disposition'], 'filename=\"'), 10)), '\"', '')}"
}
},
"UnsafeFileTypes": {
"type": "Compose",
"inputs": [
".BAT",
".CHM",
".CMD",
".COM",
".CPL",
".CRT",
".EXE",
".HLP",
".HTA",
".INF",
".INS",
".ISP",
".JS",
".JSE",
".LNK",
".MSC",
".MSI",
".MSP",
".MST",
".PCD",
".PIF",
".REG",
".SCR",
".SCT",
".SHB",
".SHS",
".URL",
".VB",
".VBE",
".VBS",
".WSC",
".WSF",
".WSH"
],
"runAfter": {
"Settings": [
"Succeeded"
]
},
"description": "List of file types to prohibit from upload"
},
"UnsafeAttachmentFilter": {
"type": "Query",
"inputs": {
"from": "@outputs('UnsafeFileTypes')",
"where": "@endswith(toUpper(actions('settings')?['trackedProperties']['filename']), item())"
},
"runAfter": {
"UnsafeFileTypes": [
"Succeeded"
]
}
},
"Condition": {
"type": "If",
"expression": {
"equals": [
"@length(body('UnsafeAttachmentFilter'))",
0
]
},
"actions": {
"Create_file": {
"type": "OpenApiConnection",
"inputs": {
"host": {
"connectionName": "shared_sharepointonline",
"operationId": "CreateFile",
"apiId": "/providers/Microsoft.PowerApps/apis/shared_sharepointonline"
},
"parameters": {
"dataset": "@outputs('Settings')['siteAddress']",
"folderPath": "@outputs('Settings')['documentLibrary']",
"name": "@actions('settings')?['trackedProperties']['filename']",
"body": "@if\r\n(\r\n contains(triggerBody()['$multipart'][0]['body'], '$content'),\r\n base64ToBinary(triggerBody()['$multipart'][0]['body']['$content']),\r\n triggerBody()['$multipart'][0]['body']\r\n)"
},
"authentication": "@parameters('$authentication')"
},
"runAfter": {},
"runtimeConfiguration": {
"contentTransfer": {
"transferMode": "Chunked"
}
}
}
},
"runAfter": {
"UnsafeAttachmentFilter": [
"Succeeded"
]
},
"description": "Check if the file has an unsafe extension"
},
"Response": {
"type": "Response",
"kind": "http",
"inputs": {
"statusCode": "@if(equals(length(body('UnsafeAttachmentFilter')), 0), 200, 403)",
"body": "@if(equals(length(body('UnsafeAttachmentFilter')), 0), 'File Upload Succesful', 'File Type Not Allowed')"
},
"runAfter": {
"Condition": [
"Succeeded"
]
}
}
},
"runAfter": {}
}
}
Implement the Browser Facing Interface
The page the client sees can be served either from a HTTP flow in Power Automate, or a static page.
Create a Static HTML Page
To make a Static Page you can:
- Copy the HTML source code below.
- Modify line 48 so that it contains the URL to the flow created in the previous section.
- Upload to your web server.
- Optional
- Modify Line 73 to change the header.
- Modify or remove lines 93-96 to change the reference to this blog post.
That is all there is to it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Example of how to use Dropzone to upload files to a SharePoint document library with Power Automate">
<title>Upload file to SharePoint with Power Automate and dropzone</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
height: 100%;
color: #646c7f;
line-height: 1.4rem;
font-family: Roboto, "Open Sans", sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility
}
h1 {
text-align: center
}
.dropzone {
background: #fff;
border-radius: 5px;
border: 2px dashed #0087f7;
border-image: none;
max-width: 500px;
margin-left: auto;
margin-right: auto
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css" integrity="sha512-MeagJSJBgWB9n+Sggsr/vKMRFJWs+OUphiDV7TJiYu+TNQD9RtVJaPDYP8hA/PAjwRnkdvU+NsTncYTKlltgiw==" crossorigin="anonymous" />
</head>
<body class="text-center">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js" integrity="sha512-VQQXLthlZQO00P+uEu4mJ4G4OAgqTtKG1hri56kQY1DtdLeIqhKUp9W/lllDDu3uN3SnUNawpW7lBda8+dSi7w==" crossorigin="anonymous"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#demo-upload").dropzone({
url: "https://prod-93.westeurope.logic.azure.com:443/workflows/8b289c3a0a29469aaae2410175f212ac/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=hiEI5Dwv-bWRVUB-h5gvvC2LdDBD9WavpLBUm4JGIvM",
previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 1,
thumbnailHeight: 200,
thumbnailWidth: 200,
maxFilesize: 10,
filesizeBase: 1000,
thumbnail: function(file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll(
"[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function() {
file.previewElement.classList.add("dz-image-preview");
}, 1);
}
}
});
});
</script>
<h1>File Upload Demo using DropzoneJS and Power Automate</h1>
<SECTION>
<DIV id="dropzone">
<FORM id="demo-upload"
class="dropzone needsclick"
action="/power_automate/"
enctype="multipart/form-data"
method="post">
<DIV class="dz-message needsclick">
Drop files here or click to upload.<BR>
<SPAN class="note needsclick"> Selected files are uploaded to a
SharePoint document library</SPAN>
</DIV>
</FORM>
</DIV>
</SECTION>
<br />
<hr size="3" noshade color="#F00000">
<div style="font-size: 0.8em;">
<p>For more details on how this works, please check out the blog post <a href="http://tachytelic.net/2021/06/power-automate-file-upload-dropzonejs" target="_blank">the blog post</a>, which provides details on
how to configure the Power Automate Flow</p>
</div>
<DIV id="preview-template" style="display: none;">
<DIV class="dz-preview dz-file-preview">
<DIV class="dz-image"><IMG data-dz-thumbnail=""></DIV>
<DIV class="dz-details">
<DIV class="dz-size"><SPAN data-dz-size=""></SPAN></DIV>
<DIV class="dz-filename"><SPAN data-dz-name=""></SPAN></DIV>
</DIV>
<DIV class="dz-progress"><SPAN class="dz-upload" data-dz-uploadprogress=""></SPAN></DIV>
<DIV class="dz-error-message"><SPAN data-dz-errormessage=""></SPAN></DIV>
<div class="dz-success-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Check</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" stroke-opacity="0.198794158" stroke="#747474" fill-opacity="0.816519475" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="dz-error-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>error</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475">
<path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</div>
</body>
</html>
Create a Power Automate Flow
If you do not have a web server you can use to serve the static page, then you can use a flow to provide the browser interface instead. Here is how to create it:
- Create a new flow and use When a HTTP request is received as the trigger.
- Change the method to GET
- Copy the scope code below and paste it to your flow.
- Modify the settings action to suit your requirements. You must update the URL parameter to the URL of the server flow defined in the previous section.
Here is the scope code:
{
"id": "14df8e31-7d3a-4dbc-9151-4a25-f8d8b4e5",
"brandColor": "#8C3900",
"connectionReferences": {
"shared_sendmail": {
"connection": {
"id": "/providers/Microsoft.PowerApps/apis/shared_sendmail/connections/shared-sendmail-510245c4-46f9-4771-9ab0-d4d8-f8faacd5"
}
}
},
"connectorDisplayName": "Control",
"icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=",
"isTrigger": false,
"operationName": "DropzoneBrowserInterface",
"operationDefinition": {
"type": "Scope",
"actions": {
"settings": {
"type": "Compose",
"inputs": {
"headerText": "File Upload Demo using DropzoneJS and Power Automate",
"url": "https://prod-93.westeurope.logic.azure.com:443/workflows/8b289c3a0a29469aaae2410175f212ac/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=hiEI5Dwv-bWRVUB-h5gvvC2LdDBD9WavpLBUm4JGIvM",
"thumbnailHeight": "200",
"thumbnailWidth": "200",
"maxFilesize": "10"
},
"runAfter": {}
},
"HTML": {
"type": "Compose",
"inputs": "<!doctype html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"description\" content=\"Example of how to use Dropzone to upload files to a SharePoint document library with Power Automate\">\n <title>Upload file to SharePoint with Power Automate and dropzone</title>\n <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\">\n <style>\n body {\n background: #f3f4f5;\n height: 100%;\n color: #646c7f;\n line-height: 1.4rem;\n font-family: Roboto, \"Open Sans\", sans-serif;\n font-size: 20px;\n font-weight: 300;\n text-rendering: optimizeLegibility\n }\n\n h1 {\n text-align: center\n }\n\n .dropzone {\n background: #fff;\n border-radius: 5px;\n border: 2px dashed #0087f7;\n border-image: none;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto\n }\n </style>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css\" integrity=\"sha512-MeagJSJBgWB9n+Sggsr/vKMRFJWs+OUphiDV7TJiYu+TNQD9RtVJaPDYP8hA/PAjwRnkdvU+NsTncYTKlltgiw==\" crossorigin=\"anonymous\" />\n</head>\n\n<body class=\"text-center\">\n <script src=\"https://code.jquery.com/jquery-3.4.1.slim.min.js\" integrity=\"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n\" crossorigin=\"anonymous\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>\n <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js\" integrity=\"sha512-VQQXLthlZQO00P+uEu4mJ4G4OAgqTtKG1hri56kQY1DtdLeIqhKUp9W/lllDDu3uN3SnUNawpW7lBda8+dSi7w==\" crossorigin=\"anonymous\"></script>\n <script type=\"text/javascript\">\n Dropzone.autoDiscover = false;\n $(document).ready(function () {\n $(\"#demo-upload\").dropzone({\n url: \"@{outputs('settings')['url']}\",\n previewTemplate: document.querySelector('#preview-template').innerHTML,\n parallelUploads: 1,\n thumbnailHeight: @{outputs('settings')['thumbnailHeight']},\n thumbnailWidth: @{outputs('settings')['thumbnailWidth']},\n maxFilesize: @{outputs('settings')['maxFilesize']},\n filesizeBase: 1000,\n thumbnail: function(file, dataUrl) {\n if (file.previewElement) {\n file.previewElement.classList.remove(\"dz-file-preview\");\n var images = file.previewElement.querySelectorAll(\n \"[data-dz-thumbnail]\");\n for (var i = 0; i < images.length; i++) {\n var thumbnailElement = images[i];\n thumbnailElement.alt = file.name;\n thumbnailElement.src = dataUrl;\n }\n setTimeout(function() {\n file.previewElement.classList.add(\"dz-image-preview\");\n }, 1);\n }\n }\n });\n });\n </script>\n <h1>@{outputs('settings')['headerText']}</h1>\n <SECTION>\n <DIV id=\"dropzone\">\n <FORM id=\"demo-upload\" \n class=\"dropzone needsclick\" \n action=\"/power_automate/\" \n enctype=\"multipart/form-data\" \n method=\"post\">\n <DIV class=\"dz-message needsclick\">\n Drop files here or click to upload.<BR>\n <SPAN class=\"note needsclick\"> Selected files are uploaded to a\n SharePoint document library</SPAN>\n </DIV>\n </FORM>\n </DIV>\n </SECTION>\n\n <br />\n <hr size=\"3\" noshade color=\"#F00000\">\n\n <div style=\"font-size: 0.8em;\">\n <p>For more details on how this works, please check out <a href=\"http://tachytelic.net/2021/06/power-automate-file-upload-dropzonejs\" target=\"_blank\">the blog post</a>, which provides details on\n how to configure the Power Automate Flow</p>\n </div>\n <DIV id=\"preview-template\" style=\"display: none;\">\n <DIV class=\"dz-preview dz-file-preview\">\n <DIV class=\"dz-image\"><IMG data-dz-thumbnail=\"\"></DIV>\n <DIV class=\"dz-details\">\n <DIV class=\"dz-size\"><SPAN data-dz-size=\"\"></SPAN></DIV>\n <DIV class=\"dz-filename\"><SPAN data-dz-name=\"\"></SPAN></DIV>\n </DIV>\n <DIV class=\"dz-progress\"><SPAN class=\"dz-upload\" data-dz-uploadprogress=\"\"></SPAN></DIV>\n <DIV class=\"dz-error-message\"><SPAN data-dz-errormessage=\"\"></SPAN></DIV>\n <div class=\"dz-success-mark\">\n <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\">\n <title>Check</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" sketch:type=\"MSPage\">\n <path d=\"M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\" id=\"Oval-2\" stroke-opacity=\"0.198794158\" stroke=\"#747474\" fill-opacity=\"0.816519475\" fill=\"#FFFFFF\" sketch:type=\"MSShapeGroup\"></path>\n </g>\n </svg>\n </div>\n <div class=\"dz-error-mark\">\n <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\">\n <title>error</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" sketch:type=\"MSPage\">\n <g id=\"Check-+-Oval-2\" sketch:type=\"MSLayerGroup\" stroke=\"#747474\" stroke-opacity=\"0.198794158\" fill=\"#FFFFFF\" fill-opacity=\"0.816519475\">\n <path d=\"M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\" id=\"Oval-2\" sketch:type=\"MSShapeGroup\"></path>\n </g>\n </g>\n </svg>\n </div>\n</body>\n\n</html>",
"runAfter": {
"settings": [
"Succeeded"
]
}
},
"Response": {
"type": "Response",
"kind": "http",
"inputs": {
"statusCode": 200,
"headers": {
"Content-Type": "text/html; charset=UTF-8"
},
"body": "@outputs('HTML')"
},
"runAfter": {
"HTML": [
"Succeeded"
]
}
}
},
"runAfter": {}
}
}
Your flow should look like this:
Conclusion
There are many ways the HTTP action can be used and this is a neat little flow that provides a super simple method to upload files into your Office 365 environment for external partners and customers. I’d be really interested to hear if you implement this and what you are using it for.
pal says
Hi Paul, Is there a way to know who uploaded the file to get the customer details to the flow?
Jeremy says
Hi Paul, great post! I’m also wondering how to pass an email address to the Server Side Flow Code so I can identify the submitter of the file. Any help on that would be greatly appreciated! Thanks
Matt says
Your post looks like exactly what I am looking for. I tried to implement the server side flow and the flow checker is hung up on Fix invalid expressions for the input parameters of operation ‘Settings’. I assume this is related to the tracked properties, but i have never seen or used that functionality before. Any ideas on how to proceed?
Tyler says
For the issue on the Settings tracked properties, when copying the scope it removes any blanks represented by two single quotes ”.
You need to add two single quotes ” to the end of the tracked properties expression in the settings of the Settings action so it reads…
“@{replace( substring(triggerBody()[‘$multipart’][0][‘headers’][‘Content-Disposition’], add(indexOf(triggerBody()[‘$multipart’][0][‘headers’][‘Content-Disposition’], ‘filename=\”‘), 10)), ‘\”‘, ”)}”
Eric says
Hi Paul this is very helpful and is exactly what I have been looking for however I am stuck on the server side implementation, and getting fix invalid expression for input parameter for settings and FileUpload which I assume is what you were referring to in previous comment. Can you please elaborate on where I need to add the two single quote?