File upload incompatibility by ipad

Question

I’m having a problem with uploading files to the iPad. Via web interface, I can upload normal image, but when I do by ipad, it does not change the name of the file and only lets upload images, pdf’s and other types of files it doesn’t even display for selection. Has anyone ever had a similar problem?

Html:

    <div class="modal-header">
              <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only"><span data-i18n="Fechar"></span></span></button>
              <h4 class="modal-title" id="modalPhotoUpload"><span data-i18n="Enviar Foto"></span></h4>
            </div>
            <div class="modal-body">
                <p>
                    <input type="file" ng-file-select="onFileSelect($files)" onclick="this.value=null" accept="image/*">
                    <img ng-src="{{img}}" ng-show="{{show_img}}" width="50px">
                </p>
                <p>
                  <div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files)" ng-file-drop-available="dropSupported=true" ng-file-drag-over-class="dragOverClass($event)" class="drop-box" ng-file-drag-over-delay="100">
                      <div ng-if="show_img">
                        <div>
                          <img alt="" src="{{img_src}}" ng-show="show_img" class="img-circle img40_40">
                        </div>
                      </div>
                      <div ng-if="!show_img">
                        <span data-i18n="Arraste a imagem para cá"></span>. 
                        <div>
                          <span class="glyphicon glyphicon-camera"></span>
                        </div>
                      </div>
                  </div>
                <div ng-file-drop-available="dropSupported=true" 
                      ng-show="!dropSupported" ><span data-i18n="Seu Browser não suporta este aplicativo"></span>.</div></p>
                <p><progressbar class="{{progress_class}}" value="dynamic" type="{{type}}">{{dynamic}}% <i ng-show="showWarning"><span data-i18n="Completo"></span></i></progressbar></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" ng-click="cancel()"><span data-i18n="Fechar"></span></button>
              <button type="button" class="btn btn-primary" ng-click="ok()"><span data-i18n="Salvar"></span></button>
            </div>

Angular:

    .controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http, $upload, $timeout, action, API_ENDPOINTS) {
                $scope.alerts = [];
                $scope.data = [];
                $scope.initDate = new Date('2016-15-20');
                $scope.type = 'warning';
                $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                $scope.format = $scope.formats[0];
                $scope.show_img = false;
                $scope.img_name = null;
                $scope.img_src = null;
                $scope.file_box_label = "Arraste um arquivo para cá";

                $scope.onFileSelect = function ($files) {
                  $scope.max = 100;
                  $scope.progress_class = 'progress-striped active';
                  // $files: an array of files selected, each file has name, size, and type.
                  for (var i = 0; i < $files.length; i++) {
                    var file = $files[i];
                    if(action.args.rename){
                      $scope.img_name = action.args.rename;
                    }else{
                      $scope.img_name = file.name;
                    }
                    $scope.upload = $upload.upload({
                      url: action.action_url, //upload.php script, node.js route, or servlet url
                      method: 'POST',
                      data: {file: file, fileName: $scope.img_name}
                      //file: file // or list of files ($files) for html5 only
                      //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
                      // customize file formData name ('Content-Disposition'), server side file variable name. 
                      //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' 
                      // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
                      //formDataAppender: function(formData, key, val){}
                    }).progress(function(evt) {
                      $scope.dynamic = parseInt(100.0 * evt.loaded / evt.total);
                      if($scope.dynamic >= 99){
                          $scope.progress_class = 'progress-striped';
                      }
                    }).success(function(data, status, headers, config) {
                      $scope.file_box_label = $scope.img_name;
                      $scope.img_src = (API_ENDPOINTS.baseURL + 
                      API_ENDPOINTS.courseLogosFolder + $scope.img_name);
                      $scope.type = 'success';
                      $scope.show_img = true;
                      $scope.alerts.splice(0, 1);
                      $scope.alerts.push({'type':'success','msg':'O arquivo foi enviado com sucesso. Clique em Salvar.'});
                    }).error(function(data, status, headers, config){
                      $scope.file_box_label = "Ocorreu um error, tente novamente. Arraste um arquivo para cá";
                      $scope.type = 'danger';
                      $scope.alerts.splice(0, 1);
                      $scope.alerts.push({'type':'danger','msg':'Ocorreu um erro no upload do arquivo. Tente novamente.'});
                      console.log(data);
                    });
                    $timeout(function () {
                        $scope.alerts.splice(0, 1);
                      }, 4000);
                  }
                };

                $scope.ok = function () {
                  $scope.data.img_name = $scope.img_name;
                  $modalInstance.close($scope.data);
                };

                $scope.cancel = function () {
                  $modalInstance.dismiss('cancel');
                };

                $scope.close = function () {
                  $modalInstance.dismiss('cancel');
                };

                $scope.closeAlert = function(index) {
                  $scope.alerts.splice(index, 1);
                };
              });