Problem encountered when attempting to send an array of files in two dimensions

Question

Problem encountered when attempting to send an array of files in two dimensions

When I send multiple files using formData, it's structured like this:

https://i.sstatic.net/BjePq.png

Within my Spring MVC Controller:

@PostMapping(value = "/marches")
public Integer saveMarches(
        @RequestPart("formJson") FooBean formJson, 
        @RequestPart("attachOs") MultipartFile[][] attachOs
        ) throws IOException {
    ...
}

My configuration is:

@Bean(name = "multipartResolver")
public CommonsMultipartResolver multipartResolver() {
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
    multipartResolver.setMaxUploadSize(30000000);
    return multipartResolver;
}

However, I encountered a 400 Bad Request error in the browser:

https://i.sstatic.net/18p0n.png

And in my IDE, I received the following error message:

Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException:
Required request part 'attachOs' is not present]

When I tried using

@RequestPart("attachOs[][]") MultipartFile[][] attachOs

, I still received a bad request error with

Required request part 'attachOs[][]' is not present

The problem is clear: Spring is only looking for the attachOs part (@RequestPart("attachOs")), but I am sending attachOs[0][0], attachOs[0][1], and so on.

When I send just the formJson part without files, or if I send a single file using

@RequestPart("attachOs") MultipartFile attachOs

or an array of files using

@RequestPart("attachOs") MultipartFile[] attachOs

, everything works correctly.

Here is the JavaScript code I am using:

const formData = new FormData();

for (const [i, os] of formJson.os.entries()) {
    if(os.attachment) {
        for (const [j, file] of [...os.attachment].entries()) {
            formData.append(`attachOs[${i}][${j}]`, file );
        }
    }
}
...
formData.append('formJson', 
           new Blob([JSON.stringify(formJson)], {type:'application/json'}));
...
axios({
    url: ...,
    method: 'POST',
    data: formData,
})
...

The structure of my formJson is as follows:

{
    // form fields
    ...
    os: [
        {
            // os form fields
            ...
            attachment: [{ /* File type */ }, ...], // multiple files per os
        },
        ...
    ]
}

I am aware that files cannot be sent along with JSON, which is why I construct the formData as shown above, and then remove the attachment property from the JSON structure.

So, my questions are:

1. How can I resolve the bad request issue?

2. Is there an alternative approach or design pattern to handle this use case?

javascript java spring spring-mvc

Answer 1

Answer №1

To enable the sending of multiple file attachments per operating system (OS), consider using a List rather than a 2-dimensional array in the spring controller.

@PostMapping(value = "/marches")
public Integer saveMarches(
        @RequestPart("formJson") FooBean formJson, 
        @RequestPart("attachOs") List<MultipartFile> files
        ) throws IOException {

    // Link files to their respective OS by utilizing the index in their name.
}

In your Angular script, remember to include the OS index in the file name.

for (const [i, os] of formJson.os.entries()) {
    if (os.attachment) {
        for (const [j, file] of [...os.attachment].entries()) {
            formData.append(`attachOs`, file, file.name + ":" + i );
        }
    }
}

Answer 2

To enable the sending of multiple file attachments per operating system (OS), consider using a List rather than a 2-dimensional array in the spring controller.

@PostMapping(value = "/marches")
public Integer saveMarches(
        @RequestPart("formJson") FooBean formJson, 
        @RequestPart("attachOs") List<MultipartFile> files
        ) throws IOException {

    // Link files to their respective OS by utilizing the index in their name.
}

In your Angular script, remember to include the OS index in the file name.

for (const [i, os] of formJson.os.entries()) {
    if (os.attachment) {
        for (const [j, file] of [...os.attachment].entries()) {
            formData.append(`attachOs`, file, file.name + ":" + i );
        }
    }
}

Answer 3

Answer №2

After doing some research, I was able to find a resolution by employing a @ModelAttribute (source: here);

To begin, establish a model class as shown below;

public class MyRequest {
    private FooBean formJson;
    private MultipartFile[][] attachOs = new MultipartFile[2][2];

    // getters/setters
}

Next, integrate this model class into your controller like this;

@PostMapping(value = "/marches", consumes = "multipart/form-data")
public Integer saveMarches(@ModelAttribute MyRequest request) throws IOException {
    // code goes here
}

The crucial step was initializing the MultipartFile[][] attachOs, as without it, working with multidimensional arrays can lead to internal initialization issues.

Alternatively, you can utilize the following type within the model class;

private List<MultipartFile>[] attachOs;

This method functions without requiring explicit initialization.

Answer 4

After doing some research, I was able to find a resolution by employing a @ModelAttribute (source: here);

To begin, establish a model class as shown below;

