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 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.
  • 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.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News