[FileUploader Image Preview] Demo: Image Preview

[FileUploader Image Preview] Demo: Image Preview

  
Forge Component
(0)
Published on 2014-07-27 by the zok
0 votes
Published on 2014-07-27 by the zok

Hey Guys,


Can anyone send me how to use this FileUploader Image Preview component

Because I tried to use this but the two input parameters are mandatory

I actually don't know what to pass in these parameters.

An example will be more easy to use this.


Thanks

Keerthi

Keerthi Vasan wrote:

Hey Guys,


Can anyone send me how to use this FileUploader Image Preview component

Because I tried to use this but the two input parameters are mandatory

I actually don't know what to pass in these parameters.

An example will be more easy to use this.


Thanks

Keerthi

Hi Keerthi.

I never used this component but by the name of the parameters, both should be the name of the CSS class used by the image element (preview) and the other the name of the CSS class used by the file uploader itself.

Cheers,

GM



Solution

Keerthi Vasan wrote:

Hey Guys,


Can anyone send me how to use this FileUploader Image Preview component

Because I tried to use this but the two input parameters are mandatory

I actually don't know what to pass in these parameters.

An example will be more easy to use this.


Thanks

Keerthi

Hi Keerthi,

You can easily complete this task by simple JQuery efforts.


For this Task , you need to set "ImgPreview" class on Image control and also need to set "ImgUploader" class to file upload control , see below snap shot.

And write the below code under Javascript block of current web screen.

SyntaxEditor Code Snippet

$(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);
             
         
            }
        }
    });
    
});

That's it.


Happy Coding :)

Cheers...

Rafi Ahmed khan


Solution

Thanks, Buddy

It works like a charm