1
0
forked from PGL/Clyde

Merge pull request 'UploadAPI and profilePicture' (#102) from tonitch/front/apiUpload into master

Reviewed-on: PGL/Clyde#102
Reviewed-by: LeoMoulin <leomoulin125@gmail.com>
Reviewed-by: Wal <karpinskiwal@gmail.com>
Reviewed-by: Maxime <231026@umons.ac.be>
This commit is contained in:
Debucquoy Anthony 2024-03-14 22:37:30 +01:00
commit 1502cc871c
5 changed files with 38 additions and 12 deletions

View File

@ -1,13 +1,12 @@
package ovh.herisson.Clyde.EndPoints; package ovh.herisson.Clyde.EndPoints;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus; import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity; import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartFile;
import ovh.herisson.Clyde.Services.StorageService; import ovh.herisson.Clyde.Services.StorageService;
import org.springframework.core.io.Resource;
import ovh.herisson.Clyde.Tables.FileType; import ovh.herisson.Clyde.Tables.FileType;
import ovh.herisson.Clyde.Tables.StorageFile;
@RestController @RestController
@CrossOrigin(originPatterns = "*", allowCredentials = "true") @CrossOrigin(originPatterns = "*", allowCredentials = "true")
@ -21,12 +20,17 @@ public class StorageController {
@PostMapping("/upload/{fileType}") @PostMapping("/upload/{fileType}")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file, @PathVariable FileType fileType) { public ResponseEntity<StorageFile> handleFileUpload(@RequestParam("file") MultipartFile file, @PathVariable FileType fileType) {
String path = storageServ.store(file,fileType); StorageFile fileEntry = null;
try {
fileEntry = storageServ.store(file,fileType);
} catch(Exception e){
e.printStackTrace();
}
if (path == null) return new ResponseEntity<>("issue with the file storage", HttpStatus.BAD_REQUEST);
return new ResponseEntity<>(path, HttpStatus.OK); return new ResponseEntity<>(fileEntry, HttpStatus.OK);
} }
} }

View File

@ -35,7 +35,7 @@ public class StorageService {
} }
public String store(MultipartFile file, FileType fileType) { public StorageFile store(MultipartFile file, FileType fileType) {
if (file.getOriginalFilename().isEmpty()){return null;} if (file.getOriginalFilename().isEmpty()){return null;}
@ -57,9 +57,7 @@ public class StorageService {
String url = this.rootLocation.resolve(Paths.get(Objects.requireNonNull(stringUuid))) String url = this.rootLocation.resolve(Paths.get(Objects.requireNonNull(stringUuid)))
.normalize().toString(); .normalize().toString();
fileRepo.save(new StorageFile(file.getName(),url, fileType)); return fileRepo.save(new StorageFile(file.getName(),url, fileType));
return url;
} }
public void delete(StorageFile file) throws SecurityException { public void delete(StorageFile file) throws SecurityException {

View File

@ -1,7 +1,9 @@
<script setup> <script setup>
import { login , register} from '@/rest/Users.js'
import { ref } from 'vue' import { ref } from 'vue'
import i18n from '@/i18n.js' import i18n from '@/i18n.js'
import { login , register } from '@/rest/Users.js'
import { uploadProfilePicture } from '@/rest/uploads.js'
const loginPage= ref(true) const loginPage= ref(true)
const page = ref(0) const page = ref(0)
@ -23,6 +25,8 @@
const registerInfos= [{_surname:surname},{_firstname:firstname},{_birthday:birthday},{_passwordOUT:passwordOUT}, const registerInfos= [{_surname:surname},{_firstname:firstname},{_birthday:birthday},{_passwordOUT:passwordOUT},
{_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}] {_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
const imageSaved = ref(false)
const ppData = ref(false)
</script> </script>
@ -99,6 +103,10 @@
<p>{{i18n("login.guest.country")}}</p> <p>{{i18n("login.guest.country")}}</p>
<input type="text" v-model="country"> <input type="text" v-model="country">
</div> </div>
<form novalidate enctype="multipart/form-data" class="inputBox">
<p>ProfilePicture</p>
<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
</form>
<div class="inputBox"> <div class="inputBox">
<p>{{i18n("curriculum").toUpperCase()}}</p> <p>{{i18n("curriculum").toUpperCase()}}</p>
<select v-model="cursus"> <select v-model="cursus">

View File

@ -11,6 +11,11 @@ export async function restPost(endPoint, data) {
return await _rest(endPoint, {method: "POST", credentials: 'include', body: JSON.stringify(data)}); return await _rest(endPoint, {method: "POST", credentials: 'include', body: JSON.stringify(data)});
} }
export async function restPostFile(endPoint, file){
let headers = new Headers();
return await _rest(endPoint, {method: "POST", credentials: 'include', body: file, headers: headers });
}
export async function restDelete(endPoint, data) { export async function restDelete(endPoint, data) {
return await _rest(endPoint, {method: "DELETE", credentials: 'include', body: JSON.stringify(data)}); return await _rest(endPoint, {method: "DELETE", credentials: 'include', body: JSON.stringify(data)});
} }
@ -35,7 +40,7 @@ async function _rest(endPoint, config){
'Authorization': session_token, 'Authorization': session_token,
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}); });
config['headers'] = headers; config['headers'] = config['headers'] == null ? headers : config['headers'];
return toast.promise(fetch(restURL + endPoint, config), return toast.promise(fetch(restURL + endPoint, config),
{ {
pending: config['pending'] != null ? config['pending'] : 'pending', pending: config['pending'] != null ? config['pending'] : 'pending',

View File

@ -0,0 +1,11 @@
import { restPostFile } from '@/rest/restConsumer.js'
/**
* Upload a file to the server and return the url of this image
*/
export async function uploadProfilePicture(file){
const formData = new FormData();
formData.append("file", file[0]);
return restPostFile("/upload/ProfilePicture", formData)
}