ng-file-upload : Changing format from Custom files to All files, it accepts blocked file types to upload

Question

ng-file-upload : Changing format from Custom files to All files, it accepts blocked file types to upload

1.2k Views Asked by patm At 04 April 2025 at 13:41

I have following code which accepts only image and pdf files, but if I change Format from file selection window(i think it's provided by Chrome itself) Custom files to All files, it's accepting all file formats including zip folders.

<button type="button" class="btn-submit upload for-hover smooth-hover"
        data-prod-idx="{{index}}" data-prod-id="{{prod.ProductId}}"
        ng-click="vm.onUpload($event, index, prod.ProductId)"
        ngf-select="vm.uploadAttachments($event, $files, $invalidFiles)"
        multiple accept="application/pdf, image/*" 
        ngf-capture="'camera'"
        ngf-max-size="5MB">Upload Documents
</button>

How to stop uploading files except for image and pdf?(No JQuery please, for all browsers)

I have tried using different values in accept, but that's not helping me.

Original Q&A

There are 1 best solutions below

**georgeawg** · Answer 1

Use the file.type property of each File object to determine if it is an inappropriate type. In the uploadAttachments function, skip the upload if the type is inappropriate.

The DEMO

angular.module("app",['ngFileUpload'])
.controller("ctrl", function () {
  vm = this;
  vm.uploadAttachments = (event, fileList) => {
    console.log("fileList.length=", fileList.length);
    var validList = fileList.filter( f => {
      if (f.type.startsWith("application/pdf")) return true;
      if (f.type.startsWith("image/")) return true;
      console.log("skipping", f.name);
      return false;
    })
    console.log("validList.length=",validList.length);
  };
})

  <script src="//unpkg.com/angular/angular.js"></script>
  <script src="//unpkg.com/ng-file-upload/dist/ng-file-upload-all.js"></script>
  <body ng-app="app" ng-controller="ctrl as vm">
    <button type="button" class="btn-submit upload for-hover smooth-hover"
        data-prod-idx="{{index}}" data-prod-id="{{prod.ProductId}}"
        ng-click="vm.onUpload($event, index, prod.ProductId)"
        ngf-select="vm.uploadAttachments($event, $files, $invalidFiles)"
        multiple accept="application/pdf, image/*" 
        ngf-capture="'camera'"
        ngf-max-size="5MB">Upload Documents
    </button>
  </body>

ng-file-upload : Changing format from Custom files to All files, it accepts blocked file types to upload

There are 1 best solutions below

The DEMO

Related Questions in ANGULARJS

Related Questions in HTML

Related Questions in NG-FILE-UPLOAD

Trending Questions

Popular # Hahtags

Popular Questions