Learn Servlet-JSP By Building A Social Network Website — Part XI

Learn how to handle upload file by implementing update user’s avatar feature

Task 16: Upload User Avatar

In this task, you are going to learn how to handle file uploading by building the feature allowing users to change their profile picture.

Step 1:

In order to be able to upload a file in general, we need two things:

• An <input> type of file so that users can select a file from their computers.
• The <input type=”file”> needs to be enclosed in <form> tag with the attribute enctype=”multipart/form-data”

So, in the profile.jsp file, locate the <span> tag with the attribute id=”profile-button-add-cover”, then update the <span> tag as the following:

Pay attention that we have configured the <form> tag with:

• action = “upload-image”: the value “upload-image” is the URL pattern of the controller that will handle the uploading process, which we are going to create very soon in this task.
• enctype=”multipart/form-data”: this attribute allows the entire file will be included in the form data to be sent to the server-side.

If you run your web application now, you won’t see any difference in the user interface:

That is because the “Add Cover Photo” has been masked with the CSS class “input-cover-photo”. If you are interested in how this can be done, you can view the CSS class in the main.css in the CSS folder.

And if you click on the “Add Cover Photo” button, a file dialog will be popped up and you will be able to select a file.

Step 2:

Since we do not have a submit button, we need to trigger the event when users select a file from their computers. This means when users select a file, we will need to submit the form of id “frmUploadPhoto” containing the selected file to the server without any further interaction from the user.

Also in the profile.jsp file, scroll down to the <script> tags and add the following jQuery code to submit the form:

The “userCoverPhoto” is the id’s value of the file input. The change() function is the event handler triggered when the value of the file input has changed, which means when the user had selected a file. And if that the case, we invoke the submit() function of the <form id = “frmUploadPhoto”> to make a submission.

Now let’s handle the receiving file code in the server.

Step 3:

In the net.learnbyproject.service.UserService class, create a new method called updateUserAvatar() so that we can save the user’s image in the database:

Since the column to store the image is a type of Blob, we need to invoke the setBlob() method of the PreparedStatement interface so that the user image can be saved. User image data is represented by an instance of the InputStream class.

Step 4:

Now we need to create a new controller to receive uploading file requests and then save the file content in the database using the service method.

In the package net.learnbyproject.controller, create a new servlet called UploadImageController with the URL pattern as “upload-image”; and with the implementation, as follows:

We use the @MultipartConfig annotation with the attribute maxFileSize to limit the file size sent from the client. The specified value is in byte numbers, which in our case is equivalent to 16 MB.

To receive data in a form with a multipart/form-data POST request, which is a file’s content, we need to utilize the javax.servlet.http.Part interface in Servlet 3.0:

Part filePart = request.getPart(“userCoverPhoto”);

From the Part interface, we can extract quite a lot of information from the form attached file such as file content, file size, file name, and so on.

In our case, since we don’t save the file content as a file in the server, rather, we store the file content in the database, the following code is sufficient:

inputStream = filePart.getInputStream();

And then, the next action is to save the received content in the database:

Also note that once the file data has been saved successfully, we would need to reload the user data and update the session object. Otherwise, users will see the old image.

The final action is to send a redirect to the profile page so that the user can see right away from their just uploaded image:

response.sendRedirect(“profile”);

That should be all for handling the upload of the user image.

Clean and build your project. Then, run to see if your application work.

Check out the complete source code if you get stuck:

https://github.com/stackera/learn-servlet-jsp/blob/main/Task16_Upload_avatar.zip

>> Read Part XII