Brightspot CMS Developer Guide

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

Upload file and caption.png

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;

public class UploadServlet extends HttpServlet {

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

        PrintWriter out = response.getWriter();
  • 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
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Landing pages
Everything you need to manage and administer content within Brightspot CMS, including plug-and-play integrations.

Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform, including integrations requiring developer support to use.

Field types
Content modeling
Rich-text elements