Client-side Image Resize Before Upload, with many options:

1. Resize: resize a Maximum Resolution, Width or Height (maintain aspect ratio), default 800px.

2. Gradual Resize: resize large resolution image beautifully using gradual resize, default true.

3. Sharpen: sharpen factor default 0.2

4. Fix Orientation: reading EXIF data then fixing orientation, default true

5. Jpeg Quality: jpeg compression, default 0.7

7. Reset Upload Element After Resize: default true, to prevent accidental file re-upload on Submit.

8. Bonus: Upload element automatically set to accept: "image/*"

9. Dual Mode Resized Image Output: (hidden/display: none) text input field or Event.

Quick How To:

1. Add and name Upload Widget (optionally with File Upload widget that support drag and drop)

2. Optionally, add and name Image Widget for Preview

3. Add ResizeImageBeforeUpload webblock (add dependency first)

Now, it depends on which mode do you want to use:

FORM HIDDEN TEXT INPUT MODE

4. Add Form Widget and then under it, add & name Text Input Widget

5. Set Text Input Widget's Max Length to 999,999,999,999 and set Style extended property to "display: none;" (don't set Visible to false, it won't work)

7. Add button to ajax submit or submit form

If you use submit, remember to check ResetUploadWidgetBeforeResize is true (default already true), otherwise image will be uploaded twice during submit.

8. Set ResizeImageBeforeUpload webblock's input parameters like in screenshot above.

9. Make sure you input the id of text input widget in OutputWidgetId parameter.

10. During submit/ajax submit action, use Base64ToBinary (from BinaryData system extension) to convert it back to binary

11. Save binary to database entity.

EVENT MODE

4. Set ResizeImageBeforeUpload webblock's input parameters like in screenshot above.

5. Make sure OutputWidgetId parameter is empty.

6. Resized Image will be received using webblock's ImageResized event.

7. Create ImageResized Event Handler

8. Save image to Database Entity in the Event Handler.

Never save image to local variable then use in screen action!

If you do that, image binary will be added to View State, very slow!

Either use form variable, or pass local variable as input parameter to submit action.

Limitation:

- This is not a UI Cropper (where you can control using interaction), use Cropper plugin instead.

- Currently only tested for Chrome browser and Android (as I don't have Mac/Safari/iPhone)

Sample/How-to App included.

Powered by my other Forge Component's javascript: Image Utils Mobile.

Check it out: https://www.outsystems.com/forge/component-overview/2078/image-utils-mobile

Anyone want to donate :)

I received donation through Paypal at harlins@gmail.com.