Uploading an excel file

Hilla
1

Does anyone have any experience uploading files in Hilla? I can’t seem to get it working using the vaadin-upload component. I’m not getting any errrors or something, it’s just difficult for me to know what to do, since there isn’t any documentation on the matter as far as I know

2 
render() {
        return html`
        <div class="content items-center flex flex-col w-full h-full">
            <h2> Upload hier de prijslijst </h2>
            <vaadin-upload target="/upload-prijslijst" @upload-success="${uploadFileViewStore.uploadFile}"></vaadin-upload>
        </div>
        `;
    }
3

my main question would be: how do i find the uploaded file

4 
async uploadFile() {
        var fetchedData = await fetch('/upload-prijslijst');
        console.log(fetchedData)
    }
5

console.log yields this:

6

image.png

7

https://cookbook.vaadin.com/client-side-upload

8

you’re a lifesaver!!

9

well should test that before i rejoice, but looks fine to me

10

thanks :slightly_smiling_face:

11

don’t know why i couldn’t find that by doing research

12

tbh never even found that site when doing hilla research

13

Good point :grinning: ping @secure-leopard as our Hilla ambassador

14

thanks for the help man!

15

@resilient-meerkat has been reworking the Hilla docs in preparation for React support. One of the things we noticed is missing there is handing uploads - we should definitely add that

16 

    @PostMapping("/upload-prijslijst")
    public void handleFileUpload(@RequestParam("file") MultipartFile uploadedFile) {
        File file = new File(System.getProperty("user.dir") + "/uploadedFile");
        System.out.println("FILE DEBUG");
        try {
            uploadedFile.transferTo(file); 
            XSSFWorkbook xssfWorkbook = new XSSFWorkbook(file);
            XSSFSheet toogsheet = xssfWorkbook.getSheet("DVF Toog");
            parseRows(toogsheet);
        } catch (Exception e) {
            // Shouldn't happen: restricted file type in upload
        } 
    }
17

i did wat you showed me, but now i’m still kinda stuck

18

the function works and does what it’s supposed to, but now i’m wondering how i add the parsed data to my database

19

as far as i understand it, i simply can’t call my endpoints from a different klass?

20

image.png