1

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,

  1. the Ticket object will be created
  2. the files will be uploaded (to Azure), based on the FILE-information
  3. the Attachment object(s) is created
  4. the Attachment object(s) is added to the Ticket and
  5. 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:

enter image description here

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:

enter image description here

Since I am not entering the controller action itself to be able to debug, my questions are:

  1. Is this even possible how I like this to work?
  2. If yes, what am I missing?

Best regards, Kay

1 Answer 1

1

The actual error message tells you that an interface/abstract class could not be instantiated. This is normal, because you cannot instantiate an interface or abstract class, you need a non-abstract class in order to instantiate it. So, you will need to review this line

public List<IFormFile> Attachments { get; set; } = new List<IFormFile>();

and see whether you manage to remove an obstacle, possibly by using a full implementation class of the IFormFile interface, so when an attachment is attempted to be added you will not end up with this error.

As about your actual question, you have several options:

Disallow attachment upload on insertion

This is a simple idea. In add-mode you just don't display any attachments and do not allow files to be uploaded, but on edit you allow it. You can possibly display a disabled version of the file upload section and ensure on the server-side to not store any attempted uploads.

Have two separate forms for ticket upload and file upload

In this case you display everything in all cases and even allow files to be prepared for upload, but will only allow attachments to be uploaded if a ticket was actually created

Use a proto class for tickets

You can implement a proto class for tickets, so, if the ticket is not yet created, but an attachment is sent, then a ProtoTicket would be created with a foreign key to the user who creates it, so you will keep track of the attachments and allow the user to upload attachments before actually creating the ticket. At the next time when the user creates a ticket, all his/her attachments to proto tickets will be associated to that new ticket and the proto tickets would be removed. You could also have a periodic job to clean proto tickets. I consider this to be the best solution, because it provides the best UX and protects your server from junk files.

1
  • Thank you, I implemented the second approach now. Happy new year!
    – Igotcha
    Dec 30, 2019 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.