WaxImageInput added

README.md

@@ -15,6 +15,9 @@ Nuget: https://www.nuget.org/packages/WaxComponents
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+<!-- Scripts -->
+<script src="_content/WaxComponents/Scripts/waxComponents.js"></script>
 ```
 
 - Importar a biblioteca

WaxComponents.Tests/Pages/Index.razor

@@ -63,6 +63,8 @@
     <WaxIcon>reply all</WaxIcon>
 </WaxContainer>
 
+<WaxImageInput OnUpload="(_, args) => Console.WriteLine(args.Url)"></WaxImageInput>
+
 @code {
 
     private string _text = String.Empty;

WaxComponents.Tests/wwwroot/index.html

@@ -28,6 +28,7 @@
         <a class="dismiss">🗙</a>
     </div>
 
+    <script src="_content/WaxComponents/Scripts/waxComponents.js"></script>
     <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 

WaxComponents/Utils/JsBinds.cs

@@ -0,0 +1,12 @@
+using Microsoft.JSInterop;
+
+namespace WaxComponents.Utils;
+
+public static class JsBinds
+{
+    public static async void SetImage(this IJSRuntime runtime, Stream stream, string elementId)
+    {
+        var dotnetStream = new DotNetStreamReference(stream);
+        await runtime.InvokeVoidAsync("setImage", elementId, dotnetStream);
+    }
+}

WaxComponents/WaxComponents.csproj

@@ -4,7 +4,7 @@
         <TargetFramework>net7.0</TargetFramework>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
-        <Version>0.2.5</Version>
+        <Version>0.2.6</Version>
         <Title>WaxComponents</Title>
         <Authors>lllggghhhaaa</Authors>
         <Description>Simple components for blazor, free and opensource</Description>

WaxComponents/WaxImageInput.razor

@@ -0,0 +1,5 @@
+@using Microsoft.JSInterop
+@inject IJSRuntime JSRuntime
+
+<input @ref="_inputRef" type="file" accept="image/*" onchange="@FileUploaded" style="display:none;"/>
+<img @ref="_imgRef" class="waxComponent waxImageInput" src="@DefaultImageUrl" width="@Width" height="@Height" alt="@Alt" role="button" onclick="@Click"/>

WaxComponents/WaxImageInput.razor.cs

@@ -0,0 +1,48 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace WaxComponents;
+
+public partial class WaxImageInput : IDisposable
+{
+    [Parameter] public string Width { get; set; } = "128px";
+
+    [Parameter] public string Height { get; set; } = "128px";
+    [Parameter] public string Alt { get; set; } = String.Empty;
+
+    [Parameter] public string DefaultImageUrl { get; set; } = "_content/WaxComponents/Images/upload.svg";
+
+    [Parameter] public EventHandler<WaxFileUploadEventArgs>? OnUpload { get; set; }
+
+    public string? Url { get; private set; }
+
+    private ElementReference _inputRef;
+    private ElementReference _imgRef;
+
+    public async void Click() => await JSRuntime.InvokeVoidAsync("inputClick", _inputRef);
+
+    private async void FileUploaded(ChangeEventArgs args)
+    {
+        Url = await JSRuntime.InvokeAsync<string>("setImage", _inputRef, _imgRef);
+        OnUpload?.Invoke(this, new WaxFileUploadEventArgs(Url));
+    }
+
+    public void Dispose()
+    {
+        if (Url is not null)
+            JSRuntime.InvokeVoidAsync("disposeObjectURL", Url);
+    }
+}
+
+public class WaxFileUploadEventArgs : EventArgs
+{
+    public readonly string Url;
+
+    public WaxFileUploadEventArgs(string url) => Url = url;
+
+    public async Task<Stream> DownloadFileAsync()
+    {
+        using HttpClient client = new HttpClient();
+        return await client.GetStreamAsync(Url);
+    }
+}

WaxComponents/WaxImageInput.razor.css

@@ -0,0 +1,6 @@
+.waxImageInput {
+    border: 1px solid white;
+    border-image: var(--component-bg) 1;
+
+    object-fit: scale-down;
+}

WaxComponents/wwwroot/Scripts/waxComponents.js

@@ -0,0 +1,10 @@
+window.setImage = async (input, image) => {
+    const url = URL.createObjectURL(input.files[0]);
+    image.src = url;
+
+    return url;
+}
+
+window.inputClick = async element => element.click();
+
+window.disposeObjectURL = async url => URL.revokeObjectURL(url);

WaxComponents/wwwroot/Styles/Themes/lightPink.css

@@ -17,5 +17,5 @@
     --slider-thumb-color: #ffd3da;
     --slider-thumb-color-hover: #ffb6c1;
     --slider-fill-start: rgba(95, 195, 228, .35);
-    --slider-fill-end: rgba(229, 93, 135, .35)
+    --slider-fill-end: rgba(229, 93, 135, .35);
 }