Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update cross-link/content for image preview #28434

Merged
merged 1 commit into from
Feb 17, 2023
Merged

Update cross-link/content for image preview #28434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion aspnetcore/blazor/file-uploads.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -779,7 +779,7 @@ Finally, use an injected <xref:Microsoft.JSInterop.IJSRuntime> to add the `OnCha

The preceding example is for uploading a single image. The approach can be expanded to support `multiple` images.

The following `FileUpload4` component shows the full working example.
The following `FileUpload4` component shows the complete example.

`Pages/FileUpload4.razor`:

Expand Down
94 changes: 1 addition & 93 deletions aspnetcore/blazor/forms-and-input-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,12 +258,6 @@ The components in the table are also supported outside of a form in Razor compon

For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.

<!--
* <xref:blazor/file-uploads>
* [Preview an image provided by the `InputFile` component](#preview-an-image-provided-by-the-inputfile-component) (this article)

-->

:::moniker-end

:::moniker range="< aspnetcore-5.0"
Expand Down Expand Up @@ -293,14 +287,7 @@ Some components include useful parsing logic. For example, <xref:Microsoft.AspNe

:::moniker range=">= aspnetcore-5.0"

The <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component is a bit more complex and is detailed in <xref:blazor/file-uploads>.

<!--

* <xref:blazor/file-uploads>
* [Preview an image provided by the `InputFile` component](#preview-an-image-provided-by-the-inputfile-component) (this article)

-->
For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.

:::moniker-end

Expand Down Expand Up @@ -415,85 +402,6 @@ In the following example:
> [!NOTE]
> Changing the <xref:Microsoft.AspNetCore.Components.Forms.EditContext> after it's assigned is **not** supported.

<!--

## Preview an image provided by the `InputFile` component

VERSION THIS 5.0 or later

UNCOMMENT the cross-links to this section further down the topic --AND-- in the Additional Resources of the Images article.

ALSO FROM THE DISCUSSION, NOT INCLUDED YET ...

You may elect to create an event listener for the `InputFile` component that captures the [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) and displays a preview using JavaScript.




The <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component reads browser file data into .NET code. An image preview can be shown to the user prior to submitting the form using the approach in this section, which doesn't rely upon round-tripping the file's data between JS and .NET code.

Provide a JS function that:

* Receives an <xref:Microsoft.AspNetCore.Components.Forms.InputFile> element reference and the image preview element's ID.
* Sets the image source of the image preview element to the image file's object data.

The preceding tasks are shown in the following `setImage` JS function example:

```html
<script>
window.setImage = async (inputFileElement, imageElementId) => {
document.getElementById(imageElementId).src = inputFileElement.files[0];
}
</script>
```

[!INCLUDE[](~/blazor/includes/js-location.md)]

The following `PreviewInputFileImage` component uses:

* An <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component to obtain an image from the user in an <xref:Microsoft.AspNetCore.Components.Forms.EditForm>.
* An `<img>` tag (`id="image"`) for displaying an image preview.

When a file is selected, the `UpdateImagePreview` method is called with <xref:Microsoft.AspNetCore.Components.Forms.InputFileChangeEventArgs>. The method invokes the `setImage` function with the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> element reference and the image preview element's ID.

`Pages/PreviewInputFileImage.razor`:

```razor
@page "/preview-inputfile-image"
@inject IJSRuntime JS

<h1><code>InputFile</code> with Image Preview Example</h1>

<EditForm OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />

<p>
<InputFile @ref="inputFileElement" OnChange="UpdateImagePreview" /> <img id="image" />
</p>

<button type="submit">Submit</button>
</EditForm>

@code {
private ElementReference inputFileElement;

private async Task UpdateImagePreview(InputFileChangeEventArgs e)
{
await JS.InvokeVoidAsync("setImage", inputFileElement, "image");
}

private void HandleValidSubmit()
{
// Process the valid form
}
}
```

For additional guidance on JS interop, see <xref:blazor/js-interop/call-javascript-from-dotnet>.

-->

:::moniker range=">= aspnetcore-6.0"

## Multiple option selection with the `InputSelect` component
Expand Down