Fine-Uploader Access is denied

Question

I am using the basic Fine Uploader. I am getting the message Access is denied in native IE9 (not in IE11 with IE9 compatibility) It happens when I select the upload button, I mean, previously I select the file and it is added fine. Then I click in the button that calls the service and I get the error.

I read that it could be a security setting in IE, but not sure why it works in IE11 with compatibility and in other browsers and not in native IE9.

Here is the console log:

***LOG: [FineUploader 4.2.1] Received 1 files or inputs. LOG: [FineUploader 4.2.1] Sending upload request for 0 Error: Access is denied.

LOG: [FineUploader 4.2.1] Received response for 0_940f74c7-55dd-4ff2-a4b9-a01a2a80a917***

Is there any workaround for it?

Regards,

[Edit]

(I deleted some functions that are not used when I upload the file, just to make the code shorter here)

JS (angular controller)

  dApp.controller('BPDocumentsController',['$scope', 'BPDocument', 'BPDocuments',
      function BPDocumentsController($scope, BPDocument, BPDocuments) {
       var manualuploader = null;

       $scope.resetUploadDocumentForm = function () {
           $("input[type='file']").val(null);
           $scope.seletedFile = '';
           $scope.fileToUpload = null;
           $scope.documentTitle = '';
           $scope.certify = false;
           $scope.yourName = '';
           $scope.yourTitle = '';
       };

       $scope.resetCustomValidations= function () {
           $scope.uploadDocumentForm.file.$setValidity("filetype", true);
           $scope.uploadDocumentForm.file.$setValidity("size", true);
           $scope.uploadDocumentForm.documentTitle.$setValidity("documentTitleUnique", true);
       };

       $scope.closeUploadDocumentForm = function () {
           $scope.resetUploadDocumentForm();
           $scope.resetCustomValidations();
           $scope.uploadDocumentForm.$setPristine(true);
           $scope.showPopUp = false;
       };



       $scope.uploadDocument = function () {

           var model = {
               BusinessPartnerId: $scope.businessPartnerId,
               Title: $scope.documentTitle,
               CertifiedByName : $scope.yourName,
               CertifiedByTitle: $scope.yourTitle
           };
           var data = { model: model  };

           manualuploader.setParams(model);
           manualuploader.uploadStoredFiles();

           //clean and close popup
           $scope.closeUploadDocumentForm();         
       };

       function initializeFileUploadControl() {
           manualuploader = new qq.FineUploaderBasic({
               element: document.getElementById('manual-fine-uploader'),
               request: {
                   endpoint:  bpDetailsServiceUrl + "BPDocuments"
               },
               autoUpload: false,
               multiple: false,
               validation: {
                   sizeLimit: $scope.fileMaxSizeInBytes,
                   allowedExtensions: $scope.allowedExtensions
               },
               messages: {
                   typeError: "invalidFileExtension",
                   sizeError: "invalidFileSize"
               },
               debug: true,

               callbacks: {
                   onComplete:
                     function (id, name, responseJSON, xhr) {

                         var document = new Object();
                         document = {
                             BusinessPartnerDocumentId: responseJSON.BusinessPartnerDocumentId,
                             FileExtension: responseJSON.FileExtension,
                             Title: responseJSON.Title
                         };

                         $scope.companyTabSelected ? $scope.companyDocumentList.push(document) : $scope.bpDocumentList.push(document);
                         $scope.$apply();
                     },
                   onError: function(id, fileName, reason, maybeXhr) {
                       if (reason == 'invalidFileExtension') {
                           $scope.uploadDocumentForm.file.$setValidity("filetype", false);
                       }
                       if (reason == 'invalidFileSize') {
                           $scope.uploadDocumentForm.file.$setValidity("size", false);
                       }

                   }
               }
           })


       };

       $scope.setFile = function () {
           $scope.$apply(function ($scope) {
               $scope.fileToUpload = null;
               $scope.uploadDocumentForm.file.$setValidity("filetype", true);
               $scope.uploadDocumentForm.file.$setValidity("size", true);

               $scope.fileName = document.getElementById("fileId");
               $scope.fileToUpload = $scope.fileName != undefined && $scope.fileName != '';

               manualuploader.clearStoredFiles();
               manualuploader.addFiles($scope.fileName);

           });
       };

       initializeModel();
       initializeFileUploadControl();

       function initializeModel() {
           var data = JSON.parse($("#BusinessPartnerDocumentData").html());

           $scope.allowedExtensions = ['doc', 'docx', 'xls', 'xlsx', 'pdf'];

           $scope.showCompanyTab = data.ShowCompanyTab;
           $scope.showBPTab = data.ShowBPTab;
           $scope.companyDocumentList = data.CompanyDocumentList;
           $scope.bpDocumentList = data.BPDocumentList;
           $scope.uploadButtonEnabled = data.UploadButtonEnabled;
           $scope.fileMaxSizeInBytes = data.FileMaxSizeInBytes;
           $scope.businessPartnerId = data.BusinessPartnerId;
           $scope.fileName = '';
           $scope.companyTabSelected = $scope.showCompanyTab;
           $scope.bpTabSelected = !$scope.showCompanyTab && $scope.showBPTab ? true : false;
           $scope.resetUploadDocumentForm();
       }
   }]);

