Merge branch 'Eric_adding_img_upload_to_server' into 'Eric'

Eric adding img upload to server

See merge request limited_dev/imageboard!2
This commit is contained in:
limited_dev 2023-02-01 13:23:18 +00:00
commit c2d40c172a
10 changed files with 56 additions and 55 deletions

1
.gitignore vendored
View file

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

View file

@ -8,7 +8,7 @@
<LayoutView Layout="@typeof(MainLayout)"> <LayoutView Layout="@typeof(MainLayout)">
<h3>404</h3> <h3>404</h3>
<div class="Error404"> <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> <p role="alert">Sorry, nothing found. Please go back to the main page. Or watch the tree and find the hidden Cat..</p>
</div> </div>
</LayoutView> </LayoutView>

View file

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

View file

@ -18,15 +18,18 @@
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" /> <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\dynamic\comment" />
<Folder Include="wwwroot\dynamic\op" />
<Folder Include="wwwroot\static" />
</ItemGroup>
<ItemGroup> <ItemGroup>
<AdditionalFiles Include="Shared\Components\Forms\CommentForm.razor" /> <AdditionalFiles Include="Shared\Components\Forms\CommentForm.razor" />
<AdditionalFiles Include="Shared\Components\Forms\PostForm.razor" /> <AdditionalFiles Include="Shared\Components\Forms\PostForm.razor" />
</ItemGroup> </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> </Project>

View file

@ -16,7 +16,7 @@
<div class="threadImage"> <div class="threadImage">
@if (image != null) @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>
<div class="threadTextContainer"> <div class="threadTextContainer">

View file

@ -2,6 +2,7 @@
@using ImageBoardServerApp.Data.Repository @using ImageBoardServerApp.Data.Repository
@inject NavigationManager navigationManager @inject NavigationManager navigationManager
@inject IWebHostEnvironment env
<div> <div>
<span>[</span> <span>[</span>
@ -13,19 +14,7 @@
<div class="pd centered"> <div class="pd centered">
<span>Comment on @post.Title in /@post.Board/</span> <span>Comment on @post.Title in /@post.Board/</span>
<FormInfo/>
<div class="centered formContent"> <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>
<div class="pd centered marg"> <div class="pd centered marg">
<RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/> <RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/>
@ -39,9 +28,9 @@
<div class="pd centered marg"> <div class="pd centered marg">
<FormInfo/> <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>
</div> </div>
} }
@ -86,18 +75,14 @@
Console.WriteLine($"Smth changed!: {value}"); Console.WriteLine($"Smth changed!: {value}");
} }
private IBrowserFile selectedFile;
private async Task SingleUpload(InputFileChangeEventArgs e) 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() private async Task onPostClick()
{ {
var userToCreate = new UserData var userToCreate = new UserData
@ -122,14 +107,24 @@
await UsersRepository.updateUserAsync(foundusr); await UsersRepository.updateUserAsync(foundusr);
} }
bool hasImage = image != null; bool hasImage = selectedFile != null;
CommentData commentToCreate; CommentData commentToCreate;
if (hasImage) 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 var imageToUpload = new ImageData
{ {
Board = post.Board, Board = post.Board,
Image = image ImageLocation = $"\\img\\dynamic\\comment\\{post.Board}\\{file}"
}; };
int imageID = await ImagesRepository.createImageAsync(imageToUpload); int imageID = await ImagesRepository.createImageAsync(imageToUpload);
commentToCreate = new CommentData() commentToCreate = new CommentData()

View file

@ -1,5 +1,5 @@
<ul class="notesInfo"> <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>Supported file types are: jpeg, png & gif</li>
<li>Read the rules before posting</li> <li>Read the rules before posting</li>
</ul> </ul>

View file

@ -8,6 +8,7 @@
@using ImageBoardServerApp.Data.Repository @using ImageBoardServerApp.Data.Repository
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@inject IWebHostEnvironment env
<div> <div>
<span>[</span> <span>[</span>
@ -20,16 +21,6 @@
<span>Post to /@board.Tag/ - @board.Topic</span> <span>Post to /@board.Tag/ - @board.Topic</span>
<div class="centered formContent"> <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>
<div class="pd centered marg"> <div class="pd centered marg">
<RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/> <RadzenTextBox Placeholder="Username (Anonymous)" MaxLength="15" Change=@(args => OnChange(args, "username")) Class="w-100"/>
@ -48,6 +39,7 @@
<div class="pd centered marg"> <div class="pd centered marg">
<FormInfo/> <FormInfo/>
<InputFile OnChange="@SingleUpload" type="file" accept="image/*"/>
<RadzenButton class="pd" Click="@onPostClick" Text="Post!"></RadzenButton> <RadzenButton class="pd" Click="@onPostClick" Text="Post!"></RadzenButton>
</div> </div>
@ -95,18 +87,15 @@
Console.WriteLine($"Smth changed!: {value}"); Console.WriteLine($"Smth changed!: {value}");
} }
private IBrowserFile selectedFile;
private async Task SingleUpload(InputFileChangeEventArgs e) 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() private async Task onPostClick()
{ {
var userToCreate = new UserData var userToCreate = new UserData
@ -132,11 +121,24 @@
} }
//TODO Add check if data is image //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 var imageToUpload = new ImageData
{ {
Board = board.Tag, Board = board.Tag,
Image = image ImageLocation = $"\\img\\dynamic\\op\\{board.Tag}\\{file}"
}; };
int imageID = await ImagesRepository.createImageAsync(imageToUpload); int imageID = await ImagesRepository.createImageAsync(imageToUpload);
var postToPost = new PostData var postToPost = new PostData

View file

@ -19,7 +19,7 @@
<div class="threadImage"> <div class="threadImage">
@if (@post.Image != null) @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 else
{ {

View file

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB