·¬ÇÑÉçÇø

Brightspot CMS Developer Guide

Upload handling


Your application may have forms with which visitors can upload images. For example, the State Department has an 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.

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

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.

•
•
•
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
• Modules
• Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

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

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

• Google Analytics
• Shopify
• Apple News