got rid of Twer, progress circle on image loading

CaritasPWA.csproj

@@ -13,7 +13,6 @@
     <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>

CaritasPWA.csproj.user

@@ -5,5 +5,6 @@
   </PropertyGroup>
   <PropertyGroup>
     <ActiveDebugProfile>CaritasPWA</ActiveDebugProfile>
+    <NameOfLastUsedPublishProfile>D:\Work\Caritas\CaritasPWA\Properties\PublishProfiles\FolderProfile.pubxml</NameOfLastUsedPublishProfile>
   </PropertyGroup>
 </Project>

Pages/AccountPage.razor

@@ -12,7 +12,7 @@
     <div class="row no-gutters align-items-start w-100">
         <div class="row no-gutters align-items-center w-100" style="padding-top:2em">
             <div class="col-12">
-                <MatSelect Class="w-100" Label="@i18n["Salutation"]" Outlined="true"  @bind-Value="@Account.Salutation">
+                <MatSelect Class="w-100" Label="@i18n["Salutation"]" Outlined="true"  @bind-Value="@Account.Salutation" Style="margin-bottom: 0.5rem">
                     <MatOptionString Value="sir">@i18n["Man"]</MatOptionString>
                     <MatOptionString Value="madam">@i18n["Woman"]</MatOptionString>
                 </MatSelect>            

Pages/CaritasServiceFundVeloKeyDataPage.razor

@@ -11,9 +11,6 @@
 @inject MasterDataService MasterDataService
 @inject IMatToaster Toaster
 
-@*@using Tewr.Blazor.FileReader
-@inject IFileReaderService fileReaderService;*@
-
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
@@ -29,7 +26,7 @@
             <div class="mat-layout-grid-inner">
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
                     <div>
-                        <InputFile class="inputFile" id="camera" type="file" name="camera" accept="image/*" capture="user" OnChange="@OnFileSelection" />
+                        <InputFile class="inputFile" id="camera" type="file" name="camera" accept="image/*" capture="environment" OnChange="@OnGatheringPicture" />
                         <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
                             <label for="camera">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
@@ -41,8 +38,8 @@
                         </MatRipple>
                     </div>
                     <div style="margin-top:1rem">
-                        @*<input @ref="inputTypeFileElement" id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" @onchange="ReadFile" />*@
-                        <InputFile id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" OnChange="@OnFileSelection" />
+                        @*                        <input @ref="inputTypeFileElement" class="inputFile" id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" @onchange="ReadFile" />*@
+                        <InputFile class="inputFile" id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" OnChange="@OnGatheringPicture" />
                         <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
                             <label for="file">
                                 <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
@@ -55,9 +52,13 @@
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
                     <div>
-                        <MatCard Class="demo-mat-card">
+                        <MatCard Id="bikePic" Class="fv-mat-card">
                             <MatCardContent>
-                                <MatCardMedia Square="true" Class="" ImageUrl="@imgUrl" />
+                                <MatCardMedia Square="true" Class="" ImageUrl="@imgUrl">
+                                    @if (loading) {
+                                        <MatProgressCircle Indeterminate="true" Size="MatProgressCircleSize.Medium" />
+                                    }
+                                </MatCardMedia>
                             </MatCardContent>
                         </MatCard>
                     </div>
@@ -69,7 +70,7 @@
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
                     <div>
-                        <MatCard Class="demo-mat-card">
+                        <MatCard Id="OSM" Class="fv-mat-card">
                             <MatCardContent>
                                 <MatCardMedia Square="true" Class="" />
                             </MatCardContent>
@@ -146,14 +147,15 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object> Attributes { get; set; }
 
-    private static int MAX_FILE_SIZE = 4000000;
+    private static long MAX_FILE_SIZE = 3145728;  //3MB
 
     private ColorItem selectedColor;
     private BicycleType selectedBcType;
+    private ElementReference inputTypeFileElement;
     private string imgUrl = string.Empty;
+    private Boolean loading = false;
 
     protected async override void OnInitialized() {
-
         Console.WriteLine("CurrentCulture is {0}.", CultureInfo.CurrentCulture.Name);
         Console.WriteLine("Current language is {0}.", CultureInfo.CurrentCulture.TwoLetterISOLanguageName.ToUpper());
 
@@ -202,44 +204,59 @@
         return @FromRoute == "Found" ? i18n.GetString("PlaceOfDiscovery") : i18n.GetString("PlaceOfLoss");
     }
 
