Update cross-link/content for image preview (#28434)

dotnet · Feb 17, 2023 · 993d573 · 993d573
1 parent aae31c5
commit 993d573
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 94 deletions.
diff --git 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
@@ -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