Implements #175 using JsObject (#177)

* Implements #175 using JsObject * Add some comments in demo on disposal * Fixed test suite * Fixed test suite * Update version and Release notes
Tewr · Jun 8, 2021 · 52e302e · 52e302e
1 parent 6c3044f
commit 52e302e
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 10 deletions.
diff --git a/src/Blazor.FileReader/Blazor.FileReader.csproj b/src/Blazor.FileReader/Blazor.FileReader.csproj
@@ -7,22 +7,22 @@
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <LangVersion>latest</LangVersion>
     <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
-    <Version>3.0.0.20340</Version>
     <Authors>Tor Knutsson (Tewr)</Authors>
     <PackageProjectUrl>https://github.com/Tewr/BlazorFileReader</PackageProjectUrl>
     <RepositoryUrl>https://github.com/Tewr/BlazorFileReader</RepositoryUrl>
     <Description>Create Read-Only file streams from file input elements or drop targets in Blazor.</Description>
     <PackageTags>blazor blazor-component stream filestream file-stream read-file filereader</PackageTags>
     <Configurations>Debug;Release;Ghpages</Configurations>
     <PackageId>Tewr.Blazor.FileReader</PackageId>
-    <PackageReleaseNotes>Support for to 5, multi-targeting</PackageReleaseNotes>
-    <AssemblyVersion>3.0.0.20340</AssemblyVersion>
+    <PackageReleaseNotes>new APIs for .NET5: CreateObjectUrl, Expose Js file using JSObjectReference.</PackageReleaseNotes>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <PackageIcon>icon.png</PackageIcon>
     <RazorLangVersion>3.0</RazorLangVersion>
     <AssemblyName>Tewr.Blazor.FileReader</AssemblyName>
     <RootNamespace>Tewr.Blazor.FileReader</RootNamespace>
-    <FileVersion>3.0.0.20340</FileVersion>
+    <AssemblyVersion>3.1.0.21158</AssemblyVersion>
+    <Version>3.1.0.21158</Version>
+    <FileVersion>3.1.0.21158</FileVersion>
   </PropertyGroup>
   <ItemGroup>
     <None Include="icon.png" Pack="true" Visible="false" PackagePath="" />

diff --git a/src/Blazor.FileReader/FileReaderRef.cs b/src/Blazor.FileReader/FileReaderRef.cs
@@ -60,6 +60,12 @@ public interface IFileReference
         /// </summary>
         /// <returns></returns>
         Task<IJSObjectReference> GetJSObjectReferenceAsync();
+
+        /// <summary>
+        /// Returns an object url for a file.
+        /// </summary>
+        /// <returns></returns>
+        Task<IObjectUrl> GetObjectUrlAsync();
 #endif
 
         /// <summary>
@@ -296,6 +302,16 @@ public Task<IJSObjectReference> GetJSObjectReferenceAsync()
         {
             return this.fileLoaderRef.FileReaderJsInterop.GetJSObjectReferenceAsync(fileLoaderRef.ElementRef, this.index);
         }
+
+        public async Task<IObjectUrl> GetObjectUrlAsync()
+        {
+            var file = await GetJSObjectReferenceAsync();
+
+            var objectUrl = new ObjectUrl(this.fileLoaderRef.FileReaderJsInterop.CurrentJSRuntime, file);
+            await objectUrl.InitAsync();
+            return objectUrl;
+        }
+
 #endif
 
     }

diff --git a/src/Blazor.FileReader/ObjectUrl.cs b/src/Blazor.FileReader/ObjectUrl.cs
@@ -0,0 +1,53 @@
+using Microsoft.JSInterop;
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading;
+using System.Threading.Tasks;
+
+namespace Tewr.Blazor.FileReader
+{
+#if NET5
+
+    /// <summary>
+    /// Represents an object url for a file.
+    /// </summary>
+    /// <remarks>https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL</remarks>
+    public interface IObjectUrl : IAsyncDisposable
+    {
+        /// <summary>
+        /// Returns the Object Url.
+        /// </summary>
+        string Url => ToString();
+    }
+
+    internal class ObjectUrl : IObjectUrl
+    {
+        private string objectUrlDomString;
+        private readonly IJSRuntime jSRuntime;
+        private readonly IJSObjectReference file;
+
+        internal ObjectUrl(IJSRuntime jSRuntime, IJSObjectReference file)
+        {
+            this.jSRuntime = jSRuntime;
+            this.file = file;
+        }
+
+        public async ValueTask InitAsync()
+        {
+            this.objectUrlDomString = await jSRuntime.InvokeAsync<string>("URL.createObjectURL", this.file);
+        }
+
+        public async ValueTask DisposeAsync()
+        {
+            await jSRuntime.InvokeVoidAsync("URL.revokeObjectURL", this.file);
+            await file.DisposeAsync();
+        }
+
+        public override string ToString()
+        {
+            return this.objectUrlDomString;
+        }
+    }
+#endif
+}
diff --git a/src/Demo/Blazor.FileReader.Wasm.Demo/Blazor.FileReader.Wasm.Demo.csproj b/src/Demo/Blazor.FileReader.Wasm.Demo/Blazor.FileReader.Wasm.Demo.csproj
@@ -24,5 +24,11 @@
   <ItemGroup>
     <ProjectReference Include="..\Blazor.FileReader.Demo.Common\Blazor.FileReader.Demo.Common.csproj" />
   </ItemGroup>
