Merge branch 'Eric_adding_img_upload_to_server' into 'Eric'

Eric adding img upload to server

See merge request limited_dev/imageboard!2

.gitignore

@@ -1,6 +1,7 @@
 .idea/
 ImageBoardServerApp/bin/
 ImageBoardServerApp/obj/
+ImageBoardServerApp/wwwroot/img/dynamic
 *.db
 *.db-shm
 *.db-wal

ImageBoardServerApp/App.razor

@@ -8,7 +8,7 @@
         <LayoutView Layout="@typeof(MainLayout)">
             <h3>404</h3>
             <div class="Error404">
-                <img src="static/1.jpeg" alt="noimageFound"/>
+                <img src="img/static/err/1.jpeg" alt="noimageFound"/>
                 <p role="alert">Sorry, nothing found. Please go back to the main page. Or watch the tree and find the hidden Cat..</p>
             </div>
         </LayoutView>

ImageBoardServerApp/Data/ImageData.cs

@@ -15,7 +15,7 @@ public class ImageData
     public string Board { get; set; }
 
     [Required]
-    public Byte[] Image { get; set; }
+    public string ImageLocation { get; set; }
     
     public PostData Post { get; set; }
     

ImageBoardServerApp/ImageBoardServerApp.csproj

@@ -18,15 +18,18 @@
       <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
     </ItemGroup>
 
-    <ItemGroup>
-      <Folder Include="wwwroot\dynamic\comment" />
-      <Folder Include="wwwroot\dynamic\op" />
-      <Folder Include="wwwroot\static" />
-    </ItemGroup>
-
     <ItemGroup>
       <AdditionalFiles Include="Shared\Components\Forms\CommentForm.razor" />
       <AdditionalFiles Include="Shared\Components\Forms\PostForm.razor" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="wwwroot\img\dynamic\comment\b" />
+      <Folder Include="wwwroot\img\dynamic\op\b" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <Content Remove="wwwroot\img\dynamic\op\1663306837979603.jpg" />
+    </ItemGroup>
+
 </Project>

ImageBoardServerApp/Shared/Components/Comment.razor

@@ -16,7 +16,7 @@
         <div class="threadImage">
             @if (image != null)
             {
-                <img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(image.Image)}")" alt="No Image found" />
+                <img src="@($"{image.ImageLocation}")" alt="No Image found" />
             }
         </div>
         <div class="threadTextContainer">

ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor

@@ -2,6 +2,7 @@
 @using ImageBoardServerApp.Data.Repository
 
 @inject NavigationManager navigationManager
+@inject IWebHostEnvironment env
 
 <div>
     <span>[</span>
@@ -13,19 +14,7 @@
     <div class="pd centered">
         <span>Comment on @post.Title in /@post.Board/</span>
         
-        <FormInfo/>
-
         <div class="centered formContent">
-            <div>
-                <div class="pd centered marg">
-                    @if (image != null)
-                        {
-                            <img class="formImage" src="@($"data:image/png;base64,{Convert.ToBase64String(image)}")" alt="No Image"/>
-                        }
-                </div>
-                <InputFile OnChange="@SingleUpload" type="file" accept="image/*"/>
-            </div>
-            
             <div>
                 <div class="pd centered marg">
                     <RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/>
@@ -39,9 +28,9 @@
     
         <div class="pd centered marg">
             <FormInfo/>
-            <RadzenButton class="pd" Click="@onPostClick" Text="Comment!"></RadzenButton>
+            <InputFile OnChange="@SingleUpload" type="file" accept="image/*"/>
+            <RadzenButton class="pd" Click="@onPostClick" Text="Post!"></RadzenButton>
         </div>
-    
     </div>
 }
 
@@ -86,18 +75,14 @@
         Console.WriteLine($"Smth changed!: {value}");
     }
     
+    private IBrowserFile selectedFile;
+    
     private async Task SingleUpload(InputFileChangeEventArgs e)
     {
-        MemoryStream ms = new MemoryStream();
+        selectedFile = e.GetMultipleFiles()[0];
-        await e.File.OpenReadStream().CopyToAsync(ms);
+        this.StateHasChanged();
-        var bytes = ms.ToArray();
-        image = bytes;
-        Console.WriteLine("File has been selected!");
-        ms.Close();
     }
 
-    private Byte[] image = null;
-
     private async Task onPostClick()
     {
         var userToCreate = new UserData
@@ -122,14 +107,24 @@
             await UsersRepository.updateUserAsync(foundusr);
         }
 
