From 993d573bdd1a6e2d3930f201e24a506ecb5c36f6 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Fri, 17 Feb 2023 05:17:00 -0500
Subject: [PATCH] Update cross-link/content for image preview (#28434)

---
 aspnetcore/blazor/file-uploads.md             |  2 +-
 .../blazor/forms-and-input-components.md      | 94 +------------------
 2 files changed, 2 insertions(+), 94 deletions(-)

diff --git a/aspnetcore/blazor/file-uploads.md b/aspnetcore/blazor/file-uploads.md
index de3ab348d2..52156aadd9 100644
--- a/aspnetcore/blazor/file-uploads.md
+++ b/aspnetcore/blazor/file-uploads.md
@@ -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`:
 
diff --git a/aspnetcore/blazor/forms-and-input-components.md b/aspnetcore/blazor/forms-and-input-components.md
index 19d54246cd..67db0bef02 100644
--- a/aspnetcore/blazor/forms-and-input-components.md
+++ b/aspnetcore/blazor/forms-and-input-components.md
@@ -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"
@@ -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
 
@@ -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