Upload using WebForms
In some cases, external users may need to upload images. For this purpose, we have the SharinPix WebForm component, which sets upload contraints to an album.
SharinPix WebForm Implementation
To implement the WebForm, you need to create a Visualforce Page that will encapsulate the SharinPix WebForm component as demonstrated in the code snippet below:
<apex:page>
<sharinpix:WebForm constraints="{ 'min_files': 3, 'file_extensions': ['jpg', 'png'] }"
targetAlbumId="{! CASESAFEID($currentPage.parameters.Id) }"
permissionId="a0AR000000JQIFdMAP"
submitButtonLabel="Submit Album"
height="400px"/>
</apex:page>The WebForm component is included in the SharinPix package and consists of the following attributes:
-
constraints: The restrictions that are set on the WebForm album prior to submission. The constraints are written in a JSON format. Available constraints are:
- min_files : Minimum amount of files which need to be uploaded to the album.
- file_extensions: Accepted file formats.
- targetAlbumId: This attribute refers to the ID of the targeted album. Here, the target album ID refers to the current record ID.
- permissionId: The ID of the SharinPix Permission which defines the WebForm album abilities. In the above example, the permission ID is a0AR000000JQIFdMAP.
- submitButtonLabel: The label to be displayed on the submit button in the component. The default value is 'Submit'.
- height: The height of the component. The default value is 500px.
Tip:
The SharinPix WebForm component triggers an event named, album-validated, upon successful submission of images. This event can be captured and used to perform several actions such as the display of successful messages or to refresh the component.
The code snippet below, demonstrates how the album-validated event can be used to refresh the WebForm component upon successful image submission:
<apex:page >
<apex:form >
<apex:outputPanel id="panelID">
<sharinpix:WebForm constraints="{ 'min_files': 3, 'file_extensions': ['jpg', 'png'] }"
targetAlbumId="{! CASESAFEID($currentPage.parameters.Id) }"
permissionId="a0AR000000JQIFdMAP"
submitButtonLabel="Submit Album"
height="400px"/>
</apex:outputPanel>
<apex:actionFunction name="rerenderPanel" rerender="panelID" />
<script>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
if (e.origin !== "https://app.sharinpix.com") return;
if (e.data.name == "album-validated") {
rerenderPanel();
}
}, false);
</script>
</apex:form>
</apex:page>- If the files uploaded to the album do not match the constraints provided to the WebForm, appropriate error messages will be displayed. For example, if less than 3 images are uploaded to the album and submission is attempted, the following will be popup will appear.
- After uploading a minimum of 3 images, the submit button will turn green and submission will be allowed. The submitted images will be transfered to the target album.
0 Comments
Add your comment