+
+  <ItemGroup>
+    <Compile Update="Pages\ObjectReferenceCommon - Copy.razor.cs">
+      <DependentUpon>ObjectReferenceCommon.razor.cs</DependentUpon>
+    </Compile>
+  </ItemGroup>
 
 </Project>
diff --git a/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectReferenceCommon.razor b/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectReferenceCommon.razor
@@ -5,11 +5,12 @@
 
 <br />
 This demo reads a file into a <a href="https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.implementation.jsobjectreference?view=dotnet-plat-ext-6.0">js object reference</a>
- and reads some properties from it in a custom js function. This method is only suppoerted for .NET5 and higher.
+ and reads some properties from it in a custom js function. This method is only supported for .NET5 and higher.
 
 <br />
 
 <input type="file" @ref=inputElement />
 <button @onclick=ReadFile class="btn btn-primary">Read file object reference</button>
 <br />
+<br />
 <textarea style="max-width: 100%;" cols="50" rows="20">@Output</textarea>
diff --git a/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectUrl.razor b/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectUrl.razor
@@ -0,0 +1,18 @@
+@page "/ObjectUrl"
+@inherits ObjectUrlBase
+
+<h1>Hello, object url!</h1>
+
+<br />
+This demo returns an <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL">Object url</a>
+ and reads some properties from it in a custom js function. This method is only supported for .NET5 and higher.
+<br />
+Don't forget to dispose the url if no longer used, as not doing so will create a memoryleak. Disposing calls <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL">revokeObjectURL</a>.
+
+<br />
+
+<input type="file" @ref=inputElement />
+<button @onclick=ReadFile class="btn btn-primary">Read file object url</button>
+<br />
+<br />
+<textarea style="max-width: 100%;" cols="50" rows="20">@Output</textarea>
diff --git a/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectUrl.razor.cs b/src/Demo/Blazor.FileReader.Wasm.Demo/Pages/ObjectUrl.razor.cs
@@ -0,0 +1,47 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using Tewr.Blazor.FileReader;
+
+namespace Blazor.FileReader.Demo.Common
+{
+    public partial class ObjectUrlBase : ComponentBase
+    {
+        [Inject]
+        IFileReaderService FileReaderService { get; set; }
+
+        public ElementReference inputElement;
+        public string Output { get; set; }
+
+        public async Task ReadFile()
+        {
+            Output = string.Empty;
+            this.StateHasChanged();
+            var files = await FileReaderService.CreateReference(inputElement).EnumerateFilesAsync();
+
+            if (!files.Any())
+            {
+                await WriteLine("No file selected");
+            }
+
+            foreach (var file in files)
+            {
+                var objectUrl = await file.GetObjectUrlAsync();
+                await using (objectUrl)
+                {
+                    // Print the object url
+                    await WriteLine($"Object url: {objectUrl}");
+                }
+
+            }
+        }
+
+        public async Task WriteLine(string log)
+        {
+            Output += $"{log}{Environment.NewLine}";
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+}
diff --git a/src/Demo/Blazor.FileReader.Wasm.Demo/Shared/NavMenu.razor b/src/Demo/Blazor.FileReader.Wasm.Demo/Shared/NavMenu.razor
@@ -42,6 +42,11 @@
                 <span class="oi oi-droplet" aria-hidden="true"></span> JSObjectReference
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="ObjectUrl">
+                <span class="oi oi-droplet" aria-hidden="true"></span> Object Url
+            </NavLink>
+        </li>
 
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="https://github.com/tewr/BlazorFileReader">

diff --git a/tests/BlazotFileReaderE2ETests/DragNDropTests.cs b/tests/BlazotFileReaderE2ETests/DragNDropTests.cs
@@ -1,5 +1,6 @@
 using OpenQA.Selenium;
 using OpenQA.Selenium.Support.UI;
+using SeleniumExtras.WaitHelpers;
 using System;
 using System.IO;
 using Tewr.Blazor.FileReader.E2ETests.Blazor3;
@@ -64,7 +65,8 @@ public void DragNDrop_ExtensionApi_IsExecuted()
 
                 // Then
                 var value = Browser.FindElement(By.Id("testDropEventsValues")).GetAttribute("value");
-                Assert.Equal(@"\nOnDragOverMethod\nOnDragOverScriptn\nOnDropMethod\nOnDropScript", value);
+                var nl = Environment.NewLine;
+                Assert.Equal(@$"{nl}OnDragOverMethod{nl}OnDragOverScript{nl}OnDropMethod{nl}OnDropScript", value);
             }
             finally
             {

diff --git a/tests/BlazotFileReaderE2ETests/Tewr.Blazor.FileReader.E2ETests.csproj b/tests/BlazotFileReaderE2ETests/Tewr.Blazor.FileReader.E2ETests.csproj
@@ -7,10 +7,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
-    <PackageReference Include="Selenium.Support" Version="3.141.0" />
-    <PackageReference Include="Selenium.WebDriver" Version="4.0.0-alpha07" />
-    <PackageReference Include="Selenium.WebDriver.ChromeDriver" Version="87.0.4280.8800" />
+    <PackageReference Include="DotNetSeleniumExtras.WaitHelpers" Version="3.11.0" />
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.10.0" />
+    <PackageReference Include="Selenium.Support" Version="4.0.0-beta4" />
+    <PackageReference Include="Selenium.WebDriver" Version="4.0.0-beta4" />
+    <PackageReference Include="Selenium.WebDriver.ChromeDriver" Version="91.0.4472.1900" />
     <PackageReference Include="xunit" Version="2.4.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>