Add file upload functionality with dialog components and update image handling

This commit is contained in:
liosha84
2025-08-05 21:13:21 +03:00
parent 8a18307527
commit d2f46f4405
33 changed files with 471 additions and 200 deletions
-6
View File
@@ -24,8 +24,6 @@
"@angular/platform-server": "^20.0.0",
"@angular/router": "^20.0.0",
"@angular/ssr": "^20.0.2",
"@ant-design/icons-angular": "19.0.0",
"@hreimer/angular-image-viewer": "^0.14.1",
"@ng-bootstrap/ng-bootstrap": "19.0.0",
"@popperjs/core": "2.11.8",
"@primeng/themes": "^19.1.3",
@@ -33,11 +31,7 @@
"bootstrap": "5.3.6",
"cropperjs": "^2.0.1",
"express": "^5.1.0",
"file-saver": "^2.0.5",
"ngx-filesaver": "^20.0.0",
"ngx-markdown": "^20.0.0",
"ngx-scrollbar": "18.0.0",
"primeng": "^19.1.3",
"prismjs": "^1.30.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
+3 -1
View File
@@ -17,6 +17,7 @@ import {AppRoutingModule} from './app.routes';
import {App} from './app';
import {CustomHttpInterceptor} from './helpers/custom-http-interceptor';
import {AngularMarkdownEditorModule} from 'angular-markdown-editor';
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
@@ -33,7 +34,8 @@ import {AngularMarkdownEditorModule} from 'angular-markdown-editor';
AdminWelcomeComponent,
SettingsComponent,
SystemComponent,
AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })
AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' }),
MatFormFieldModule
],
providers: [
authInterceptorProviders,provideHttpClient(withInterceptorsFromDi()),{
@@ -0,0 +1,40 @@
<div>
<mat-form-field>
<div>
<mat-toolbar>
<input matInput [value]="fileName" />
<button
mat-button
color="primary"
[disabled]="!currentFile"
(click)="upload()"
>
Upload
</button>
</mat-toolbar>
<input
type="file"
id="fileInput"
(change)="selectFile($event)"
name="fileInput"
/>
</div>
</mat-form-field>
</div>
@if (progress) {
<mat-toolbar class="progress-bar">
<mat-progress-bar color="accent" [value]="progress"></mat-progress-bar>
<span class="progress">{{ progress }}%</span>
</mat-toolbar>
}
@if (message) {
<div class="message">
{{ message }}
</div>
}
@if (fileInfo){
<img src="{{fileInfo.url}}" alt=""/>
}
@@ -0,0 +1,47 @@
.progress-bar {
padding: 0;
}
.progress {
width: 50px;
}
#fileInput {
position: absolute;
cursor: pointer;
z-index: 10;
opacity: 0;
height: 100%;
left: 0px;
top: 0px;
}
.mat-toolbar-single-row {
height: auto !important;
background: transparent;
padding: 0;
}
.mat-toolbar-single-row button {
width: 100px;
}
.mat-form-field {
width: 100%;
}
.mat-mdc-form-field {
display: block;
}
.message {
background-color: #ddd;
padding: 15px;
color: #333;
border: #aaa solid 1px;
border-radius: 4px;
margin-bottom: 10px;
}
img{
max-width: -webkit-fill-available;
}
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FileUploadComponent } from './file-upload.component';
describe('FileUploadComponent', () => {
let component: FileUploadComponent;
let fixture: ComponentFixture<FileUploadComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FileUploadComponent]
})
.compileComponents();
fixture = TestBed.createComponent(FileUploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,80 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
import {MatList, MatListItem} from '@angular/material/list';
import {AsyncPipe} from '@angular/common';
import {MatToolbar} from '@angular/material/toolbar';
import {MatProgressBar} from '@angular/material/progress-bar';
import {MatFormField, MatInput} from '@angular/material/input';
import {Observable} from 'rxjs';
import {HttpEventType, HttpResponse} from '@angular/common/http';
import {MatButton} from '@angular/material/button';
import {UserApiService} from '../../modules/user-module/user-api.service';
import {FileInfo} from '../../models/file-info';
@Component({
selector: 'app-file-upload',
imports: [
MatToolbar,
MatProgressBar,
MatFormField,
MatButton,
MatInput
],
templateUrl: './file-upload.component.html',
styleUrl: './file-upload.component.scss'
})
export class FileUploadComponent {
currentFile?: File;
progress = 0;
message = '';
fileName = 'Select File';
@Output() fileInfo: FileInfo | undefined;
@Output() onImageUploaded = new EventEmitter<FileInfo>();
constructor(private userApiService: UserApiService) {}
selectFile(event: any): void {
this.progress = 0;
this.message = '';
if (event.target.files && event.target.files[0]) {
const file: File = event.target.files[0];
this.currentFile = file;
this.fileName = this.currentFile.name;
} else {
this.fileName = 'Select File';
}
}
upload(): void {
if (this.currentFile) {
this.userApiService.upload(this.currentFile).subscribe({
next: (event: any) => {
if (event.type === HttpEventType.UploadProgress) {
this.progress = Math.round((100 * event.loaded) / event.total);
} else if (event instanceof HttpResponse) {
this.message = event.body.message;
this.fileInfo =event.body.fileInfo;
this.onImageUploaded.emit(this.fileInfo);
console.log(event.body);
}
},
error: (err: any) => {
console.log(err);
this.progress = 0;
if (err.error && err.error.message) {
this.message = err.error.message;
} else {
this.message = 'Could not upload the file!';
this.onImageUploaded.emit(undefined);
}
},
complete: () => {
this.currentFile = undefined;
},
});
}
}
}
@@ -19,9 +19,9 @@ export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
req = req.clone({
withCredentials: true,
});
// req = req.clone({
// withCredentials: true,
// });
return next.handle(req).pipe(
catchError((error) => {
@@ -1,4 +1,4 @@
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
import {HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
import {Observable, tap} from 'rxjs';
import {SpinnerService} from '../services/spinner.service';
import {Injectable} from '@angular/core';
@@ -19,6 +19,7 @@ export class CustomHttpInterceptor implements HttpInterceptor {
}
}, (error) => {
this.spinnerService.hide();
}));
}))
;
}
}
@@ -1,33 +1,23 @@
import {Component, CUSTOM_ELEMENTS_SCHEMA, Inject, inject, Renderer2} from '@angular/core';
import {AsyncPipe, DOCUMENT, NgOptimizedImage} from "@angular/common";
import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
import {AsyncPipe} from "@angular/common";
import {FormsModule} from "@angular/forms";
import {MatButton, MatMiniFabButton} from "@angular/material/button";
import {
MatCard,
MatCardActions,
MatCardContent,
MatCardHeader,
MatCardImage,
MatCardXlImage
MatCardHeader
} from "@angular/material/card";
import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
import {Image} from '../../../models/image';
import {ZhipuaiImageService} from '../zhipuai-image.service';
import {SpinnerService} from '../../../services/spinner.service';
import {MatProgressSpinner} from '@angular/material/progress-spinner';
import {FileUploadService} from '../../../services/file-upload-api.service';
import {Observable, Subscription} from 'rxjs';
import {HttpClient, HttpResponse} from '@angular/common/http';
import {MatToolbar, MatToolbarRow} from '@angular/material/toolbar';
import {MatIcon} from '@angular/material/icon';
import {MatTooltip} from '@angular/material/tooltip';
import {AuthService} from '../../../services/auth.service';
import {TokenStorageService} from '../../../services/token-storage.service';
import {FileInfo} from '../../../models/file-info';
import {UserApiService} from '../../user-module/user-api.service';
import {MatProgressBar} from '@angular/material/progress-bar';
@Component({
selector: 'app-generate-image.component',
@@ -43,26 +33,17 @@ import {MatProgressBar} from '@angular/material/progress-bar';
MatInput,
MatLabel,
MatProgressSpinner,
NgOptimizedImage,
MatCardXlImage,
MatCardImage,
MatToolbarRow,
MatToolbar,
MatIcon,
MatMiniFabButton,
MatTooltip,
MatProgressBar
],
templateUrl: './generate-image.component.html',
styleUrl: './generate-image.component.scss',
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GenerateImageComponent {
isSpinnerVisible = false;
query : string = '';
images: Image[] = [];
@@ -70,10 +51,6 @@ export class GenerateImageComponent {
url: ''
};
currentFile?: File;
message = '';
isLoggedIn = false;
private storageService: TokenStorageService = inject(TokenStorageService);
@@ -81,13 +58,8 @@ export class GenerateImageComponent {
constructor(
private zhipuaiImageService: ZhipuaiImageService,
public spinnerService: SpinnerService,
private uploadService: FileUploadService,
private userApiService:UserApiService,
private userApiService:UserApiService
) {
this.isLoggedIn = this.storageService.isLoggedIn();
}
@@ -108,7 +80,6 @@ export class GenerateImageComponent {
)
}
save(url: string | undefined) {
let requestUrl:string = url?url:"";
console.log(requestUrl);
@@ -118,9 +89,6 @@ export class GenerateImageComponent {
console.log(error);
});
}
}
@@ -2,13 +2,15 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {tutorialsRouting} from './tutorials.routing';
import {TutorialsComponent} from './tutorials.component/tutorials.component';
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
declarations: [],
imports: [
tutorialsRouting,
TutorialsComponent,
CommonModule
CommonModule,
MatFormFieldModule
]
})
export class TutorialsModule { }
@@ -1,5 +1,5 @@
<h1 mat-dialog-title>Hi </h1>
<div mat-dialog-content >
<!--<div mat-dialog-content >-->
<mat-dialog-content class="mat-typography">
<!-- <mat-nav-list>-->
@for (fileInfo of fileInfos; track fileInfo){
@@ -16,7 +16,7 @@
<!-- </mat-nav-list>-->
</mat-dialog-content>
</div>
<!--</div>-->
<div mat-dialog-actions>
<button mat-button (click)="upload()">Upload</button>
<span class="menu-spacer"></span>
@@ -2,20 +2,30 @@
flex: 1 1 auto;
}
.mat-dialog-content{
.mat-mdc-list-item{
}
a.mdc-list-item
{
cursor: grab;
height: 120px;
padding-bottom: 66px;
background-color: rgba(24,255,255,0.04);
}
/*.mat-dialog-content{
min-height: 300px;
min-width: 300px;
height: 75%;
width: 75%;
}
.mdc-dialog--open .mat-mdc-dialog-inner-container
}*/
/*.mdc-dialog--open .mat-mdc-dialog-inner-container
{
opacity: 1;
width: 600px;
}
}*/
.mat-mdc-dialog-container {
/*.mat-mdc-dialog-container {
width: 600px;
height: 500px;
display: block;
@@ -25,4 +35,9 @@
min-width: inherit;
max-width: inherit;
outline: 0;
}*/
/*
.mat-mdc-dialog-content{
overflow: auto;
}
*/
@@ -7,8 +7,7 @@ import {
MatDialogTitle
} from '@angular/material/dialog';
import {MatButton} from '@angular/material/button';
import {MatListItem, MatNavList} from '@angular/material/list';
import {RouterLink} from '@angular/router';
import {MatListItem} from '@angular/material/list';
import {FileInfo} from '../../../models/file-info';
import {UserApiService} from '../user-api.service';
@@ -20,10 +19,7 @@ import {UserApiService} from '../user-api.service';
MatButton,
MatDialogActions,
MatDialogClose,
MatListItem,
MatNavList,
MatListItem
],
templateUrl: './dialog-select-image.component.html',
styleUrl: './dialog-select-image.component.scss'
@@ -42,10 +38,10 @@ export class DialogSelectImageComponent {
console.log(data);
});
}
//open upload dialog
upload() {
this.uploadClicked.emit();
}
onNoClick() {
@@ -54,5 +50,6 @@ export class DialogSelectImageComponent {
select(fileInfo:FileInfo) {
this.selectClicked.emit(fileInfo);
this.dialogRef.close();
}
}
@@ -0,0 +1,14 @@
<p>dialog-upload-image.component works!</p>
<mat-dialog-content class="mat-typography">
<app-file-upload #imageUpload (onImageUploaded)="imageUpload_ImageUploaded($event)"></app-file-upload>
</mat-dialog-content>
<div mat-dialog-actions>
<button mat-button (click)="openSelectImageDialog()">Select image</button>
<span class="menu-spacer"></span>
<button mat-button mat-dialog-close (click)="onNoClick()">No Thanks</button>
<!-- <button mat-button cdkFocusInitial (click)="select()">Ok</button>-->
<button mat-button cdkFocusInitial [disabled]="!imageUploaded" (click)="selectUploadedImage()">Ok</button>
</div>
@@ -0,0 +1,6 @@
.menu-spacer {
flex: 1 1 auto;
}
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DialogUploadImageComponent } from './dialog-upload-image.component';
describe('DialogUploadImageComponent', () => {
let component: DialogUploadImageComponent;
let fixture: ComponentFixture<DialogUploadImageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DialogUploadImageComponent]
})
.compileComponents();
fixture = TestBed.createComponent(DialogUploadImageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,54 @@
import {Component, EventEmitter, inject, Output, ViewChild} from '@angular/core';
import {FileUploadComponent} from '../../../components/file-upload.component/file-upload.component';
import {MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
import {MatButton} from '@angular/material/button';
import {FileInfo} from '../../../models/file-info';
@Component({
selector: 'app-dialog-upload-image.component',
imports: [
FileUploadComponent,
MatDialogContent,
MatButton,
MatDialogActions,
MatDialogClose
],
templateUrl: './dialog-upload-image.component.html',
styleUrl: './dialog-upload-image.component.scss'
})
export class DialogUploadImageComponent {
//select uploaded file
@Output() selectUploadedImageClicked = new EventEmitter<any>();
//open select dialog
@Output() openSelectDialogClicked = new EventEmitter<any>();
readonly dialogRef = inject(MatDialogRef<DialogUploadImageComponent>);
@ViewChild('imageUpload') imageUpload: FileUploadComponent | undefined;
imageUploaded:boolean = false;
onNoClick() {
this.dialogRef.close();
}
selectUploadedImage() {
this.selectUploadedImageClicked.emit(this.imageUpload?.fileInfo?.url);
this.dialogRef.close();
}
openSelectImageDialog() {
this.openSelectDialogClicked.emit();
this.dialogRef.close();
}
imageUpload_ImageUploaded($event: FileInfo | undefined) {
if($event){
this.imageUploaded = true;
}
else{
this.imageUploaded = false;
}
}
}
@@ -14,9 +14,9 @@
<img style="width: 120px; height: 120px" src="{{tutorial.titleimage}}" alt="">
<input matInput
[(ngModel)]="tutorial.titleimage">
<button mat-raised-button color="primary" (click)="openSelectImageDialog('100ms', '5ms')">Select image</button>
</mat-form-field>
<button mat-raised-button color="primary" (click)="openSelectImageDialog('100ms', '5ms')">Select image</button>
<button mat-raised-button color="primary" (click)="openUploadImageDialog('100ms', '5ms')">Upload image</button>
<div class="example-full-width">
<mat-label>Description</mat-label>
<mat-tab-group>
@@ -12,10 +12,10 @@ import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
import {MatTab, MatTabGroup} from '@angular/material/tabs';
import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AngularMarkdownEditorModule, EditorInstance, EditorOption} from 'angular-markdown-editor';
import {DialogLoginComponent} from '../../main-module/main.component/dialog-login.component/dialog-login.component';
import {GlobalConstants} from '../../../global-constants';
import {MatDialog} from '@angular/material/dialog';
import {DialogSelectImageComponent} from '../dialog-select-image.component/dialog-select-image.component';
import {DialogUploadImageComponent} from '../dialog-upload-image.component/dialog-upload-image.component';
import {FileUploadComponent} from '../../../components/file-upload.component/file-upload.component';
@Component({
selector: 'app-tutorial-add.component',
@@ -51,6 +51,8 @@ export class TutorialAddComponent implements OnInit{
readonly dialog = inject(MatDialog);
markdown = `## Markdown __rulez__!
---
@@ -72,10 +74,6 @@ const language = 'typescript';
constructor(private fb: FormBuilder,
private markdownService: MarkdownService,
private userApiService: UserApiService,
private storageService: TokenStorageService,
private eventBusService: EventBusService,
private router: Router,
private authService: AuthService
) {
this.tutorial.description = this.markdown;
@@ -185,7 +183,7 @@ const language = 'typescript';
});
dialogSelectRef.componentInstance.uploadClicked.subscribe(result => {
dialogSelectRef.close();
//this.openSignupDialog(enterAnimationDuration, exitAnimationDuration);
this.openUploadImageDialog(enterAnimationDuration, exitAnimationDuration);
})
const dialogSelectSubscription = dialogSelectRef.componentInstance.selectClicked
@@ -199,4 +197,29 @@ const language = 'typescript';
});
}
openUploadImageDialog(enterAnimationDuration: string, exitAnimationDuration: string) {
let dialogSelectRef = this.dialog.open(DialogUploadImageComponent, {
height: '500px',
width: '600px',
enterAnimationDuration,
exitAnimationDuration,
// data: {username: this.dialogLoginData.username, password: this.dialogLoginData.password}
});
dialogSelectRef.componentInstance.openSelectDialogClicked.subscribe(result => {
dialogSelectRef.close();
this.openSelectImageDialog(enterAnimationDuration, exitAnimationDuration);
})
const dialogUploadSubscription = dialogSelectRef.componentInstance.selectUploadedImageClicked
.subscribe(result => {
console.log('Got the data!', result);
if (result == null) {
return;
}
this.tutorial.titleimage = result.url;
});
}
}
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import {forkJoin, Observable} from 'rxjs';
import {Tutorial} from '../../models/tutorial.model';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {HttpClient, HttpEvent, HttpHeaders, HttpRequest} from '@angular/common/http';
import {GlobalConstants} from '../../global-constants';
import {FileInfo} from '../../models/file-info';
@@ -15,6 +15,19 @@ export class UserApiService {
}
upload(file: File): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
reportProgress: true,
responseType: 'json'
});
return this.http.request(req);
}
saveZhipuaiImage(url: string): Observable<any> {
return this.http.post(`${this.baseUrl}/saveZhipuAiImage`, {imageUrl:url});
}
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import {userRouting} from './user.routing';
import {UserComponent} from './user.component/user.component';
import {AngularMarkdownEditorModule} from 'angular-markdown-editor';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -12,7 +13,8 @@ import {AngularMarkdownEditorModule} from 'angular-markdown-editor';
userRouting,
UserComponent,
CommonModule,
AngularMarkdownEditorModule
AngularMarkdownEditorModule,
MatFormFieldModule
]
})
export class UserModule { }
@@ -1,16 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { FileUploadApiService } from './file-upload-api.service';
describe('FileUploadApiService', () => {
let service: FileUploadApiService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(FileUploadApiService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
@@ -1,29 +0,0 @@
import { Injectable } from '@angular/core';
import {GlobalConstants} from '../global-constants';
import {HttpClient, HttpEvent, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {FileInfo} from '../models/file-info';
@Injectable({
providedIn: 'root'
})
export class FileUploadService {
private baseUrl = GlobalConstants.API_URL + '/file';
constructor(private http: HttpClient) {}
upload(file: File): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
responseType: 'json',
});
return this.http.request(req);
}
getFiles(): Observable<FileInfo[]> {
return this.http.get<FileInfo[]>(`${this.baseUrl}/files`);
}
}
@@ -5,15 +5,9 @@ import com.jambotronGroup.jambotron.fileUpload.FilesStorageService;
import jakarta.annotation.Resource;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.slf4j.Marker;
import org.slf4j.event.Level;
import org.slf4j.helpers.BasicMarker;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Import;
import java.util.Iterator;
@SpringBootApplication
public class JambotronApplication implements CommandLineRunner {
@@ -35,4 +29,5 @@ public class JambotronApplication implements CommandLineRunner {
// storageService.deleteAll();
storageService.init();
}
}
@@ -1,25 +0,0 @@
package com.jambotronGroup.jambotron.configuretions;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/*
@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
@Value("${spring.resources.static-locations}")
String resourceLocations;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//registry.addResourceHandler("/public/**").addResourceLocations(resourceLocations);
registry.addResourceHandler("/**").addResourceLocations("classpath:/resources/");
//registry.
registry.addResourceHandler("/media/**").addResourceLocations("resources/main/public/media/");
}
}*/
@@ -1,35 +0,0 @@
package com.jambotronGroup.jambotron.configuretions;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
import org.springframework.util.StreamUtils;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.servlet.NoHandlerFoundException;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.nio.charset.Charset;
/*
@ControllerAdvice
public class NotFoundHandler {
@Value("${spa.default-file}")
String defaultFile;
@ExceptionHandler(NoHandlerFoundException.class)
public ResponseEntity<String> renderDefaultPage() {
try {
File indexFile = ResourceUtils.getFile(defaultFile);
FileInputStream inputStream = new FileInputStream(indexFile);
String body = StreamUtils.copyToString(inputStream, Charset.defaultCharset());
return ResponseEntity.ok().contentType(MediaType.TEXT_HTML).body(body);
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("There was an error completing the action.");
}
}
}*/
@@ -1,6 +1,7 @@
package com.jambotronGroup.jambotron.controllers;
import com.jambotronGroup.jambotron.fileUpload.FilesStorageService;
import com.jambotronGroup.jambotron.fileUpload.ResponseImageUploadResult;
import com.jambotronGroup.jambotron.fileUpload.ResponseMessage;
import com.jambotronGroup.jambotron.model.FileInfo;
import com.jambotronGroup.jambotron.model.User;
@@ -30,17 +31,32 @@ import java.util.List;
import java.util.stream.Collectors;
@Controller
//@CrossOrigin("http://localhost:8081")
public class FilesController {
private static final Logger logger = LoggerFactory.getLogger(FilesController.class);
@Autowired
AuthenticationFacade authenticationFacade;
@Autowired
FilesStorageService storageService;
/**
* Generates a URL for accessing a user's image.
* format: /api/user/user-images/{filename:.+}
*
* @param filename The name of the file.
* @return The URL to access the file.
*/
private static String getUserImageUrl(String filename) {
return MvcUriComponentsBuilder
.fromMethodName(FilesController.class, "getUserImage", filename).build().toString();
}
private static String getPublicImageUrl(String filename) {
return MvcUriComponentsBuilder
.fromMethodName(FilesController.class, "getFile", filename).build().toString();
}
@PostMapping("/api/user/saveZhipuAiImage")
public ResponseEntity<ResponseMessage> saveZhipuAiImage(@Valid @RequestBody SaveZhipuAiImageRequest request) {
@@ -52,7 +68,6 @@ public class FilesController {
String message = "";
RestTemplate restTemplate = new RestTemplate();
try {
@@ -92,14 +107,21 @@ public class FilesController {
return ResponseEntity.status(HttpStatus.OK).body(new ResponseMessage(message));
}
@PostMapping("/api/file/upload")
@PostMapping("/api/user/upload")
public ResponseEntity<ResponseMessage> uploadFile(@RequestParam("file") MultipartFile file) {
String message = "";
try {
storageService.save(file);
User user = authenticationFacade.getUser();
String localFullFileName = storageService.save(user.getId().toString(), file);
FileInfo fileInfo = new FileInfo(
file.getOriginalFilename(),
FilesController.getUserImageUrl(localFullFileName));
message = "Uploaded the file successfully: " + file.getOriginalFilename();
return ResponseEntity.status(HttpStatus.OK).body(new ResponseMessage(message));
return ResponseEntity.status(HttpStatus.OK).body(new ResponseImageUploadResult(message,fileInfo));
} catch (Exception e) {
message = "Could not upload the file: " + file.getOriginalFilename() + ". Error: " + e.getMessage();
return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(new ResponseMessage(message));
@@ -113,8 +135,8 @@ public class FilesController {
List<FileInfo> fileInfos = storageService.loadUserImages(user.getId().toString()).map(path -> {
String filename = path.getFileName().toString();
String url = MvcUriComponentsBuilder
.fromMethodName(FilesController.class, "getUserImage", path.getFileName().toString()).build().toString();
String url = FilesController.getUserImageUrl(filename);
return new FileInfo(filename, url);
}).collect(Collectors.toList());
@@ -127,9 +149,7 @@ public class FilesController {
public ResponseEntity<List<FileInfo>> getListFiles() {
List<FileInfo> fileInfos = storageService.loadAll().map(path -> {
String filename = path.getFileName().toString();
String url = MvcUriComponentsBuilder
.fromMethodName(FilesController.class, "getFile", path.getFileName().toString()).build().toString();
String url = FilesController.getPublicImageUrl(filename);
return new FileInfo(filename, url);
}).collect(Collectors.toList());
@@ -0,0 +1,18 @@
package com.jambotronGroup.jambotron.exceptionHandlers;
import com.jambotronGroup.jambotron.fileUpload.ResponseMessage;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler;
//@ControllerAdvice
//public class FileUploadExceptionHandler extends ResponseEntityExceptionHandler {
//
// @ExceptionHandler(MaxUploadSizeExceededException.class)
// public ResponseEntity<ResponseMessage> handleMaxSizeException(MaxUploadSizeExceededException exc) {
// return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(new ResponseMessage("File too large!"));
// }
//}
@@ -10,7 +10,7 @@ import java.util.stream.Stream;
public interface FilesStorageService {
public void init();
public void save(String userID,MultipartFile file);
public String save(String userID,MultipartFile file);
public void save(MultipartFile file);
@@ -56,14 +56,25 @@ public class FilesStorageServiceImpl implements FilesStorageService {
return this.rootPublic.resolve(newFilename);
}
/**
* Saves a file to a user's directory.
* uploads/user-images/{userID}/{filename}
*
* @param userID The ID of the user.
* @param file The file to save.
*/
@Override
public void save(String userID,MultipartFile file) {
public String save(String userID,MultipartFile file) {
Path targetPath = null;
try {
Path path = this.root.resolve(userID);
path.toFile().mkdirs(); // Ensure user directory exists
Files.copy(file.getInputStream(), path.resolve(file.getOriginalFilename()),
targetPath = path.resolve(file.getOriginalFilename());
Files.copy(file.getInputStream(), targetPath,
java.nio.file.StandardCopyOption.REPLACE_EXISTING);
} catch (Exception e) {
if (e instanceof FileAlreadyExistsException) {
throw new RuntimeException("A file of that name already exists.");
@@ -71,6 +82,8 @@ public class FilesStorageServiceImpl implements FilesStorageService {
throw new RuntimeException(e.getMessage());
}
return targetPath.getFileName().toString();
}
@Override
@@ -0,0 +1,21 @@
package com.jambotronGroup.jambotron.fileUpload;
import com.jambotronGroup.jambotron.model.FileInfo;
public class ResponseImageUploadResult extends ResponseMessage {
private FileInfo fileInfo;
public ResponseImageUploadResult(String message, FileInfo fileInfo) {
super(message);
this.fileInfo = fileInfo;
}
public FileInfo getFileInfo() {
return this.fileInfo;
}
public void setFileInfo(FileInfo fileInfo) {
this.fileInfo = fileInfo;
}
}
@@ -3,6 +3,8 @@ package com.jambotronGroup.jambotron.fileUpload;
public class ResponseMessage {
private String message;
public ResponseMessage(String message) {
this.message = message;
}
@@ -104,6 +104,9 @@ public class WebSecurityConfig implements WebMvcConfigurer {// extends WebSecuri
.requestMatchers("/tutorials-images/**").permitAll()
.requestMatchers("/api/file/files").permitAll()
.requestMatchers("/api/file/upload").permitAll()
.requestMatchers("/files/**").permitAll()
.requestMatchers("/api/auth/**").permitAll()