AEM Assets Touch UI Customization – Part 1

AEM Assets helps you cre­ate, man­age, and deliv­er images, video, and oth­er con­tent to any screen or device. It pro­vides a robust touch UI with respon­sive design for the author envi­ron­ment. You can cus­tomize the user inter­face to help you man­age your assets bet­ter and run work­flows more effi­cient­ly.

This is the first of a series of exer­cis­es to make cus­tom changes to the AEM Assets user inter­face and its work­flows to suit your busi­ness needs.

Applying MIME-type restrictions during asset upload

To add to your dig­i­tal asset port­fo­lio or stock image selec­tion in AEM Assets, you can let users upload var­i­ous types of assets (images, PDF files, RAW files, and so on). How­ev­er, as an admin­is­tra­tor, you may want to con­trol the type of files users can upload. For exam­ple, you may want to restrict users from upload­ing video files to ensure that they only upload images to AEM Assets.

Alter­na­tive­ly, you may want to pre­vent the upload of images in a par­tic­u­lar for­mat because you no longer want to renew the license for the soft­ware required to edit such files types. You can also restrict users from upload­ing scanned images in PDF for­mat to elim­i­nate chances of mal­ware being attached to these files.

This exer­cise helps you under­stand how you can eas­i­ly impose MIME-type restric­tions to the upload of assets to AEM Assets 6.1 by mak­ing small con­fig­u­ra­tion changes to the cor­re­spond­ing con­tent node with­in the CRX repos­i­to­ry.

Impor­tant: To ensure that you do not lose your changes, press Save after you cre­ate, update, or edit a node or prop­er­ty.

  1. Launch Expe­ri­ence Man­ag­er in a new brows­er win­dow.
  2. Launch CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  3. Nav­i­gate to the file­u­pload node at /libs/dam/gui/content/assets/jcr:content/body/assetscontent/header/items/default/items/fileupload.
  4. Right-click the file­u­pload node, and select Over­lay Node.
  5. In the Over­lay Node dia­log, select the Match Node Types check box, and click OK.
  6. Review the struc­ture of the file­u­pload node, and ensure it match­es the fol­low­ing:
    Blog 1
  7. Select the file­u­pload node and add the fol­low­ing prop­er­ty:
    Name: mime­Types
    Type: String []
    Val­ue: image/png

mime­Types is a mul­ti-val­ue prop­er­ty and sup­ports wild­cards. If required, you can use the fol­low­ing alter­na­tive con­fig­u­ra­tions:

a. Con­fig­ure mime­Types to enable users to upload mul­ti­ple MIME types:
Name: mime­Types
Type: String[]
Val­ue: image/png, image/jpg

b. Con­fig­ure mime­Types to enable users to upload all types of images:
Name: mime­Types
Type: String
Val­ue: image/*

  1. Click Add, and then click Save All. Ensure that the val­ues match the details dis­played:
    Blog 2
  2. Click Add, and then click Save All.
  3. Open AEM assets in a new brows­er win­dow.
  4. Upload a file and val­i­date the flow. For exam­ple, try upload­ing a PNG file. The upload oper­a­tion fails. In addi­tion, a warn­ing mes­sage noti­fies that assets of type PNG can­not be uploaded.

Applying sizeLimit Restriction during asset upload

AEM Assets lets you upload files of vary­ing sizes. How­ev­er, you may impose restric­tions to the size of files that users can upload. Upload­ing large files usu­al­ly takes a long time and can intro­duce per­for­mance bot­tle­necks in low-band­width sce­nar­ios and net­work glitch­es. More­over, you may not want to invest addi­tion­al resources required to process large files.

This exer­cise helps you under­stand how you can eas­i­ly impose size restric­tions in the AEM Assets 6.1 upload work­flow by mak­ing small con­fig­u­ra­tion changes in the file­u­pload node with­in the CRX repos­i­to­ry.

  1. Launch Expe­ri­ence Man­ag­er in a new brows­er win­dow.
  2. Launch CRXDE Lite from the URL http://localhost:4502/crx/de/index.jsp.
  3. Nav­i­gate to the file­u­pload node at /libs/dam/gui/content/assets/jcr:content/body/assetscontent/header/items/default/items/fileupload.
  4. Right-click the file­u­pload node, and select the Over­lay Node option.
  5. In the Over­lay Node dia­log, select the Match Node Types check box and click OK.
  6. Review the struc­ture of the file­u­pload node, and ensure it match­es the fol­low­ing:
    Blog 3
  7. Select the file­u­pload node, and add a prop­er­ty size­Lim­it with the fol­low­ing details:
    Name: size­Lim­it
    Type: Long
    Val­ue: 20000

Note: The size lim­it that you spec­i­fy for assets in the Val­ue prop­er­ty should be in bytes. For exam­ple, if you want to restrict users from upload­ing assets of size greater than 20 KB, spec­i­fy 20000 in the Val­ue prop­er­ty (20 KB = 20000 bytes)

  1. Upload a file and val­i­date the flow. For exam­ple, upload a file of size greater than 20 KB size. A warn­ing mes­sage noti­fies that assets of size greater than 20 KB can­not be uploaded and the upload oper­a­tion fails.

 

Read-on

Here are the oth­er arti­cles in the AEM Assets Touch UI Cus­tomiza­tions series:

  • AEM Assets Touch UI Cus­tomiza­tions Part 1 (cur­rent)
  • AEM Assets Touch UI Cus­tomiza­tions Part 2
  • AEM Assets Touch UI Cus­tomiza­tions Part 3
0 comments