To upload and display an image in OutSystems Web Application using JavaScript.

Introduction:

This document aims to guide developers on how to implement image upload and display functionality in an OutSystems web application and display the uploaded profile image using JavaScript.  

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);

                }

            }

        });

});

______________________________________________________________________________

Conclusion :

This document provides an outline for implementing image upload and display functionality in an OutSystems web application using JavaScript. Developers can further customize the process, add validation, and enhance the user experience based on specific requirements.