|
| 1 | +--- |
| 2 | +title: ASP.NET Core Blazor file uploads |
| 3 | +author: guardrex |
| 4 | +description: Learn how to upload files in Blazor with the InputFile component. |
| 5 | +monikerRange: '>= aspnetcore-5.0' |
| 6 | +ms.author: riande |
| 7 | +ms.custom: mvc |
| 8 | +ms.date: 09/17/2020 |
| 9 | +no-loc: ["ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] |
| 10 | +uid: blazor/file-uploads |
| 11 | +--- |
| 12 | +# ASP.NET Core Blazor file uploads |
| 13 | + |
| 14 | +By [Daniel Roth](https://github.com/danroth27) |
| 15 | + |
| 16 | +Use the `InputFile` component to read browser file data into .NET code, including for file uploads. The `InputFile` component renders as an HTML input of type `file`. |
| 17 | + |
| 18 | +By default, the user selects single files. Add the `multiple` attribute to permit the user to upload multiple files at once. When one or more files is selected by the user, the `InputFile` component fires an `OnChange` event and passes in an `InputFileChangeEventArgs` that provides access to the selected file list and details about each file. |
| 19 | + |
| 20 | +A component that receives an image file can call the `RequestImageFileAsync` convenience method on the file to resize the image data within the browser's JavaScript runtime before the image is streamed into the app. |
| 21 | + |
| 22 | +The following example demonstrates multiple image file upload in a component: |
| 23 | + |
| 24 | +```razor |
| 25 | +<h3>Upload PNG images</h3> |
| 26 | +
|
| 27 | +<p> |
| 28 | + <InputFile OnChange="@OnInputFileChange" multiple /> |
| 29 | +</p> |
| 30 | +
|
| 31 | +@if (imageDataUrls.Count > 0) |
| 32 | +{ |
| 33 | + <h3>Images</h3> |
| 34 | +
|
| 35 | + <div class="card" style="width:30rem;"> |
| 36 | + <div class="card-body"> |
| 37 | + @foreach (var imageDataUrl in imageDataUrls) |
| 38 | + { |
| 39 | + <img class="rounded m-1" src="@imageDataUrl" /> |
| 40 | + } |
| 41 | + </div> |
| 42 | + </div> |
| 43 | +} |
| 44 | +
|
| 45 | +@code { |
| 46 | + IList<string> imageDataUrls = new List<string>(); |
| 47 | +
|
| 48 | + private async Task OnInputFileChange(InputFileChangeEventArgs e) |
| 49 | + { |
| 50 | + var imageFiles = e.GetMultipleFiles(); |
| 51 | + var format = "image/png"; |
| 52 | +
|
| 53 | + foreach (var imageFile in imageFiles) |
| 54 | + { |
| 55 | + var resizedImageFile = await imageFile.RequestImageFileAsync(format, |
| 56 | + 100, 100); |
| 57 | + var buffer = new byte[resizedImageFile.Size]; |
| 58 | + await resizedImageFile.OpenReadStream().ReadAsync(buffer); |
| 59 | + var imageDataUrl = |
| 60 | + $"data:{format};base64,{Convert.ToBase64String(buffer)}"; |
| 61 | + imageDataUrls.Add(imageDataUrl); |
| 62 | + } |
| 63 | + } |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +To read data from a user-selected file, call `OpenReadStream` on the file and read from the returned stream. In a Blazor WebAssembly app, the data is streamed directly into the .NET code within the browser. In a Blazor Server app, the file data is streamed into .NET code on the server as the file is read from the stream. |
0 commit comments