I am struggling with the task to create an object (a "Ticket") with 0-n children (the file "Attachments") in my Angular app and to send the information to my dotnet core Web Api. But this is more a logical question.
When the user creates the Ticket he should be able to add Attachments to this Ticket.
There are many articles about how to upload files, but what I don't want is, that the user uploads the attachments while he is creating his ticket. I don't want this because if the user cancels the Ticket creation, I will have unused attachments in my storage (Azure) and I am not able to create the Attachment objects without a reference to the TicketId (which does not exist a this time) on the server side with entity framework.
So I like to gather all informations first and if the user says "Create Ticket", all informations will be sent to the API,
- the Ticket object will be created
- the files will be uploaded (to Azure), based on the FILE-information
- the Attachment object(s) is created
- the Attachment object(s) is added to the Ticket and
- everything is saved to the database
Angular (client side)
Form to collect Ticket data and to select files for the Attachments. The interface looks like that:
export interface ITicketCreate {
subject: string;
content: string;
category: number;
userId: string;
userNickname: string;
email: string;
attachments: File[];
}
The final Dto object which is sent to the Api looks like that:
The service with the createTicket function
export class SupportService {
supportUrl = environment.SupportApiUrl;
constructor(private http: HttpClient) { }
createTicket(model: ITicketCreate) {
return this.http.post(this.supportUrl + 'tickets', model);
}
...
}
And the call in the CreateTicketComponent
ticket = {} as ITicketCreate;
...
ngOnInit() {
this.ticket.attachments = [];
}
createTicket() {
console.log(this.ticket);
this.ticket.userId = this.authService.currentUser.id;
this.ticket.userNickname = this.authService.currentUser.nickName;
this.ticket.email = this.authService.currentUser.userName;
this.supportService.createTicket(this.ticket).subscribe(next => {
this.alertify.success('Ticket created');
this.router.navigate(['/support/tickets']);
}, error => {
this.alertify.error(error);
console.log(error);
});
}
Web Api (.Net Core 2.2)
On the server side I have the following Dto to receive the data:
public class CreateTicketDto
{
public string Subject { get; set; }
public string Content { get; set; }
public string UserId { get; set; }
public string Email { get; set; }
public string UserNickname { get; set; }
public int Category { get; set; }
public List<IFormFile> Attachments { get; set; } = new List<IFormFile>();
}
And the controller action
[HttpPost]
public async Task<IActionResult> CreateTicket(CreateTicketDto createTicket)
The error I get from the API after sending the request is:
Since I am not entering the controller action itself to be able to debug, my questions are:
- Is this even possible how I like this to work?
- If yes, what am I missing?
Best regards, Kay