Enabling support for WebP file upload for SmartEdit and Media Conversion in CCv2

Recently we had a requirement to enhance our SAP Commerce Cloud solution to support WebP image format. Achieving this goal involved several steps. Let’s begin by discussing the process of enabling the upload of WebP files within SmartEdit.

SmartEdit File upload

By default SmartEdit supports these file types: jpeg, jpg, gif, bmp, tiff, tif, png, pdf, and video.

To extend its capabilities to support the WebP format, the following steps are required:

1. Find and open …/hybris/bin/modules/smartedit/smartedit/apps/smartedit-commons/src/services/fileValidation/FileValidationService.ts file and add webp in ACCEPTED_FILE_TYPES

ACCEPTED_FILE_TYPES: ['jpeg', 'jpg', 'gif', 'bmp', 'tiff', 'tif', 'png', 'webp'],

2. Add the mime type code for WebP to the local.properties file:

smartedit.validImageMimeTypeCodes=FFD8FFDB, FFD8FFE0, FFD8FFE1, FFD8FFED, 474946383761, 474946383961, 424D, 49492A00, 4D4D002A, 89504E470D0A1A0A, 52494646, 57454250

You can copy first the content of /hybris/bin/modules/smartedit/smartedit/project.properties and then just add 52494646, 57454250

3. Update the media.allowed.extensions.for.ClassLoader property in local.properties to include ‘webp’:

media.allowed.extensions.for.ClassLoader=jpeg,jpg,gif,bmp,tiff,vcard,templ,tif,png,webp

We need this as the property enables us to specify extensions of files that we allow MediaFilter to serve from the Platform classpath.

We use this property to prevent MediaFilter from serving files we think users shouldn’t have access to or vice versa.

Enabling WebP file upload for SmartEdit in CCv2

The above changes will work on local and to make them work also in CCv2 we should:

1. Upload the whole smartedit extension in our repository, ensuring that the updated file mentioned above is included: /hybris/bin/modules/smartedit/smartedit/apps/smart-utils/src/services/file-validation/file-validation.service.ts.
2. Ensure that all properties added to local.properties are also incorporated into the environment-specific cloud properties(if you have ones).

Then we build and deploy.

Adding new image format for Media Conversion

In SAP Commerce Cloud, a variety of image formats are natively supported, such as jpeg, jpg, gif, bmp, tiff, vcard, templ, tif, csv, eps, pdf, and png.

ImageMagick relies on Mime Type detection on file extensions. This means to convert a media to a specific Mime Type, the file extension of the output file must be set accordingly.

To introduce a new Mime Type/file extension pair WebP in our case, we add the following properties:

media.customextension.image.webp=webp
mediatype.by.fileextension.webp=image/webp

The template is:

media.customextension.${mimetype category}.${mimetypename}=${extension}
mediatype.by.fileextension.${file.extension}=${mimetype}

Check more details:

SAP Help Portal

SAP Help Portal