Upload file from react using Axios to API CXF 2.5 java

Question

I'm trying to upload a file along some data from a form in react to a server CXF java.

In the react code, i use FormData, a simple axios.post with multipart/form-data headers. In java i tell the webservice to consumme multipart/form-data.

for the text values i want to add to the formData i use the class Blob so that everything is the same, file and text values.

In the webservice java i have as param a MultivaluedMap<String, String> and with only text values, i have my data. If i add the file in the axios post request, i have an error 500 and the server doesnt event log anything, it crashes i think in the mapping with the MultivaluedMap<String, String>.

I've tried then to use MultivaluedMap<Object, Object> but the problem was the same.

If i use only String as param as expected, i only have the first entry in the data from axios post request and it's the value only not the key.

I wonder if i do something bad on react side but i'm not familiar with CXF so maybe it's my approch on the java side that is bad.

    @POST
    @Consumes("multipart/form-data")
    public void createInfoCollection(MultivaluedMap<Object, Object> formData) {
        
        try {
            System.out.println("json incoming");
            System.out.println(formData);   
        } catch(Exception e) {
            System.out.println("Exception = " + e);
        }
    }

on react the code is simple and goes as :

        const formData = new FormData();

        if (this.state.selectedFile) {
            // Update the formData object 
            formData.append(
                "selectedFile",
                this.state.selectedFile,
                this.state.selectedFile.name
            );
        }

        Object.keys(this.state).map(key => {
            if (key != 'selectedFile') {
                let value = this.state[key];
                const json = JSON.stringify(value);
                const blob = new Blob([json], {
                    type: 'application/json'
                });
                formData.append(key, blob, key);
                // formData.append(key, this.state[key]);
            }
        });

        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        }
        axios.post("My/Url/That/Works/Well/With/GetRequests", formData, config)
            .catch(error => {
                console.log(error);
            });

Thank you

EDIT i found out about MultipartBody on the java side but i'm still learning how to use this yet

ul.Duc · Accepted Answer · 2020-07-08 12:58:02Z

0

Ok i found a solution using MultipartBody formDat

in this object there are headers Content-Disposition that has a property names name and a property filename if the Content-Type is application/octet-stream.

If there are other data next to a file it doesnt have any content-type but the way to get the name is the same with the property name after parsing the Content-Disposition.

Then there are Attachments on the MultipartBody and with attachment.getDataHandler().getInputStream() i have the content of the file and also the basic values of other data if there are any.

with a match between headers and attachments, i'm guessing i can do whatever i need to do.

Thank you for giving me new inspiration StackOverFlow !

answered Jul 8, 2020 at 12:58

ul.Duc

416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload file from react using Axios to API CXF 2.5 java

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related