Upload Handling

Your application may have forms with which visitors can upload images. For example, the State Department has an Upload Photo page for submitting a photograph when applying for passports.

In HTML development, uploading a file requires a form on the client with an attribute enctype="multipart/form-data", and the form itself contains an element <input type="file">.

In the following example, you implement a frontend form and backend class that uploads an image and saves it using the default storage configuration defined in context.xml. The upload method from the browser is post.

Step 1: Implement HTML Form

Implement an HTML form in a Handlebars template.

1
2
3
4
5
6
7
<h2>Upload File</h2>

<form enctype="multipart/form-data" method="post" action="/upload-servlet">
    <p><input type="file" name="file" /></p>
    <p><input type="text" name="description" /></p>
    <p><input type="submit" /></p>
</form>

In the previous snippet—

  • Line 3 provides the upload method (post) and specifies the backend servlet processing the uploaded form (upload-servlet).
  • Line 4 provides the name attribute for the file in the uploaded form.

You’ll use both of these attributes when implementing the upload servlet.

../../_images/upload-form.png

Step 2: Implement Upload Servlet

Implement a servlet that accepts the uploaded form and saves the image to storage.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package upload.processors;

import com.psddev.dari.util.ObjectUtils;
import com.psddev.dari.util.StorageItem;
import com.psddev.dari.util.StorageItemFilter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/upload-servlet")
public class UploadServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StorageItem storageItem =  StorageItemFilter.getParameter(request,"file", null);
        storageItem.save();

        Map<String, Object> properties = new HashMap<String, Object>();
        properties.put("path", storageItem.getPath());
        properties.put("storageName", storageItem.getStorage());

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(ObjectUtils.toJson(properties));
        out.flush();
    }
}

In the previous snippet—

  • Line 17 associates the servlet with the action specified in the upload form from Step 1.
  • Lines 20–33 override the doPost method. We use this method because the upload form specifies method=post.
    • Line 22 extracts the file from the form data using the value specified in the upload form name=name. The last parameter null indicates Brightspot uses the default storage item configuration appearing in the Tomcat context.xml file. For information about configuring storage items, see Configuring StorageItem.
    • Line 23 saves the extracted file onto the location specified in the default storage item configuration.
    • Lines 25–27 build a map of key-value pairs describing the file’s storage characteristics. For additional methods available for examining the uploaded file, see Interface StorageItem.
    • Lines 29–32 build a JSON object from the map and return it to the client.
{
      "path": "33/c7/f340bec94c21b7e88687c4f78fa4/dragon-slayer.jpg",
      "storageName": "tutorial.local"
}

StorageItemFilter provides useful methods for extracting uploaded files from an uploaded form. For details, see Class StorageItemFilter.

See also:

Creating StorageItems

Configuring StorageItem