We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh image container after changing image

Thread ID:

Created:

Updated:

Platform:

Replies:

144033 Apr 15,2019 04:53 PM UTC Apr 17,2019 07:23 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: File Upload
Yoab Youssoufou
Asked On April 15, 2019 04:53 PM UTC

Hello,
This seems like a trivial issue but not working for me.
I'm migrating from EJ1 to EJ2 as regards uploader component
in ej1 after I have uploaded a new image I use the following jquery to update the <img> tag like this:
 function completePic(args) {
        var content = '@ViewBag.Pic';
        $("#Pic").attr("src", content + args.files.name);
        }

and use the completePic function for the "complete" tag in the ej-upload-box component. This works perfectly

EJ2 is pure javascript so I tried


 document.getElementById("Pic").src =  content+ args.files.name; in the same function and replaced it in the "actionComplete" tag of my ejs-uploader

but it doesn't work, my image is not refreshing please what am I doing wrong?

Christopher Issac Sunder K [Syncfusion]
Replied On April 16, 2019 10:31 AM UTC

Hi Yoab, 

Greetings from Syncfusion support!!! 

We have checked your requirement about uploader actionComplete event. In uploader component, “actionComplete” event will be fired after all the selected files have been uploaded successfully or failed and return to server. So the file details are saved as an array in fileData parameter(args.fileData[0].name) . We have provided “success” event which will be triggered on each file upload and directly return the file name (“args.file.name “). 
Thus, When you are using actionComplete event, you need to take the file name using args.fileData[0].name parameter. If you are using success event, you can directly take the file name from args.file.name (in the provided code block, you used args.files.name. Please correct it). You can find code snippet and API document for your reference. 

@{ 
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Home/Save"), RemoveUrl = @Url.Content("~/Home/Remove") }; 
} 
<div class="upload_Wrap"> 
    <ejs-uploader id="UploadFiles" actionComplete="onActionComplete" success="onSuccess" asyncSettings="@asyncSettings"></ejs-uploader> 
</div> 
<img id="Pic" /> 
<script> 
    function onActionComplete(args) { 
        console(args.fileData[0].name); 
        document.getElementById("Pic").src = content + args.fileData[0].name; 
    } 
 (or) 
    function onSuccess(args) { 
        console(args.file.name); 
        document.getElementById("Pic").src = content + args.file.name; 
    } 
</script> 


Please let us know if you require any further assistance. 

Thanks,
Christo 


Yoab Youssoufou
Replied On April 16, 2019 07:08 PM UTC

Unfortunately this did not work for me, I even copied verbatim ur code using either success or actionComplete events and still same result, the img does not update.

Prince Oliver [Syncfusion]
Replied On April 17, 2019 10:50 AM UTC

Hello Yoab, 

Good day to you. 

We have prepared sample based on your requirement to use file uploader’s actionComplete event to update the image source and change the image URL to the uploaded image. Kindly refer the following code snippet 

[View] 
@{ 
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Home/Save"), RemoveUrl = @Url.Content("~/Home/Remove") }; 
} 
 
<div class="upload_Wrap"> 
    <ejs-uploader id="UploadFiles" actionComplete="onActionComplete" asyncSettings="@asyncSettings"></ejs-uploader> 
</div> 
<img id="Pic" /> 
<script> 
    function onActionComplete(args) { 
        content = location.origin + location.pathname + '/../../'; 
        console.log(args.fileData[0].name); 
        document.getElementById("Pic").src = content + args.fileData[0].name; 
    } 
</script> 

[C#] 
[AcceptVerbs("Post")] 
public IActionResult Save(IList<IFormFile> UploadFiles) 
{ 
    try 
    { 
        foreach (var file in UploadFiles) 
        { 
            if (UploadFiles != null) 
            { 
                var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); 
                filename = hostingEnv.WebRootPath + $@"{filename}"; 
                if (!System.IO.File.Exists(filename)) 
                { 
                    using (FileStream fs = System.IO.File.Create(filename)) 
                    { 
                        file.CopyTo(fs); 
                        fs.Flush(); 
                    } 
                } 
                else 
                { 
                    Response.Clear(); 
                    Response.StatusCode = 404; 
                    Response.Headers.Add("status", "File Already Exists"); 
                } 
            } 
        } 
    } 
    catch (Exception e) 
    { 
        Response.Clear(); 
        Response.ContentType = "application/json; charset=utf-8"; 
        Response.StatusCode = 400; 
        Response.Headers.Add("status", e.Message); 
    } 
    return Content(""); 
} 

We have attached the sample for your reference, please find it in the following location 

We have provided image preview example in our demos 

Kindly check the above suggestion in your end and if the issue persists, then you kindly share us the following information to reproduce your issue. 
  • Please provide code for rendering the uploader
  • Please provide video demonstration of the issue.
  • Please check your save location path

The above information will help us provide a prompt solution. 

Regards, 
Prince 


Yoab Youssoufou
Replied On April 17, 2019 12:30 PM UTC

Thanks perfect!

Prince Oliver [Syncfusion]
Replied On April 17, 2019 07:23 PM UTC

Hello Yoab, 

Most Welcome. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon