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

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.
Saves the extracted file onto the location specified in the default storage item configuration.
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