Add configurable parameter to scale large images when submitted

[chris-fox]

With the Citizen Problem Reporter solution many users use their phone to submit problem reporters and they often attach a picture that take from their phone of the issue, for example potholes, graffiti, street light outage, etc. Modern phones take high resolution photos and these images are large in size and can bloat the service unnecessarily as often a much smaller image is enough to understand the issue.

I would like to add a configurable parameter to the app to allow users to specify the maximum number of pixels for attached images and automatically resize the image down if the provided images exceeds the max. For example maximum pixels=100 scales the image down proportionally to 100 pixels on the longest edge of the image.

Survey123 has a similar parameter described in the doc below: https://doc.arcgis.com/en/survey123/desktop/create-surveys/xlsformmedia.htm

@aparveen, can we look into this for 9.2?

[aparveen]

@chris-fox Sure.

[ashishchoure]

@aparveen

• From the above description we see two requirements :
  • Restrict user from adding the high-resolution images
    • We can show the message to the user saying that the dimensions of the selected image are greater than configured dimensions.
  • Automatically update the uploaded image to the configured image dimension
    • Due to the javascript limitation and security issues, we cannot resize the selected image automatically at the client end.

We recommend showing an informative message to the user and let the user upload the expected dimensions image.

Please let us know your opinion.

[chris-fox]

@ashishchoure, @aparveen, I don't think restricting image uploads based on dimension is a good solution for end users. A lot of times users are just taking pictures from their phone and attaching to the report. It would be very frustrating to present an error message that they have no way to resolve while attempting to report a problem.

[aparveen]

@chris-fox I reached out to our dev team members to see if anybody know if any of our online products do compression at runtime , I will update the team with my findings. Also suggest @CTLocalGovTeam to look at how facebook or whatsapp does their image compression. I came across this article https://venturebeat.com/2019/01/17/facebook-open-sources-spectrum-to-make-uploading-photos-more-efficient/ but not sure how much this will help to solve our problem.

[aparveen]

@ashishchoure got this input from our dev team.

The ArcGIS REST API has dynamic resizing for images for its image endpoints Example: Image Resizing: https://www.arcgis.com/sharing/rest/content/items/e987411ac1a8419bbce3f51d2452578f/info/thumbnail/ago_downloaded.jpg?w=400

Normal Size: https://www.arcgis.com/sharing/rest/content/items/e987411ac1a8419bbce3f51d2452578f/info/thumbnail/ago_downloaded.jpg

You add a URL parameter of “w=”

The file size is different between the two requests above, so it may be creating a new image dynamically with the resizing URL parameter. This one works with thumbnail image, Could you please look at this option and see if this works?

Few other possibilities

This algorithm uses browser features: https://stackoverflow.com/a/14672943/13778340. From caniuse, it appears that it will work in the browsers that we support (there’s a caveat for IE11 that may prevent that browser).

All have an acceptable license. • https://www.npmjs.com/package/browser-image-compression • https://github.com/fengyuanchen/compressorjs • https://github.com/nodeca/pica • and many more Any library choice will require thorough security review.

[ashishchoure]

@aparveen

Thanks for the information. We will have a look at it and we will get back to you on our findings.

[ashishchoure]

@aparveen

• We have found a way to scale the images before submission and we are working on checking the feasibility.
• Users can submit the attachments in the form of images while submitting the "New Feature", editing the "Existing Feature" or while adding "Comments". Do you want us to implement the scaling of images functionality in all these places?

[aparveen]

@ashishchoure are you using any third party libraries? If yes, does it need license? We need to do a security review in that case.

[ashishchoure]

@aparveen

@ashishchoure are you using any third party libraries? If yes, does it need license? We need to do a security review in that case.

• No, we are not using any library. Its a Javascript code that will scale the images based on provided size.

[aparveen]

@ashishchoure please proceed with the change. Thanks

[ashishchoure]

@aparveen

Here are dimension values that we can add to the dropdown in the configuration panel.

• 320pixels
• 640 pixels
• 1280 pixels
• 1920 pixels
• Unrestricted (Any photo size can be attached to the survey.)

We have taken these values from Survey123, please let us know if you want to update the values.

[ashishchoure]

Dev Checklist

Items ​	Is required​	Status	Comments​
Required NLS change?​	No		​
Required Backward compatibility​?	Yes
Required 508​?	No
Need Sanitize?​	No

Impact Analysis Report

Impacted Areas	Comments
Have Configuration changes?​	Yes
Have Runtime changes?​	Yes
Impact on RTL	No
Configuration	Add a new configurable option in the config panel which will allow the user to select the maximum image dimension The option will be shown as a dropdown with the following values : 320pixels 640 pixels 1280 pixels 1920pixels Unrestricted By default the "Unrestricted" option should be selected, this will handle the backward compatibility and user will have to change this value as per there need
Runtime	Once a user adds any attachment of type image then if the configured image dimension is less than the current image dimension, the current image should be automatically scaled as per the configured dimesion If the configured image dimension is greater than the current image dimension no changes should be made to the image Only images shown in the attachment list container should be added as attachment
Geoform (Add/Edit)	The image scaling should work in geo form add and edit mode
Comment form (Add/Edit)	The image scaling should work in comment form add and edit mode

[aparveen]

@ashishchoure can we change the label to "Maximum image size on the longest edge" also is it possible to add pixels after the number like survey 123. I think this will provide a clear definition of the purpose of this parameter.

[ashishchoure]

@aparveen

We will do the suggested changes and provide the same in a new pull request at the earliest.

[aparveen]

verified in qa