Created on 24 July 2018
icon_unfollowing
Login to follow
upload-and-display-profile-image

Upload and Display Profile Image

Stable version 1.0.3 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded on 11 Jan by 
upload-and-display-profile-image

Upload and Display Profile Image

Details
This component is used for upload and display an image in screen using JavaScript.
Read more

Use this component to fetch the image dynamically and display it in the Image widget.

How to use Upload and Display Profile Image Component :

  • Add an Image widget to the web screen where you want to display the uploaded image.
  • Use JavaScript to dynamically set the source of the Image widget to display the uploaded image.

____________________________________________________________________________________

Here's JavaScript code to display the uploaded image on screen:

$(function() {

    $(".ImgUploader").on("change", function()

        {

            var files = !!this.files ? this.files : [];

            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

            if (/^image/.test(files[0].type)) { // only image file

                var reader_1 = new FileReader(); // instance of the FileReader

                reader_1.readAsDataURL(files[0]); // read the local file

                reader_1.onloadend = function() { // set image data as background of div

                    debugger;

                    $(".ImgPreview").attr("src", this.result);

                }

            }

        });

});

Release notes (1.0.3)

New Update:

1. Updated Code as per Outsystems Best Practices.

2. Fixed AI Mentor Studio Findings.

License (1.0.3)
Reviews (0)
Category
Apps, Development tools
Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
Upload and Display Profile Image has no dependencies.
Application Objects
Upload and Display Profile Image has 7 AOs.
Team
Compatible with
Version 11
11.14.0 or higher
Database:
All
Asset consumers
No consumers yet.
Weekly downloads