File loader and layout improvements

CaritasPWA.csproj

-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
-  <PropertyGroup Label="Globals">
-    <SccProjectName>SAK</SccProjectName>
-    <SccProvider>SAK</SccProvider>
-    <SccAuxPath>SAK</SccAuxPath>
-    <SccLocalPath>SAK</SccLocalPath>
-  </PropertyGroup>
+	<PropertyGroup Label="Globals">
+		<SccProjectName>SAK</SccProjectName>
+		<SccProvider>SAK</SccProvider>
+		<SccAuxPath>SAK</SccAuxPath>
+		<SccLocalPath>SAK</SccLocalPath>
+	</PropertyGroup>
 
-  <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
-    <RazorLangVersion>3.0</RazorLangVersion>
-    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
-    <OutputType>Exe</OutputType>
-  </PropertyGroup>
+	<PropertyGroup>
+		<TargetFramework>net5.0</TargetFramework>
+		<RazorLangVersion>3.0</RazorLangVersion>
+		<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+		<OutputType>Exe</OutputType>
+	</PropertyGroup>
 
-  <ItemGroup>
-  	<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
-  	<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
-  	<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-  </ItemGroup>	
-	
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
-    <Optimize>true</Optimize>
-    <PlatformTarget>AnyCPU</PlatformTarget>
-  </PropertyGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+		<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <Content Remove="compilerconfig.json" />
-  </ItemGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+		<Optimize>true</Optimize>
+		<PlatformTarget>AnyCPU</PlatformTarget>
+	</PropertyGroup>
 
-  <ItemGroup>
-    <_ContentIncludedByDefault Remove="wwwroot\css\united\_bootswatch.css" />
-  </ItemGroup>
+	<ItemGroup>
+		<Content Remove="compilerconfig.json" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <None Include="compilerconfig.json" />
-  </ItemGroup>
+	<ItemGroup>
+		<_ContentIncludedByDefault Remove="wwwroot\css\united\_bootswatch.css" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <PackageReference Include="BlazorAnimate" Version="3.0.0" />
-    <PackageReference Include="BlazorColorPicker" Version="1.2.0" />
-    <PackageReference Include="BuildWebCompiler" Version="1.12.405" />
-    <PackageReference Include="MatBlazor" Version="2.8.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.7" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-    <PackageReference Include="Tewr.Blazor.FileReader.Wasm" Version="0.11.19128" />
-  </ItemGroup>
+	<ItemGroup>
+		<None Include="compilerconfig.json" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
-  </ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="BlazorAnimate" Version="3.0.0" />
+		<PackageReference Include="BlazorColorPicker" Version="1.2.0" />
+		<PackageReference Include="BuildWebCompiler" Version="1.12.405" />
+		<PackageReference Include="MatBlazor" Version="2.8.0" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+		<PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.7" />
+		<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+		<PackageReference Include="Tewr.Blazor.FileReader" Version="3.1.0.21158" />
+		<PackageReference Include="Tewr.Blazor.FileReader.Wasm" Version="0.11.19128" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <Compile Update="Shared\ResourceFiles\Resources.Designer.cs">
-      <DesignTime>True</DesignTime>
-      <AutoGen>True</AutoGen>
-      <DependentUpon>Resources.resx</DependentUpon>
-    </Compile>
-  </ItemGroup>
+	<ItemGroup>
+		<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
+	</ItemGroup>
 
-  <ItemGroup>
-    <EmbeddedResource Update="Shared\ResourceFiles\Resources.de.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-    </EmbeddedResource>
-    <EmbeddedResource Update="Shared\ResourceFiles\Resources.fr.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-    </EmbeddedResource>
-    <EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-    </EmbeddedResource>
-    <EmbeddedResource Update="Shared\ResourceFiles\Resources.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
-    </EmbeddedResource>
-  </ItemGroup>
+	<ItemGroup>
+		<Compile Update="Shared\ResourceFiles\Resources.Designer.cs">
+			<DesignTime>True</DesignTime>
+			<AutoGen>True</AutoGen>
+			<DependentUpon>Resources.resx</DependentUpon>
+		</Compile>
+	</ItemGroup>
+
+	<ItemGroup>
+		<EmbeddedResource Update="Shared\ResourceFiles\Resources.de.resx">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+		</EmbeddedResource>
+		<EmbeddedResource Update="Shared\ResourceFiles\Resources.fr.resx">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+		</EmbeddedResource>
+		<EmbeddedResource Update="Shared\ResourceFiles\Resources.it.resx">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+		</EmbeddedResource>
+		<EmbeddedResource Update="Shared\ResourceFiles\Resources.resx">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+			<LastGenOutput>Resources.Designer.cs</LastGenOutput>
+		</EmbeddedResource>
+	</ItemGroup>
 
 </Project>