-    private async Task OnFileSelection(InputFileChangeEventArgs e) {
+    private async Task OnGatheringPicture(InputFileChangeEventArgs e) {
         IBrowserFile imgFile = e.File;
         var buffers = new byte[imgFile.Size];
         try {
+            imgUrl = string.Empty;
+            loading = true;
+            StateHasChanged();
+
             await imgFile.OpenReadStream(MAX_FILE_SIZE).ReadAsync(buffers);
             string imageType = imgFile.ContentType;
             imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
         } catch (IOException ex) {
             Console.WriteLine("Ex.Meesage is: {0}.", ex.Message);
-            Show(MatToastType.Danger, i18n.GetString("Error.PhotoOrPictureToBig.Title"), i18n.GetString("Error.PhotoOrPictureToBig.Msg", MAX_FILE_SIZE / 1000));
+            Show(MatToastType.Danger, i18n.GetString("Error.PhotoOrPictureToBig.Title"), i18n.GetString("Error.PhotoOrPictureToBig.Msg", MAX_FILE_SIZE / (1024 * 1024)));
+        } finally {
+            loading = false;
+            StateHasChanged();
         }
     }
 
+    //public async Task ReadFile() {
+    //    foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync()) {
+    //        IFileInfo fileInfo = await file.ReadFileInfoAsync();
 
-    public void Show(MatToastType type, string title, string message, string icon = "") {
-        Toaster.Add(message, type, title, icon);
-    }
+    //        if (fileInfo.Size > MAX_FILE_SIZE) {
 
-    //*******
+    //            Show(MatToastType.Danger, i18n.GetString("Error.PhotoOrPictureToBig.Title"), i18n.GetString("Error.PhotoOrPictureToBig.Msg", MAX_FILE_SIZE / (1024*1024)));
 
-    //private ElementReference inputTypeFileElement;
+    //        } else {
+    //            imgUrl = string.Empty;
+    //            loading = true;
+    //            StateHasChanged();
 
-    //public async Task ReadFile() {
-    //    foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync()) {
-    //        IFileInfo fileInfo = await file.ReadFileInfoAsync();
-    //        byte[] buffer = new byte[fileInfo.Size];
-    //        using (MemoryStream memoryStream = await file.CreateMemoryStreamAsync(4096)) {
-    //            int bytesRead = 0;
-    //            int offset = 0;
-    //            do {
-    //                bytesRead = memoryStream.Read(buffer, offset, 4096);
-    //                offset = offset + bytesRead;
-    //            } while (bytesRead < 4096);
-
-    //            string imageType = fileInfo.Type;
-    //            imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffer)}";
+    //            byte[] buffer = new byte[fileInfo.Size];
+
+    //            await using (Stream stream = await file.OpenReadAsync()) {
+    //                buffer = new Byte[stream.Length];
+    //                await stream.ReadAsync(buffer);
+    //            }
+
+    //            using (MemoryStream memoryStream = await file.CreateMemoryStreamAsync(4096)) {
+    //                memoryStream.Read(buffer);
+    //                string imageType = fileInfo.Type;
+    //                loading = false;
+    //                imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffer)}";
+    //                StateHasChanged();
+    //            }
     //        }
     //    }
     //}
 
+    public void Show(MatToastType type, string title, string message, string icon = "") {
+        Toaster.Add(message, type, title, icon);
+    }
+
 }

Shared/ResourceFiles/Resources.de.resx

@@ -226,7 +226,7 @@
     <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>
+    <value>Die Grösse des gewählten Bildes oder Fotos darf {0:d} MB nicht überschreiten!</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
     <value>Bilddatei zu gross!</value>

Shared/ResourceFiles/Resources.fr.resx

@@ -226,7 +226,7 @@
     <value>Développé par</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
-    <value>La taille de l'image sélectionnée ou de la photo prise dépasse la taille maximale autorisée de {0:d} KB.</value>
+    <value>La taille de l'image sélectionnée ou de la photo prise dépasse la taille maximale autorisée de {0:d} MB.</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
     <value>La taille de la photo est trop grande!</value>

Shared/ResourceFiles/Resources.it.resx

@@ -226,7 +226,7 @@
     <value>Sviluppata da</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Msg" xml:space="preserve">
-    <value>La dimensione dell'immagine selezionata o della foto scattata supera la dimensione massima consentita di {0:d} KB.</value>
+    <value>La dimensione dell'immagine selezionata o della foto scattata supera la dimensione massima consentita di {0:d} MB.</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
     <value>Dimensione dell'immagine troppo grande!</value>

Shared/ResourceFiles/Resources.resx

@@ -226,7 +226,7 @@
     <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>
+    <value>The size of the selected picture or taken photo exceeds the max. allowed size of {0:d} MB.</value>
   </data>
   <data name="Error.PhotoOrPictureToBig.Title" xml:space="preserve">
     <value>Size of picture to big!</value>

_Imports.razor

@@ -10,5 +10,4 @@
 @using CaritasPWA.Shared
 @using CaritasPWA.Shared.ResourceFiles
 @using MatBlazor
-@using BlazorAnimate
-@using Tewr.Blazor.FileReader
+@using BlazorAnimate

wwwroot/css/app.css

@@ -85,7 +85,7 @@ a:hover {
     background-color: var(--primary);
 }
 
-.demo-mat-card {
+.fv-mat-card {
     border-radius:20px;
 }
 
@@ -137,3 +137,12 @@ button.mat-icon-large > i {
     white-space: normal;
     line-height: inherit;
 }
+
+div.mat-card-media div.mdc-circular-progress {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}