Assistance with Setting the FormData using the FileUpload Component

[kitrin]

Hi everyone,

I'm trying to get the FileUpload PrimeVue component working using the Avalon theme. It's almost working, except that I'm struggling to set the FormData and pass in my parameters to the Rest call. Any help will be really appreciated...

I can currently see two ways of solving my current issue of passing parameters to the Rest call:
1. In it's current form, find a way of generating the value for "url" based on the current userId that is applicable on the page.
2. Change the Rest call to exclude the userId so that the "url" portion is standard, but pass userId as a parameter (like file is currently being passed)

In the documentation (https://www.primefaces.org/primevue/#/fileupload), the setting of the form data is referenced as below, but as with the setRequestHeader, I can't seem to find any way of setting the FormData.

"XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters."

--
Copy of <template> section code...
<FileUpload mode="basic" name="file" url="/api/isounpaid/1/upload" accept="application/vnd.ms-excel" :maxFileSize="10000000" @upload="onUpload" @before-send="beforeUpload" :auto="true" chooseLabel="Upload" />

Copy of <script> section code...
onUpload() {
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
},
beforeUpload(request) {
console.log(request);
let user = JSON.parse(localStorage.getItem('user'));
request.xhr.setRequestHeader('Authorization', 'Bearer ' + user.accessToken);
return request;
},


Copy of Rest Call definition (in Spring Boot)...
@PostMapping("/api/isounpaid/{userId}/upload")
public ResponseEntity<ResponseMessage> processFileUpload(@PathVariable("userId") Long userId,
@RequestParam("file") MultipartFile file) throws ParseException {

Thanks.

[kitrin]

Hi everyone,

I managed to solve this using option 1 shortly after doing this post. This is the code if it helps.

--
Copy of <template> section code...
<FileUpload mode="basic" name="file" :url='url' accept="application/vnd.ms-excel" :maxFileSize="10000000" @upload="onUpload" @before-send="beforeUpload" :auto="true" chooseLabel="Upload" />

Copy of <script> section code...
export default {
data() {
return {
url: "",
}
},
mounted() {
if (!this.currentUser) {
this.$router.push('/login');
}

this.url = "/api/isounpaid/" + (this.currentUser.id).toString() + "/upload";
},
methods: {
onUpload() {
this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
},
beforeUpload(request) {
console.log(request);
let user = JSON.parse(localStorage.getItem('user'));
request.xhr.setRequestHeader('Authorization', 'Bearer ' + user.accessToken);
return request;
},
}

[tugce.kucukoglu]

Thanks for the feedback.