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 front-end form and back-end 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 template.

HTML form for uploading a file:

<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>

Provides the upload method (post) and specifies the back-end servlet processing the uploaded form (upload-servlet).
Provides the name attribute for the file in the uploaded form.

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

Step 2: Implement upload servlet

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

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;

@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); 

        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();
    }
}

Associates the servlet with the action specified in "HTML form for uploading a file."
Overrides the doPost method. We use this method because the upload form in "HTML form for uploading a file" specifies method=post.
Extracts the file from the form data using the value specified in the upload form name=file. 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.
Builds a map of key-value pairs describing the file’s storage characteristics. For additional methods available for examining the uploaded file, see Interface StorageItem.
Builds a JSON object from the map and returns 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:

Previous Topic

Creating StorageItems

Next Topic

StorageItem life cycle