Let's add an image upload facility in our add products page:

Spring's CommonsMultipartResolver (org.springframework.web.multipart.commons.CommonsMultipartResolver) class is the thing that determines whether the given request contains multipart content and parses the given HTTP request into multipart files and parameters. That's the reason we created a bean for that class within our web application context in step 1. And, through the setMaxUploadSize property, we set a maximum of 10,240,000 bytes as the allowed file size to be uploaded:

@Bean 
public CommonsMultipartResolver multipartResolver() { 
    CommonsMultipartResolver resolver=new CommonsMultipartResolver(); 
    resolver.setDefaultEncoding("utf-8"); 
    resolver.setMaxUploadSize(10240000); 
    return resolver; 
} 

From steps 2 to 5, we added some of the org.apache.commons libraries as our Maven dependencies. This is because Spring uses those libraries internally to support the file uploading feature.

Since the image that we were uploading belongs to a product, it is better to keep that image as part of the product information; that's why in step 6 we added a reference to the MultipartFile in our domain class (Product.java) and added corresponding setters and getters. This MultipartFile reference holds the actual product image file that we are uploading.

We want to incorporate the image uploading facility in our add products page; that's why, in the addProduct.jsp View file, we added a file input tag to choose the desired image:

<div class="form-group"> 
<label class="control-label col-lg-2" for="productImage"> <spring:message code="addProduct.form.productImage.label"/> 
</label> 
   <div class="col-lg-10"> 
      <form:input id="productImage" path="productImage" type="file" class="form:input-large" /> 
   </div> 
</div> 

In the preceding set of tags, the important one is the <form:input> tag, which has the type attribute as file so that it can make the Choose File button display the file chooser window. As usual, we want this form field to be bound with the domain object field; that's the reason we gave the path attribute as productImage. If you remember, this path name is just the same MultipartFile reference name that we added in step 6.

As usual, we want to externalize the label message for this file input tag as well; that's why we added <spring:message>, and in step 8 we added the corresponding message entry in the message source file (messages.properties).

Since our add product form is now capable of sending an image file as well as part of the request, we need to encode the request as a multipart request. This is why in step 9 we added the enctype attribute to the <form:form> tag and set its value as multipart/form-data. The enctype attribute indicates how the form data should be encoded when submitting it to the server.

We wanted to save the image file in the server under the resources/images directory, as this directory structure will be available directly under the root directory of our web application at runtime. So, in order to get the root directory of our web application, we need HttpServletRequest. See the following code snippet:

String rootDirectory = request.getSession().getServletContext().getRealPath("/"); 

That's the reason we added an extra method parameter called request of the type HttpServletRequest to our processAddNewProductForm method in step 10. Remember, Spring will fill this request parameter with the actual HTTP request.

In step 11, we simply read the image file from the domain object and wrote it into a new file with the product ID as the name:

MultipartFile productImage = newProduct.getProductImage(); 
String rootDirectory = request.getSession().getServletContext().getRealPath("/"); 
       
   if (!productImage.isEmpty()) { 
       try { 
         productImage.transferTo(new File(rootDirectory+"resources\images"+newProduct.getProductId() + ".png")); 
       } catch (Exception e) { 
      throw new RuntimeException("Product Image saving failed", e); 
   } 
   } 

Remember, we purposely saved the images with the product ID name because we have already designed our products (products.jsp) page and details (product.jsp) page accordingly to show the right image based on the product ID.

And as a final step, we added the newly introduced productImage file to the whitelisting set in the binder configuration within the initialiseBinder method.

Now if you run your application and enter http://localhost:8080/webstore/market/products/add, you will be able to see your add products page with an extra input field to choose the file to upload.

It's nice that we were able to upload the product image to the server while adding a new product. Why don't you extend this facility to upload a PDF file to the server? For example, consider that every product has a user manual and you want to upload these user manuals while adding a product.

Here are some of the things you can do to upload PDF files:

So finally, if the newly added product ID is P1237, you will be able to access the PDF under http://localhost:8080/webstore/pdf/P1237.pdf.

Good luck!