HTML

  <div ng-controller="BPDocumentsController">
        <div class="ng-modal" ng-show="showPopUp">
       <div class="ng-modal-overlay"></div>
       <div class="ng-modal-dialog dcp-color-box">
           <div class="ng-modal-close" ng-click="closeUploadDocumentForm()">X</div>
           <div class="pop-up-title">
            <span>{{translations["lblAcceptableFormats"]}}&nbsp;{{allowedExtensions.join(', ')}}</span>

        </div>
        <div class="ng-modal-dialog-content dcp-white-box wdt-500">



            <ng-form name="uploadDocumentForm" novalidate="">
        <div class="pdn-b10 pop-up-note">
            <span class="alert-col">* </span>
            <span>{{translations["lblIndicatesRequiredField"]}}</span> 
        </div>

        <div class="dcp-label-title">
            {{translations["lblChooseDocumentUpload"]}}
            <span class="alert-col">*</span>
        </div>
             <input type="file" id="fileId" name="file" ng-model="tempFile" onchange="angular.element(this).scope().setFile()"/>
        <div ng-show="uploadDocumentForm.file.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.file.$error.size">{{translations["lblFilesNotLargerThan5MB"]}}</span>
            <span class="error-message" ng-show="uploadDocumentForm.file.$error.filetype">{{translations["lblAcceptableFormats"]}}&nbsp;{{allowedExtensions.join(', ')}}</span>
        </div> 

        <div class="dcp-label-title">
            {{translations["lblDocumentTitle"]}}
            <span class="alert-col">*</span>
        </div>
        <input type="text" name="documentTitle" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="documentTitle" ng-minlength=3 ng-blur="lookUpDocument()" required />
        <div ng-show="uploadDocumentForm.documentTitle.$dirty && uploadDocumentForm.documentTitle.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.documentTitle.$error.minlength">{{translations["cvTitleMinimumLength"]}}</span>
            <span class="error-message" ng-show="uploadDocumentForm.documentTitle.$error.documentTitleUnique">{{translations["lblTitleError"]}}</span>
        </div>            
        <div class="pop-up-note-b mrg-b10 clearfix">
            <span>{{translations["lblTitleDocumentCenter"]}}</span>
        </div>
        <div class="clearfix">
            <input type="checkbox" name="certify" ng-model="certify" required/>
            <span>{{translations["cbCertify"]}}</span>
            <span class="error-message">*</span>
        </div>

        <div class="dcp-label-title">
            {{translations["lblYourName"]}}
            <span class="error-message">*</span>
        </div>
        <input type="text" name="yourName" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="yourName" required />

        <div class="dcp-label-title">
            {{translations["lblYourTitle"]}}
            <span class="error-message">*</span>
        </div>
        <input type ="text" name="yourTitle" class="dcp-form-textbox wdt-250 mrg-b10" ng-model="yourTitle" ng-minlength=3 required/>
        <div ng-show="uploadDocumentForm.yourTitle.$dirty && uploadDocumentForm.yourTitle.$invalid">
            <span class="error-message" ng-show="uploadDocumentForm.yourTitle.$error.minlength">{{translations["cvTitleMinimumLength"]}}</span>
        </div>

        <div class="dcp-box-buttons">
            <span class="f-l">{{now}}</span>
            <button type="button" ng-click="uploadDocument()" ng-disabled="uploadDocumentForm.$invalid || !fileToUpload" ng-class="{'dcp-color-btn-disable':uploadDocumentForm.$invalid || !fileToUpload, 'dcp-color-btn':uploadDocumentForm.$valid && fileToUpload}">{{translations["btnSubmit"]}}</button>
            <button type="reset" class="dcp-color-btn" ng-click="closeUploadDocumentForm()">{{translations["btnCancel"]}}</button>
        </div>
</ng-form>
        </div>
    </div>
</div>

EXTRA BUTTON:

function initializeFileUploadControl() {
            manualuploader = new qq.FineUploaderBasic({
                element: document.getElementById('manual-fine-uploader'),
                request: {
                endpoint:  bpDetailsServiceUrl + "BPDocuments"
            },
            autoUpload: false,
            multiple: false,
            validation: {
                sizeLimit: $scope.fileMaxSizeInBytes,
                allowedExtensions: $scope.allowedExtensions
            },
            extraButtons: [
                 {
                     element: $("#pdfButton"),
                 }
                    ],
            messages: {
                typeError: "invalidFileExtension",
                sizeError: "invalidFileSize"
            },
            debug: true,

            callbacks: {
                onComplete:
                  function (id, name, responseJSON, xhr) {

                      var document = new Object();
                      document = {
                          BusinessPartnerDocumentId: responseJSON.BusinessPartnerDocumentId,
                          FileExtension: responseJSON.FileExtension,
                          Title: responseJSON.Title
                      };

                      $scope.companyTabSelected ? $scope.companyDocumentList.push(document) : $scope.bpDocumentList.push(document);
                      $scope.$apply();
                  },
                onError: function(id, fileName, reason, maybeXhr) {
                    if (reason == 'invalidFileExtension') {
                        $scope.uploadDocumentForm.file.$setValidity("filetype", false);
                    }
                    if (reason == 'invalidFileSize') {
                        $scope.uploadDocumentForm.file.$setValidity("size", false);
                    }

                }
            }
        })


    };

HTML for extra button:

 <div id="pdfButton" style="background-color:gray">Select a PDF</div>
 <div id="uploader"></div>

Answer 1

As mentioned in the FAQ on docs.fineuploader.com, you cannot programatically trigger a file chooser dialog. This is not a Fine Uploader limitation, it is a security restriction that Internet Explorer takes quite seriously.

There is no obvious reason to programmatically invoke a file chooser dialog with Fine Uploader anyway, as it provides you with a default customizable file chooser button and the ability to contribute additional chooser buttons. You must allow your user to click these buttons. If you need to programmatically submit a <input type="file">, File or Blob to Fine Uploader, you can do this via the addFiles or addBlobs API methods.