title: How to abort a file upload in PrimeNG’s FileUpload component?
body: <h1>1. Summary</h1>
  
  <p>Based on the selected file in PrimeNG's <a href="https://www.primefaces.org/primeng/#/fileupload" rel="nofollow noreferrer">FileUpload component</a>, I want to abort the file upload to the backend server for specific filename patterns. Angular 6.0.7, PrimeNG 6.0.2.</p>
  
  <h1>2. First approach</h1>
  
  <h2>2.1. HTML part</h2>
  
  <pre><code>&lt;p-fileUpload #fileUploader name="file" url="{{uploadUrl}}" accept=".jpeg,jpg" 
    auto="auto" mode="basic" chooseLabel=„Upload file“
    (onBeforeUpload)="fileUploadOnBeforeUpload($event, fileUploader)"&gt;
  &lt;/p-fileUpload&gt;
  </code></pre>
  
  <h2>2.2. TypeScript part</h2>
  
  <pre><code>fileUploadOnBeforeUpload(event) {
    if (condition) {
      event.xhr.abort();
    }
  }
  </code></pre>
  
  <h2>2.3. Result</h2>
  
  <p>The method was called without any errors, but the upload was not canceled.</p>
  
  <h1>3. Second approach</h1>
  
  <h2>3.1 TypeScript part</h2>
  
  <pre><code>fileUploadOnBeforeUpload(event, fileUploader: FileUpload) {
    if (condition) {
      for (let file of fileUploader.files) {
        const index = fileUploader.files.indexOf(file);
        fileUploader.remove(event, index);
      }
    }
  }
  </code></pre>
  
  <h2>3.2 Result</h2>
  
  <p>The selected files are removed before transfer, which "stops" the upload as intended. But the backend server understandably complains about the empty request in the browser console: <code>Failed to load resource: the server responded with a status of 400 ()</code>. </p>
  
  <h1>4. To be solved challenge</h1>
  
  <p>How can I abort the file upload in PrimeNG FileUpload component after selection of specific files?</p>