AEM Assets Touch UI Customizations Part 1

AEM Assets Touch UI Customization – Part 1

AEM Assets helps you create, manage, and deliver images, video, and other content to any screen or device. It provides a robust touch UI with responsive design for the author environment. You can customize the user interface to help you manage your assets better and run workflows more efficiently.

This is the first of a series of exercises to make custom changes to the AEM Assets user interface and its workflows to suit your business needs.

Applying MIME-type restrictions during asset upload

To add to your digital asset portfolio or stock image selection in AEM Assets, you can let users upload various types of assets (images, PDF files, RAW files, and so on). However, as an administrator, you may want to control the type of files users can upload. For example, you may want to restrict users from uploading video files to ensure that they only upload images to AEM Assets.

Alternatively, you may want to prevent the upload of images in a particular format because you no longer want to renew the license for the software required to edit such files types. You can also restrict users from uploading scanned images in PDF format to eliminate chances of malware being attached to these files.

This exercise helps you understand how you can easily impose MIME-type restrictions to the upload of assets to AEM Assets 6.1 by making small configuration changes to the corresponding content node within the CRX repository.

Important: To ensure that you do not lose your changes, press Save after you create, update, or edit a node or property.

1. Launch Experience Manager in a new browser window.
2. Launch CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
3. Navigate to the fileupload node at /libs/dam/gui/content/assets/jcr:content/body/assetscontent/header/items/default/items/fileupload.
4. Right-click the fileupload node, and select Overlay Node.
5. In the Overlay Node dialog, select the Match Node Types check box, and click OK.
6. Review the structure of the fileupload node, and ensure it matches the following:
   
7. Select the fileupload node and add the following property:
   Name: mimeTypes
   Type: String []
   Value: image/png

mimeTypes is a multi-value property and supports wildcards. If required, you can use the following alternative configurations:

a. Configure mimeTypes to enable users to upload multiple MIME types:
Name: mimeTypes
Type: String[]
Value: image/png, image/jpg

b. Configure mimeTypes to enable users to upload all types of images:
Name: mimeTypes
Type: String
Value: image/*

8. Click Add, and then click Save All. Ensure that the values match the details displayed:
   
9. Click Add, and then click Save All.
10. Open AEM assets in a new browser window.
11. Upload a file and validate the flow. For example, try uploading a PNG file. The upload operation fails. In addition, a warning message notifies that assets of type PNG cannot be uploaded.

Applying sizeLimit Restriction during asset upload

AEM Assets lets you upload files of varying sizes. However, you may impose restrictions to the size of files that users can upload. Uploading large files usually takes a long time and can introduce performance bottlenecks in low-bandwidth scenarios and network glitches. Moreover, you may not want to invest additional resources required to process large files.

This exercise helps you understand how you can easily impose size restrictions in the AEM Assets 6.1 upload workflow by making small configuration changes in the fileupload node within the CRX repository.

1. Launch Experience Manager in a new browser window.
2. Launch CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
3. Navigate to the fileupload node at /libs/dam/gui/content/assets/jcr:content/body/assetscontent/header/items/default/items/fileupload.
4. Right-click the fileupload node, and select the Overlay Node option.
5. In the Overlay Node dialog, select the Match Node Types check box and click OK.
6. Review the structure of the fileupload node, and ensure it matches the following:
   
7. Select the fileupload node, and add a property sizeLimit with the following details:
   Name: sizeLimit
   Type: Long
   Value: 20000

Note: The size limit that you specify for assets in the Value property should be in bytes. For example, if you want to restrict users from uploading assets of size greater than 20 KB, specify 20000 in the Value property (20 KB = 20000 bytes)

8. Upload a file and validate the flow. For example, upload a file of size greater than 20 KB size. A warning message notifies that assets of size greater than 20 KB cannot be uploaded and the upload operation fails.

The post AEM Assets Touch UI Customizations Part 1 appeared first on Experience Delivers.