Advanced File Upload: should be able to remove the file block when upload fails

[hemantg05]

enterprise-ng example code

PIM/enterprise-ng/src/app/fileupload-advanced/fileupload-advanced.demo.ts

Just note I commented status.setCompleted() in error handler as setCompleted() marks the upload as successful upload. The example also shouldn't mark it as successful upload as it is error handler.

  // To allow the function to passed into the options we need a scoped
  // local member variable representing the function, the neatest way is to
  // assign it to a lambda.
  onSend = (formData: FormData, status: SohoFileUploadAdvancedStatus) => {

    // To pass back multipart data to a WebApi requires the use of
    // a new FormData object, in which the additional non file data
    // can be encoded.
    //
    // For ASP.NET Core the backend uses a simple class consisting of the
    // IFormFile to represent the Data field.
    //
    // This is an example form (based on an attachment service in SunSystems).
    const fd = new FormData();
    fd.append('BusinessUnitCode', 'PK1');
    fd.append('DataRecordType', `152`);
    fd.append('RecordKey', '81001');
    fd.append('RecordKey2', null);
    fd.append('MimeType', status.file.type);
    fd.append('Data', status.file);

    // The original Angular Http service does not provide feedback
    // on upload, however the HttpClient (introduced in Angular 4)
    // does, using the reportProgress flag.
    const req = new HttpRequest('POST', 'http://localhost:5000/api/attachments', fd, { reportProgress: true });

    // Subscribing to the request allows the status bar associated with the
    // fileuploadadvnced widget to be updated.
    this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        status.setProgress(percentDone);
      } else if (event instanceof HttpResponse) {
        status.setCompleted();
      }
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        // A client-side or network error occurred. Handle it accordingly.
        console.error('An error occurred:', err.error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.error(`Backend returned code ${err.status}, body was: ${err.error}`);
        alert(`Backend returned code ${err.status}, body was: ${err.error}`);
      }
      // status.setCompleted();
    }
  );

1. Run the example.
2. Upload a file to "Send Method" example.
3. You will get an alert. Click OK on alert.
4. Click on cross grey button.

Expected behavior
User should be able to remove that row when clicking on cross button. Some event should be fired so that we can capture the event and do what we need to do. It is probably "fileaborted" event which is not being fired in NG.

Version

• ids-enterprise-ng: Latest from master

Screenshots

Platform

• Device (if applicable) [e.g. iPhone 6 or Samsung Galaxy S6]
• OS Version: [e.g. Windows 10 or iOS 8]
• Browser Name [e.g. chrome, safari, stock browser]
• Browser Version [e.g. 22, 66.0.3359.181 (Official Build) (64-bit)]

Additional context
@karinthulin

[tmcconechy]

@deep7102 would you be able to take a look and see if its a bug or fixable or workaroundable ect?
Thanks

[CindyMercadoReyes]

This issue is now resolved.