Using Multipart Form Data with Spring Boot
One of Classkick’s most useful features is the ability for teachers and students to add their own media to the canvas. In launching Classkick for web, our challenge was uploading that media from our client to our Spring Boot server. Since we planned to handle both audio and image data, using multipart form data was an obvious choice.
Background
Multipart form data was introduced to solve the problem of an http form that includes a file. This is what multipart form data looks like when it goes over the wire (emphasis mine):
POST <some endpoint> HTTP/1.1
Host: <some host>
Authorization: <some token>
Cache-Control: no-cache
Content-Type: multipart/form-data; boundary=------WebKitFormBoundary7MA4YWxkTrZu0gW------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name=”file”; filename=”classkick_image.png”Content-Type: application/octet-stream?PNGIHD?wS??iCCPICC Profilex?T?kA?6n??Zk?x?”IY?hE?6?bkY?<)??????9Nyx?+=?Y”|@5-?M?S?%?@?H8??qR>???inf???O?????b??N?????~N??>?!???V?J?p?8?da?sZHO?Ln?}&???wVQ?y?g????E??0??IDAc????????-IEND?B`?------WebKitFormBoundary7MA4YWxkTrZu0gWContent-Disposition: form-data; name=”owner_id”some_owner_id_1------WebKitFormBoundary7MA4YWxkTrZu0gWContent-Disposition: form-data; name=”name”some_file_name------WebKitFormBoundary7MA4YWxkTrZu0gW--
In multipart form data, each part contains a content disposition header as well as the name of the original field in the form. For example:
Content-Disposition: form-data; name=”file”; filename=”classkick_image.png”The other important component of the multipart form is a boundary. It’s important that you choose a boundary that does not occur in any of the gobbledygook in the file that’s sent along. They usually look like this:
------WebKitFormBoundary7MA4YWxkTrZu0gWHow to Use Multipart Form Data With Spring Boot
To get these working with the server, we define a controller with an upload endpoint that will accept multipart form data. When a Spring Boot controller endpoint is hit, Spring Boot finds the appropriate HttpMessageConverter and uses it to convert the incoming request. This means that even if we’re using JSON elsewhere, we can define a multipart form data endpoint without having to manually change our HttpMessageConverters.
We can access our multipart file using @RequestParam. If the multipart form has other params, we can access those params in the same way:
/* Scala */@RequestMapping(value = Array(“/{id}”), method = Array(RequestMethod.POST))
def upload(
@PathVariable(“id”) id: String,
@RequestHeader(“Authorization”) authHeader: String,
@RequestParam(“file”) multipartFile: MultipartFile,
@RequestParam(“owner_id”) ownerId: String,
@RequestParam(“name”) name: String
) = {
/* Some neat uploading goes on here */}
Once we‘ve made our endpoint that expects multipart form data, the next step is to ensure that Spring Boot can read multipart form data. To do that, we use Spring’s built-in MultipartFile. We configure the max-file-size and max-request-size as well as the location of where Spring Boot should write the file in application.properties:
multipart.maxFileSize: 10MB
multipart.maxRequestSize: 10MBThat’s it! Now students using app.classkick.com and the iPad app can use this endpoint to upload images and audio in their Classkick assignments. Check out these how-to videos below to see it in action.
Interested in building something meaningful for teachers and students? Find me on Twitter at @cwshevlin or email us at jobs@classkick.com.