public class MyRequest {
    private FooBean formJson;
    private MultipartFile[][] attachOs = new MultipartFile[2][2];

    // getters/setters
}

Next, integrate this model class into your controller like this;

@PostMapping(value = "/marches", consumes = "multipart/form-data")
public Integer saveMarches(@ModelAttribute MyRequest request) throws IOException {
    // code goes here
}

The crucial step was initializing the MultipartFile[][] attachOs, as without it, working with multidimensional arrays can lead to internal initialization issues.

Alternatively, you can utilize the following type within the model class;

private List<MultipartFile>[] attachOs;

This method functions without requiring explicit initialization.

Answer 5

Answer №3

Spring now has the capability to bind multipart and part files using multivalue maps and single value maps, as documented in SPR-17405

By adding Map<String, MultipartFile>, you can easily map multipart values to keys.

To reference these values, you can use syntax like attachOs[0][0], attachs[0][1]

@PostMapping(value = "/marches")
public Integer saveMarches(
        @RequestPart("formJson") FooBean formJson, 
        @RequestParam Map<String, MultipartFile> attachOs
        ) throws IOException {
    ...
}

Alternatively, if you want to send multiple multipart values per row, you can utilize

MultiValueMap<String, MultipartFile>

. Just remember to update your Angular code accordingly.

For this variation, you can reference values like attachOs[0], attachs[1]

 @PostMapping(value = "/marches")
    public Integer saveMarches(
            @RequestPart("formJson") FooBean formJson, 
            @RequestParam MultiValueMap<String, MultipartFile> attachOs
            ) throws IOException {
        ...
    }

If you opt for the second variant, you can assign a unique name to each multipart value and append the files accordingly. There is no need to treat it like an array. By using data.append multiple times with the same name, the files will be added as an array automatically.

for (const [i, os] of formJson.os.entries()) {
    if(os.attachment) {
        for (const [j, file] of [...os.attachment].entries()) {
            formData.append(os.name, file);
        }
    }
}

Answer 6

Spring now has the capability to bind multipart and part files using multivalue maps and single value maps, as documented in SPR-17405

By adding Map<String, MultipartFile>, you can easily map multipart values to keys.

To reference these values, you can use syntax like attachOs[0][0], attachs[0][1]

@PostMapping(value = "/marches")
public Integer saveMarches(
        @RequestPart("formJson") FooBean formJson, 
        @RequestParam Map<String, MultipartFile> attachOs
        ) throws IOException {
    ...
}

Alternatively, if you want to send multiple multipart values per row, you can utilize

MultiValueMap<String, MultipartFile>

. Just remember to update your Angular code accordingly.

For this variation, you can reference values like attachOs[0], attachs[1]

 @PostMapping(value = "/marches")
    public Integer saveMarches(
            @RequestPart("formJson") FooBean formJson, 
            @RequestParam MultiValueMap<String, MultipartFile> attachOs
            ) throws IOException {
        ...
    }

If you opt for the second variant, you can assign a unique name to each multipart value and append the files accordingly. There is no need to treat it like an array. By using data.append multiple times with the same name, the files will be added as an array automatically.

for (const [i, os] of formJson.os.entries()) {
    if(os.attachment) {
        for (const [j, file] of [...os.attachment].entries()) {
            formData.append(os.name, file);
        }
    }
}

Answer 7

Answer №4

In order to handle custom conversions, a new @Component called custom converter must be created to implement the HttpMessageConverter interface.

Answer 8

In order to handle custom conversions, a new @Component called custom converter must be created to implement the HttpMessageConverter interface.

Problem encountered when attempting to send an array of files in two dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing a configuration file into a client-side web application using asynchronous methods

Reducer is unaware of my current state within react redux

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

There was an error during compilation: Module not detected - Unable to locate './xxxx'

Unable to retrieve the value of a textbox located within a gridview

Getting the Value from a Promise into a Variable in a React Component

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json

Exploring the Differences Between Arrays of Objects and Arrays in JavaScript

After successfully building with Vite, an error occurs stating "TypeError: can't convert undefined to object." However, during development with Vite, everything functions flawlessly

Connect data dynamically to the p-table based on columns

Exploring additional parameters with JAX-RS and Jackson integration

No user was located using Mongoose.findOne()

Exploring the `React.createRef` method using Enzyme for testing purposes

Ways to designate a tab as active

Javascript does not have the capability to parse JSON

Uncheck the box for disabling the bottom row of HTML tables

Issue with Vue plugin syntax causing component not to load

Executing a conditional onClick function when the page loads

How to Use JQuery to Display Elements with a Vague Name?

"Step-by-step guide to building a webgrid or table to organize and display your