File upload sample with custom template for image preview & async auto upload

[Davy]

Hello,

We want to use the File Upload component to automatically async upload 1 image and immediately show the uploaded file as preview in the control template.

I am only able to accomplish one or the other, but not both (custom preview template & auto async upload) at the same time. Can this be combined?

Would it be possible to provide a code sample on how to use the File Upload component with an image preview template and async auto upload in a WASM hosted app?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Davy, 

Thanks for contacting Syncfusion support.

Yes. We can show the preview of the image using SfUploader with the help of Templates. We have prepared sample for your convenience. Please find the sample below.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Image_Preview2115532387 

Screenshot:


 

 

Regards, 

Jeyanth. 

[Davy]

I know that we can do that, but can we do that when also using automatic async upload?

<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove">
</UploaderAsyncSettings>

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Davy, 

Thanks for your further explanation. 

We would like to inform you that you can get only the posted file in the controller part if asynchronous upload in performed. To preview an image, we can use filestream and then convert to byte array and then to base64. We cannot get file stream in the asynchronous upload. So you can achieve this requirement by manually by calling the controller part using HttpClient in the change event of uploader. In that controller you can save a file to the location. In the below sample, file will be saved in the root path of server. Please find the sample and code snippet below.


[Index.razor] 

public async Task onChange(UploadChangeEventArgs args) 

    { 

        files = new List<fileInfo>(); 

        this.selectedFiles = args.Files; 

        foreach (var file in args.Files) 

        { 

            var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), "Images"); 

            var fullPath = Path.Combine(pathToSave, file.FileInfo.Name); 

            byte[] bytes = file.Stream.ToArray(); 

            string base64 = Convert.ToBase64String(bytes); 

            files.Add(new fileInfo() { Path = @"data:image/" + file.FileInfo.Type + ";base64," + base64, Name = file.FileInfo.Name, Size = file.FileInfo.Size }); 

            content = new MultipartFormDataContent { 

                    { new ByteArrayContent(file.Stream.GetBuffer()), "\"upload\"", file.FileInfo.Name } 

                }; 

            filepath = await Http.PostAsync("https://localhost:44395/api/SampleData/Save", content); 

        } 

    } 

 

[Controller]

 

[HttpPost("[action]")] 

        public void Save(IList<IFormFile> UploadFiles) 

        { 

            long size = 0; 

            try 

            { 

                foreach (var file in HttpContext.Request.Form.Files) 

                { 

                    var filename = ContentDispositionHeaderValue 

                            .Parse(file.ContentDisposition) 

                            .FileName 

                            .Trim('"'); 

                    filename = environment.ContentRootPath + $@"\{filename}"; 

                    size += (int)file.Length; 

                    if (!System.IO.File.Exists(filename)) 

                    { 

                        using (FileStream fs = System.IO.File.Create(filename)) 

                        { 

                            file.CopyTo(fs); 

                            fs.Flush(); 

                        } 

                    } 

                } 

            } 

            catch (Exception e) 

            { 

                Response.Clear(); 

                Response.StatusCode = 204; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 

            } 

        } 

Sample Link       : https://www.syncfusion.com/downloads/support/forum/158433/ze/Uploader_Image_Preview_Save_File1096254609 

Regards, 

Jeyanth.