Pages/CaritasServiceFundVeloKeyDataPage.razor

 @page "/fundvelo/keydata/{FromRoute}"
+
 @using CaritasPWA.Shared.Models;
 @using CaritasPWA.Shared.Services;
 @using System.Globalization;
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
 @inject MasterDataService MasterDataService
+@inject IMatToaster Toaster
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
-        @if ("Found".Equals(FromRoute)) {
-    <h1>@i18n["FoundBike"]</h1>
-} else {
-    <h1>@i18n["MissingBike"]</h1>
-}
+        @if ("Found".Equals(FromRoute))
+        {
+            <h1>@i18n["FoundBike"]</h1>
+        }
+        else
+        {
+            <h1>@i18n["MissingBike"]</h1>
+        }
     </div>
     <div class="row no-gutters align-items-center justify-content-center w-100">
 
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
                     <MatIconButton Class="mat-icon-large" Icon="photo_camera" />
                     <div style="margin-top:1rem">
-                        <input id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" />
-                        <label for="file">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 21 21">
-                                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
-                            </svg>
-                        </label>
+                        <InputFile id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" OnChange="@OnFileSelection" />
+                        <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
+                            <label for="file">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 21 21">
+                                    <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
+                                </svg>
+                            </label>
+                        </MatRipple>
                     </div>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
                     <div>
                         <MatCard Class="demo-mat-card">
                             <MatCardContent>
-                                <MatCardMedia Square="true" Class="" />
+                                <MatCardMedia Square="true" Class="" ImageUrl="@imgUrl" />
                             </MatCardContent>
                         </MatCard>
                     </div>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object> Attributes { get; set; }
 
+    private static long MAX_FILE_SIZE = 4000000;
+
+
     private ColorItem selectedColor;
     private BicycleType selectedBcType;
     private string imgUrl = string.Empty;
         base.OnInitialized();
     }
 
