Uploading Photos & Videos

VCE comes with built-in functionality to allow developers to write features such as uploading images and videos.

Uploading media files is done by using VCE's Struts actions. An example Struts configuration for uploading images follows:

<form-bean name="uploadForm" type="com.ndc.usercontent.struts.actions.forms.UploadForm" />

<action path="/photo/upload"
        name="uploadForm"
        scope="request"
        parameter="articleType=photo"
        type="com.ndc.usercontent.struts.actions.upload.MediaContentUpload">
        <forward name="error" path="/" />
</action>

An example JSP template that uploads the image can be as follows:

<community:user id="user"/>
<html:form enctype="multipart/form-data" action="/photo/upload" method="post">
  <html:hidden property="homeSectionId" value="${user.section.id}"/>

  <html:hidden property="errorUrl" value="/upload-images.jsp"/>
  <html:hidden property="state" value="published"/>
  <%--
    <html:hidden property="articleType" value="photo"/>
  --%>
  <label>Select photo</label>
  <html:file property="file" />

  <label>Caption</label>
  <html:text property="field(caption)" />
  <label>Description</label>
  <html:textarea property="field(description)">&nbsp;</html:textarea>
  <html:submit value="Upload"/>
</html:form>

Note the form encoding type enctype="multipart/form-data". This specifies that the form will upload the data in a multi part format. This must be specified in the example JSP since this is not the default behaviour.

Form propertyDescription

articleType

In our example, the articleType property is commented out. This means that the value of the property is retrieved from the value of the parameter attribute configured in the declared action. If the parameter does not contain this declaration, the action will try resolve the content type by using the value specified in the articleType form property. If none are present, the system will throw an exception.

state

The state of the image to be created. If the property is not present, the state will be draft. We strongly recommend developers to explicitly specify the state since the default may change in future releases of VCE.

file

The property is the actual image data and the reason why the form encoding needs to be set to enctype="multipart/form-data".

field(field-name)

These are the image content type fields that you will probably want the user to fill in. Note that the fields are configured through the content type publication resource. In the demo web application, the configured fields are caption and description.

homeSectionId

The home section of the image to be created. On an VCE site, it is usually set to the ID of the home section of the requesting user

publicationId

If this property is present, the image is created in the publication identified by the ID. If the property is not present, the image is created in the publication of the requesting user.

successUrl

Our example does not contain this form property. If it is present, the user is directed to the specified URL after the image is uploaded successfully. If the property is not present in the form (which is the case of our example), then the user is directed to the URL of the newly uploaded image.

errorUrl

If this property is present, the user is directed to the URL using the value of the property if an error occurs while trying to upload the image. If the form property is not present, then the user is directed to the URL configured in the action through the forward named error.

Note that the error messages are bound to the property named error. They can be displayed using:

<html:messages id="message" message="true" property="error">
  error-message: <%=message%><br/>
</html:messages>

The message keys of the error messages saved by the upload action in the request scope are as follows: upload.error.filesize and upload.error.filenotsupported.

The video upload feature works the same way as the image upload. The same Struts action can be used with the name of the video content type. An example struts configuration follows:

<form-bean name="uploadForm" type="com.ndc.usercontent.struts.actions.forms.UploadForm" />

<action path="/video/upload"
        name="uploadForm"
        scope="request"
        parameter="articleType=video"
        type="com.ndc.usercontent.struts.actions.upload.MediaContentUpload">
  <!--
    Required by the action since it will fail if neither a successUrl is defined
    in the form, nor a success forward is declared in the action declaration
  -->
  <forward name="success" path="/"/>
</action>

Note the value of the parameter attribute. It restricts the action into creating only content type of video. An example JSP template that allows a user to upload the video follows:

<html:form enctype="multipart/form-data" styleId="ImageUpload" action="/video/upload" method="post">
  <div>
    <html:hidden property="homeSectionId" value="${section.id}"/>
    <%--
      We don't need to specify successUrl since if no url is defined, the user will be redirected to
      the URL of the newly created resource.
    --%>
    <html:hidden property="errorUrl" value="${section.url}?view=uploadVideo"/>
    <html:hidden property="state" value="published"/>

    <label>Select Video</label>
    <html:file property="file" styleId="file"/>

    <label for="field-title">Title</label>
    <html:text property="field(title)" styleId="field-title"/>
    <label for="field-description">Description</label>
    <html:textarea property="field(description)" styleId="field-description"></html:textarea>
    <p/>
    <html:submit styleId="uploadButton" value="Upload Video"/>
  </div>
</html:form>        

The form properties are the same as in the image upload form. Please note that, the same form bean of type com.ndc.usercontent.struts.actions.forms.UploadForm is used to upload videos.