-        bool hasImage = image != null;
+        bool hasImage = selectedFile != null;
+
         CommentData commentToCreate;
         if (hasImage)
         {
+            Stream stream = selectedFile.OpenReadStream(maxAllowedSize: 512000 * 4); // max 2MB
+            var file = Path.GetRandomFileName() + "." + selectedFile.Name.Split(".")[selectedFile.Name.Split(".").Length - 1];
+            var path = $"{env.WebRootPath}\\img\\dynamic\\comment\\{@post.Board}\\{file}";
+            FileStream fs = File.Create(path);
+            await stream.CopyToAsync(fs);
+            stream.Close();
+            fs.Close();
+            
+            
             var imageToUpload = new ImageData
             {
                 Board = post.Board,
-                Image = image
+                ImageLocation = $"\\img\\dynamic\\comment\\{post.Board}\\{file}"
             };
             int imageID = await ImagesRepository.createImageAsync(imageToUpload);
             commentToCreate = new CommentData()

ImageBoardServerApp/Shared/Components/Forms/FormInfo.razor

@@ -1,5 +1,5 @@
 <ul class="notesInfo">
-    <li>The max. image size is 1MB.</li>
+    <li>The max. image size is 2MiB.</li>
     <li>Supported file types are: jpeg, png & gif</li>
     <li>Read the rules before posting</li>
 </ul>

ImageBoardServerApp/Shared/Components/Forms/PostForm.razor

@@ -8,6 +8,7 @@
 @using ImageBoardServerApp.Data.Repository
 
 @inject NavigationManager NavigationManager
+@inject IWebHostEnvironment env
 
 <div>
     <span>[</span>
@@ -20,16 +21,6 @@
         <span>Post to /@board.Tag/ - @board.Topic</span>
 
         <div class="centered formContent">
-            <div>
-                <div class="pd centered marg">
-                    @if (image != null)
-                        {
-                            <img class="formImage" src="@($"data:image/png;base64,{Convert.ToBase64String(image)}")" alt="No Image"/>
-                        }
-                </div>
-                <InputFile OnChange="@SingleUpload" type="file" accept="image/*"/>
-            </div>
-
             <div>
                 <div class="pd centered marg"> 
                     <RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/>
@@ -48,6 +39,7 @@
     
         <div class="pd centered marg">
             <FormInfo/>
+            <InputFile OnChange="@SingleUpload" type="file" accept="image/*"/>
             <RadzenButton class="pd" Click="@onPostClick" Text="Post!"></RadzenButton>
         </div>
     
@@ -95,18 +87,15 @@
         Console.WriteLine($"Smth changed!: {value}");
     }
     
+    private IBrowserFile selectedFile;
+    
+    
     private async Task SingleUpload(InputFileChangeEventArgs e)
     {
-        MemoryStream ms = new MemoryStream();
+        selectedFile = e.GetMultipleFiles()[0];
-        await e.File.OpenReadStream().CopyToAsync(ms);
+        this.StateHasChanged();
-        var bytes = ms.ToArray();
-        image = bytes;
-        Console.WriteLine("File has been selected!");
-        ms.Close();
     }
 
-    private Byte[] image;
-
     private async Task onPostClick()
     {
         var userToCreate = new UserData
@@ -132,11 +121,24 @@
         }
         
         //TODO Add check if data is image
-
+        
+        if (selectedFile == null)
+        {
+            return;
+        }
+        
+        Stream stream = selectedFile.OpenReadStream(maxAllowedSize: 512000 * 4); // max 2MB
+        var file = Path.GetRandomFileName() + "." + selectedFile.Name.Split(".")[selectedFile.Name.Split(".").Length - 1];
+        var path = $"{env.WebRootPath}\\img\\dynamic\\op\\{board.Tag}\\{file}";
+        FileStream fs = File.Create(path);
+        await stream.CopyToAsync(fs);
+        stream.Close();
+        fs.Close();
+        
         var imageToUpload = new ImageData
         {
             Board = board.Tag,
-            Image = image
+            ImageLocation = $"\\img\\dynamic\\op\\{board.Tag}\\{file}"
         };
         int imageID = await ImagesRepository.createImageAsync(imageToUpload);
         var postToPost = new PostData

ImageBoardServerApp/Shared/Components/Post.razor

@@ -19,7 +19,7 @@
         <div class="threadImage">
             @if (@post.Image != null)
             {
-                <img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(@post.Image.Image)}")" alt="No Image found" />
+                <img src="@($"{@post.Image.ImageLocation}")" alt="No Image found" />
             }
             else
             {