-    private async Task GetColors() {
-        await InvokeAsync(async () => {
+    private async Task GetColors()
+    {
+        await InvokeAsync(async () =>
+        {
             await MasterDataService.GetColors();
             StateHasChanged();
         });
     }
 
-    private async Task GetBicycleTypes() {
-        await InvokeAsync(async () => {
+    private async Task GetBicycleTypes()
+    {
+        await InvokeAsync(async () =>
+        {
             await MasterDataService.GetBicycleTypes();
             StateHasChanged();
         });
     }
 
-    private ColorItem[] Colors {
+    private ColorItem[] Colors
+    {
         get => MasterDataService.Colors;
     }
 
-    private BicycleType[] BicycleTypes {
+    private BicycleType[] BicycleTypes
+    {
         get => MasterDataService.BicycleTypes;
     }
 
-    private void Next() {
+    private void Next()
+    {
         NavigationManager.NavigateTo("fundvelo/account/" + @FromRoute);
     }
 
-    private void Cancel() {
+    private void Cancel()
+    {
         NavigationManager.NavigateTo("caritas_services");
     }
 
 
-    private string getAddressLbl() {
+    private string getAddressLbl()
+    {
         return i18n.GetString("Address") + " (" + getPlaceLbl() + ")";
     }
 
-    private string getPlaceLbl() {
+    private string getPlaceLbl()
+    {
         return @FromRoute == "Found" ? i18n.GetString("PlaceOfDiscovery") : i18n.GetString("PlaceOfLoss");
     }
 
+    private async Task OnFileSelection(InputFileChangeEventArgs e) {
+        IBrowserFile imgFile = e.File;
+        var buffers = new byte[imgFile.Size];
+        try {
+            await imgFile.OpenReadStream(MAX_FILE_SIZE).ReadAsync(buffers);
+            string imageType = imgFile.ContentType;
+            imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
+        } catch (Exception ex) {
+            Show(MatToastType.Danger, i18n.GetString("Error.PhotoOrPictureToBig.Title"), i18n.GetString("Error.PhotoOrPictureToBig.Msg", MAX_FILE_SIZE/1000));
+        }
+    }
+
+
+    public void Show(MatToastType type, string title, string message, string icon = "") {
+        Toaster.Add(message, type, title, icon);
+    }
+
 
 }

Program.cs

 using MatBlazor;
 using CaritasPWA.Shared;
 using CaritasPWA.Shared.Services;
+using Tewr.Blazor.FileReader;
+using MatBlazor;
 
 
 namespace CaritasPWA {
             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddMatBlazor();
-           // builder.Services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);
+            builder.Services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             builder.Services.AddSingleton<ILFBicycleRest, LFBicycleRest>();
             builder.Services.AddSingleton<AppState>();
             builder.Services.AddScoped<MasterDataService>();
             builder.Services.AddLocalization();
 
+            builder.Services.AddMatToaster(config => {
+                config.Position = MatToastPosition.BottomCenter;
+                config.PreventDuplicates = true;
+                config.NewestOnTop = true;
+                config.MaxDisplayedToasts = 5;
+                config.ShowCloseButton = true;
+                config.ShowProgressBar = true;
+                config.MaximumOpacity = 100;
+                config.VisibleStateDuration = 5000;
+                config.ShowTransitionDuration = 300;
+                config.HideTransitionDuration = 150;
+            });
+
+
             await builder.Build().RunAsync();
         }
     }

Properties/launchSettings.json

       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
+      "nativeDebugging": true,
       "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "jsWebView2Debugging": false,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
     }
   }

Shared/MainLayout.razor

 
 <NavMenu />
 <div class="main" style="height:90vh">
-        <div class="content px-4 h-100">
-            @Body
-        </div>
+    <div class="content px-4 h-100">
+        @Body
+    </div>
 </div>
+<MatToastContainer />
+
 
 

Shared/ResourceFiles/Resources.Designer.cs

             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die The size of the selected picture or taken photo exceeds the max. allowed size of {0:d} KB. ähnelt.
+        /// </summary>
+        public static string Error_PhotoOrPictureToBig_Msg {
+            get {
+                return ResourceManager.GetString("Error.PhotoOrPictureToBig.Msg", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Size of picture to big! ähnelt.
+        /// </summary>
+        public static string Error_PhotoOrPictureToBig_Title {
+            get {
+                return ResourceManager.GetString("Error.PhotoOrPictureToBig.Title", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Finished ähnelt.
         /// </summary>

Shared/ResourceFiles/Resources.de.resx

   <data name="DevelopedBy" xml:space="preserve">
     <value>Entwickelt durch</value>
   </data>
+  <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
+    <value>Die Grösse des gewählten Bildes oder Fotos darf {0:d} KB nicht überschreiten!</value>
+  </data>
+  <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
+    <value>Bilddatei zu gross!</value>
+  </data>
   <data name="Finished" xml:space="preserve">
     <value>Fertig</value>
   </data>

Shared/ResourceFiles/Resources.fr.resx

   <data name="DevelopedBy" xml:space="preserve">
     <value>Développé par</value>
   </data>
+  <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
+    <value>The size of the selected picture or taken photo exceeds the max. allowed size of {0:d} KB.</value>
+  </data>
+  <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
+    <value>Size of picture to big!</value>
+  </data>
   <data name="Finished" xml:space="preserve">
     <value>Terminé</value>
   </data>

Shared/ResourceFiles/Resources.it.resx

   <data name="DevelopedBy" xml:space="preserve">
     <value>Sviluppata da</value>
   </data>
+  <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
+    <value>The size of the selected picture or taken photo exceeds the max. allowed size of {0:d} KB.</value>
+  </data>
+  <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
+    <value>Size of picture to big!</value>
+  </data>
   <data name="Finished" xml:space="preserve">
     <value>Termina</value>
   </data>

Shared/ResourceFiles/Resources.resx

   <data name="DevelopedBy" xml:space="preserve">
     <value>Developed by</value>
   </data>
+  <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
+    <value>The size of the selected picture or taken photo exceeds the max. allowed size of {0:d} KB.</value>
+  </data>
+  <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
+    <value>Size of picture to big!</value>
+  </data>
   <data name="Finished" xml:space="preserve">
     <value>Finished</value>
   </data>

_Imports.razor

 @using CaritasPWA.Shared.ResourceFiles
 @using MatBlazor
 @using BlazorAnimate
-@using BlazorColorPicker
+@using BlazorColorPicker
+@using Tewr.Blazor.FileReader

wwwroot/css/app.css

     cursor: pointer;
     width: 100%;
     text-align: center;
-    /*padding: 1rem 0;*/
-}
-
-    .inputFile:focus + label,
-    .inputFile + label:hover {
-        /*background-color: red;*/
-        width: 44px;
-        height: 44px;
-        background: rgba(0, 0, 0, 0.2);
-        -moz-border-radius: 22px;
-        -webkit-border-radius: 22px;
-        border-radius: 22px;
-    }
+}
+
+.inputfile-mat-ripple {
+    width: 48px;
+    height: 48px;
+    -moz-border-radius: 24px;
+    -webkit-border-radius: 24px;
+    border-radius: 24px;
+    align-items: center;
+    justify-content: center;
+    display: inline-flex;
+}
 
 .btn-primary {
     color: #fff;

wwwroot/service-worker.js

     '_content/BlazorAnimate/aos.css',
     '_framework/blazor.webassembly.js',
     '_framework/blazor.boot.json',
-    '_framework/wasm/dotnet.3.2.0.js',
+    '_framework/wasm/dotnet.5.0.7.js',
     'https://fonts.googleapis.com/css?family=Roboto:300,400,500',
     'https://fonts.googleapis.com/icon?family=Material+Icons',
     'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap',