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)"> </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 property | Description |
---|---|
|
In our example, the |
|
The state of the image to be created. If the property is not present, the state will be
|
|
The property is the actual image data and the reason why the form encoding needs to be set to
|
|
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. |
|
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 |
|
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. |
|
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. |
|
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
Note that the error messages are bound to the property named <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:
|
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.