{"id":65,"date":"2023-10-15T12:24:01","date_gmt":"2023-10-15T10:24:01","guid":{"rendered":"https:\/\/www.broggi.dev\/blog\/?p=65"},"modified":"2023-10-20T12:48:56","modified_gmt":"2023-10-20T10:48:56","slug":"how-to-send-file-from-angular-to-web-api-c-net","status":"publish","type":"post","link":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/","title":{"rendered":"How to send File from Angular To Web Api C# .Net"},"content":{"rendered":"\n<p>Passing a file from Angular to a C# Web API with .NET 5.0 can be useful when you need to upload a file to your server for processing or storage. Here&#8217;s how:<\/p>\n\n\n\n<p>1: You need to configure your C# Web API to accept uploaded files. To do this, you need to add a controller action that takes as input an object of type IFormFile. Here&#8217;s what it might look like:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;HttpPost]\npublic async Task&lt;IActionResult&gt; UploadFile(&#91;FromForm] IFormFile file)\n{\n    byte&#91;] fileBytes;\n    using (var ms = new MemoryStream())\n    {\n        file.CopyTo(ms);\n        fileBytes = ms.ToArray();\n        \/\/ File processing\n\n    }\n}\n\n<\/code><\/pre>\n\n\n\n<p>2: In your Angular application, you need to use the FormData object to construct an HTTP POST request containing the file to upload. You can use the append() method of FormData to add the file to the request:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>uploadFile(file: File) {\n    const formData = new FormData();\n\n    formData.append('file', file, file.name);\n\n    this.http.post('\/api\/upload', formData).subscribe(...);\n}\n\n<\/code><\/pre>\n\n\n\n<p>Note that in .NET 5.0 you can also use the IFormFileCollection interface to accept multiple files in a single controller action:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;HttpPost]\npublic async Task&lt;IActionResult&gt; (&#91;FromForm] IFormFileCollection files)\n{\n     \/\/ File processing\n}\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>uploadFiles(files: FileList) {\n    const formData = new FormData();\n\n    for (let i = 0; i &lt; files.length; i++) {\n        formData.append('files', files&#91;i], files&#91;i].name);\n    }\n\n    this.http.post('\/api\/upload', formData).subscribe(...);\n}\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Passing a file from Angular to a C# Web API with .NET 5.0 can be useful when you need to upload a file to your server for processing or storage. Here&#8217;s how: 1: You need to configure your C# Web API to accept uploaded files. To do this, you need to add a controller action [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,33],"tags":[28,25,27,26,29,32,30,31],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-net","category-angular","tag-net-5-0","tag-angular","tag-c-web-api","tag-file-upload","tag-formdata","tag-http-post","tag-iformfile","tag-iformfilecollection"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net<\/title>\r\n<meta name=\"description\" content=\"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"og:description\" content=\"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"article:published_time\" content=\"2023-10-15T10:24:01+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-10-20T10:48:56+00:00\" \/>\r\n<meta name=\"author\" content=\"Broggi Quentin\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Broggi Quentin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\"},\"author\":{\"name\":\"Broggi Quentin\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"headline\":\"How to send File from Angular To Web Api C# .Net\",\"datePublished\":\"2023-10-15T10:24:01+00:00\",\"dateModified\":\"2023-10-20T10:48:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\"},\"wordCount\":138,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"keywords\":[\".NET 5.0\",\"Angular\",\"C# Web API\",\"File Upload\",\"FormData\",\"HTTP POST\",\"IFormFile\",\"IFormFileCollection\"],\"articleSection\":[\".NET\",\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\",\"name\":\"How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\"},\"datePublished\":\"2023-10-15T10:24:01+00:00\",\"dateModified\":\"2023-10-20T10:48:56+00:00\",\"description\":\"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.broggi.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to send File from Angular To Web Api C# .Net\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\",\"url\":\"https:\/\/www.broggi.dev\/blog\/\",\"name\":\"Broggi Quentin blog about Angular & .Net\",\"description\":\"Exploring Angular &amp; .NET Development\",\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\",\"name\":\"Broggi Quentin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"contentUrl\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"width\":2560,\"height\":1828,\"caption\":\"Broggi Quentin\"},\"logo\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\"},\"description\":\"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!\",\"sameAs\":[\"https:\/\/www.broggisoft.com\/blog\",\"https:\/\/www.linkedin.com\/in\/quentin-broggi\/\"],\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net","description":"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.","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.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/","og_locale":"en_US","og_type":"article","og_title":"How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net","og_description":"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.","og_url":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/","og_site_name":"Quentin Broggi&#039;s blog about Angular &amp; .Net","article_published_time":"2023-10-15T10:24:01+00:00","article_modified_time":"2023-10-20T10:48:56+00:00","author":"Broggi Quentin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Broggi Quentin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#article","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/"},"author":{"name":"Broggi Quentin","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"headline":"How to send File from Angular To Web Api C# .Net","datePublished":"2023-10-15T10:24:01+00:00","dateModified":"2023-10-20T10:48:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/"},"wordCount":138,"commentCount":0,"publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"keywords":[".NET 5.0","Angular","C# Web API","File Upload","FormData","HTTP POST","IFormFile","IFormFileCollection"],"articleSection":[".NET","Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/","url":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/","name":"How to send File from Angular To Web Api C# .Net - Quentin Broggi&#039;s blog about Angular &amp; .Net","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/#website"},"datePublished":"2023-10-15T10:24:01+00:00","dateModified":"2023-10-20T10:48:56+00:00","description":"Step-by-step guide on sending and uploading files from an Angular application to a C# Web API using .NET 5.0, including handling single and multiple file uploads.","breadcrumb":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2023\/10\/15\/how-to-send-file-from-angular-to-web-api-c-net\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.broggi.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"How to send File from Angular To Web Api C# .Net"}]},{"@type":"WebSite","@id":"https:\/\/www.broggi.dev\/blog\/#website","url":"https:\/\/www.broggi.dev\/blog\/","name":"Broggi Quentin blog about Angular & .Net","description":"Exploring Angular &amp; .NET Development","publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb","name":"Broggi Quentin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","contentUrl":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","width":2560,"height":1828,"caption":"Broggi Quentin"},"logo":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/"},"description":"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!","sameAs":["https:\/\/www.broggisoft.com\/blog","https:\/\/www.linkedin.com\/in\/quentin-broggi\/"],"url":"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/"}]}},"_links":{"self":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":1,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions\/66"}],"wp:attachment":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}