File upload using IFormFile at application services

I have a doubt about how to make a file upload to an ApplicationService.

I made two approaches: trying to have an IFormFile inside an input object and trying to have an IFormFile as one of the two arguments in the method.

For instance:

public class SomeObjectInput
 {
     public string AProperty { get; set; }
     public IFormFile File { get; set; }
 }

public class TaskAppService : ApplicationService, ITaskAppService {

     public async Task AMethod(SomeObjectInput input)
     {
            // Code here
     }

}

This approach returns that a IFormFile cannot be instantiated (because it is an interface).

public class TaskAppService : ApplicationService, ITaskAppService {

     public async Task AMethod(IFormFile file, SomeObjectInput input)
     {
            // Code here
     }

}

In this other approach, the file parameter is always null.

Is this not possible at the application service level?

[RobersonLuo]

I think you all thought too much! The point is is how to get the files from the method of the class XXXAppService which derived from ApplicationService, not from the XXXController which derived from AbpController or Microsoft.AspNetCore.Mvc.Controller. So you should remember the class: HttpContext/HtttpRequest/HttpResponse!!!

solution: inject httpContextAccessor in the class XXXAppService will achive it. https://docs.microsoft.com/en-us/aspnet/core/fundamentals/http-context?view=aspnetcore-5.0

Here is my codes, wish will help you!

------Server side (ABP)-------------- [Route(“api/”)] public class XXXAppService : ApplicationService { private readonly IHttpContextAccessor _httpContextAccessor; public XXXAppService(IHttpContextAccessor httpContextAccessor) { _httpContextAccessor = httpContextAccessor; }

[HttpPost, Route("upload")]
public void UploadFile()
{
    var files = _httpContextAccessor.HttpContext.Request.Form.Files;
    //do logics as you like here...
}

}

----Client side (Angular/Typescript/PrimeNG)---------------------------------------------- —(1) UI (PrimeNG upload component) <p-fileUpload name=“demo[]” [multiple]=“true” [url]=“uploadUrl” (onUpload)=“onUpload($event)”> <ng-template pTemplate="content"> <ul *ngIf=“uploadedFiles.length”> <li *ngFor=“let file of uploadedFiles”>{{file.name}} - {{file.size}}byte </ng-template> </p-fileUpload>

—(2) UI logic (Angular component) import { AppConsts } from ‘@shared/AppConsts’;

uploadUrl: string = ‘’; uploadedFiles: any[] = []; ngOnInit() { //http://localhost:21021/api/upload let url_ = AppConsts.remoteServiceBaseUrl + “/api/upload”;
this.uploadUrl = url_.replace(/[?&]$/, “”); }

onUpload(event: any) { _.forEach(event.files, v => { this.uploadedFiles.push(v); }); }

[RobersonLuo]

@amendez1000 , I think you need to upload your Images or Files to a 3th Object Storage Service (OSS， like Amazon Simple Storage Service). Then you can load、display or download them on any client in anywhere.