Image Uploader & Editor

There are several places with the app that allow you to upload an image, for example logos & profile pictures.

These all make use of a simple image upload and edit tool. The use of which is detailed here.

Changing the Image

You will find image inputs in some pages & popups as part of a form along with text boxes, drop downs etc. They appear as follows:

Image Input - With No Image

Image Input - With No Image

Image Input - With Image

Image Input - With Image

Use the 'Upload' button to upload a new image and replace any existing image. See Uploading an Image for details.

Use the 'Delete' button to remove the current image.

Any changes you make to the image will not be saved until you save the form of which the image is a part. If you close the page/popup containing the form before saving then changes to the image will be lost.

Uploading & Editing

Uploading

Image Uploader Popup - Change

Image Uploader Popup - Change

  1. The Current Image - blank if there is none.
  2. Upload - this opens a file chooser, allowing you to start the upload of an image. Once the upload is complete Editing will start.
  3. Image Requirements - maximum file size and preferred dimensions.

Editing

Image Uploader Popup - Edit

Image Uploader Popup - Edit

  1. Image Edit Panel - The image you have uploaded. It will be automatically scaled to fit the required size. You can click/tap & hold to drag and re-position the image manually.
  2. Crop Limit - any part of your image which spills over into the limit will be cropped when you finish.
  3. Scale Slider - slide this left to reduce the size of the image. Right to increase the size of the image. Increasing the size when using small low-resolution images may cause pixelation and loss of quality.
  4. Centre - centres the image with the edit panel.
  5. Original Size - returns the image to it's original size, undoing any scaling applied.
  6. Fit Width - Scales the image to match the required height, whilst maintaining the aspect ratio of the image.
  7. Fit Height- Scales the image to match the required width, whilst maintaining the aspect ratio of the image.
  8. Use - once you are happy use this button. If you wish to discard your changes simply close the popup with the 'X' in the top right and any changes will be lost.
  9. Upload New - upload & edit a different image. Starts the editing process over again.

Done

Once you are happy and hit the 'Use' button, the image shown on the original form will have changed:

Image Input - With New Image

Image Input - With New Image

Any changes you have made to the image will not be saved until you save the form of which the image is a part. If you close the page/popup containing the form before saving then changes to the image will be lost.