Patch uploader with File received from Backend

Question

Hello, it is possible to patch the Uploader component with a File received from backend? I want to be like in this photo, the file to be already uploaded with a File I get from the backend. I looked on Uploader API but nothing about patch a File. Also is possible when I click on the File to download the file? Thanks

Sureshkumar P · Answer

Hi Robert,

We have prepared the custom sample as per your requirement. Please refer the below code

[app.component.html]

// Using template configured the download icon

<ejs-uploader #UploadFiles formControlName="UploadFiles" id="UploadFiles" [dropArea]="dropElement"

(removing)="onFileRemove($event)">

<ng-template #template="" let-data>

<span class='file-size'>{{data.size}} bytes</span>

<span class="upload-status">{{data.status}}</span>

</span>

</ng-template>

</ejs-uploader>

<button>submit</button>

</form>

Uploaded file can be downloaded using download icon through onclick event to invoke the download handler in the controller. Also, you need to pass the filename to the controller for downloading the file. Please check the below code,

Code Example

onSubmit() {

var fileUpload = this.uploadObj.element.parentElement.querySelector(

'.e-hidden-file-input'

).files[0];

// var files = fileUpload.files;

var data = new FormData();

// for (var i = 0; i < files.length; i++) {

data.append(fileUpload.name, fileUpload);

// }

$.ajax({

type: 'POST',

url: 'https://localhost:44312/Home/Save',

contentType: false,

processData: false,

data: data,

success: function (message) { },

error: function () { },

});

}

public download(args, filename) {

let url = 'https://localhost:44312/Home/Download?filename=' + filename;

window.location.rel='nofollow' href = url;

}

Controller code

[AcceptVerbs("Post")]

public IActionResult Save(IList<IFormFile> UploadFiles)

{

var UploadFiles = Request.Form.Files;

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 = 204;

Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";

}

catch (Exception e)

{

Response.Clear();

Response.ContentType = "application/json; charset=utf-8";

Response.StatusCode = 204;

Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "No Content";

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

}

return Content("");

}

[HttpGet]

public FileResult Download(string filename)

{

var filePath = Path.Combine(

Directory.GetCurrentDirectory(),

"wwwroot");

IFileProvider provider = new PhysicalFileProvider(filePath);

IFileInfo fileInfo = provider.GetFileInfo(filename);

var readStream = fileInfo.CreateReadStream();

var mimeType = "application/pdf";

return File(readStream, mimeType, filename);

}

Find the screen shot here:

Frontend: https://stackblitz.com/edit/angular-6zr56x?file=app.component.ts

Backend: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-1545408922

Regards,

Sureshkumar P

Robert Darabana · Answer

And also part with with the Patch is possible? Thanks

Sureshkumar P · Answer

Hi Robert, 
 
We can patch the previously uploaded file using preload file feature.  To know more about the preload files please refer the online demo and documentation link. 
 
Online demo link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/preload-files  
 
Documentation link: https://ej2.syncfusion.com/angular/documentation/api/uploader#files  
 
Regards, 
Sureshkumar P