Estoy tratando de crear un formulario AngularJS. Una parte del formulario es tomar Base64 de un archivo y almacenarlo en mi $scope.user. Sin embargo, al hacer clic en la entrada de carga de un archivo y seleccionar mi archivo, se envía mi formulario, lo que no debería suceder.

Aquí está mi forma:

<form ng-submit="processForm()" name="merchApp"  style="position:relative">
    <div class="form-section" ui-view>
        <div class="row">
        <div class="col-sm-12 text-center">


        <button href="#" ng-click='docUpload("userId")'>Upload File</button>&nbsp;{{user.uploadIdName}}
        <br/>* Accepted file types: .jpg, .png, .gif, .pdf, .doc, .docx
        <br/>
        (Max file size: 2MB)
        <br/>
        <input ng-model="user.uploadId" type="hidden" value="{{user.uploadId}}" required>


    <br/><br/>
    <button type="submit" class="next" ng-disabled="merchApp.$invalid">SUBMIT APPLICATION</button>
</div>
</div>
</div>   
</form>

Aquí está mi app.js

.controller('formController', ['$scope', '$http', '$parse', function($scope, $http, $parse) {

// we will store all of our form data in this object
$scope.user = {};

$scope.docUpload = function() { //default function, to be override if browser supports input type='file'
  $scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}


var fileUploadScope;
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';

if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
  return;
}
var fileUploadScope;
var fileUploadName;
$scope.docUpload = function(x) { //activate function to begin input file on click
    switch(x){
        case "checkBankLetter":
            fileUploadScope = $parse("uploadCheckBankLetter");
            fileUploadName = $parse("uploadCheckBankLetterFileName");
            break;
        case "userId":
            fileUploadScope = $parse("uploadId");
            fileUploadName = $parse("uploadIdName");
            break;
        default:
            alert ("error");
    }


    fileSelect.click();
}

fileSelect.onchange = function() { //set callback to action after choosing file

     var f = fileSelect.files[0];
     var fsize = f.size;
     var fileTypes = ['jpg', 'jpeg', 'png', 'doc', 'docx', 'pdf', 'gif'];

    if (fsize > 2097152){//file size limit is 2MB
           alert ("File size too large. Please select a file 2MB or smaller.");
     }
     else {// file size is acceptable
         if(f){
             var extension = f.name.split('.').pop().toLowerCase(),  //file extension from input file
                 isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types

             if (isSuccess) { //yes
                var r = new FileReader();
                r.fileName = f.name;
                if (typeof FileReader !== "undefined"){

                        r.onloadend = function(e) { //callback after files finish loading
                            // allow for different scope names for file upload functions
                            fileUploadScope.assign($scope.user, e.target.result);
                            fileUploadName.assign($scope.user, r.fileName);

                            $scope.$apply();


                        //here you can send data over your server as desired
                        }
                        r.readAsDataURL(f); //once defined all callbacks, begin reading the file


                }



             }
             else {
                 alert("Please select an acceptable file type");
             }
         }
     } 




};

// function to process the form
$scope.processForm = function() {
    $http({
      method  : 'POST',
      url     : 'docusign.php',
      data    : $scope.user  // pass in data as strings

     })
      .success(function(data) {
            console.log(data);
            location.replace(data);
        });
};
}])

processForm() se está disparando después de hacer clic en <button href="#" ng-click='docUpload("userId")'>Upload File</button> y seleccionar un archivo, y no puedo entender por qué sucede esto.

0
user3183717 8 mar. 2017 a las 19:28

2 respuestas

La mejor respuesta

Idealmente, es una mejor práctica especificar el atributo type para los botones.

El botón sin el atributo type actúa como botones de envío, razón por la cual su formulario se envía cuando hace clic en el botón.

Por lo tanto, agregue el atributo type al botón. type="button" elimine el atributo href ya que no es necesario para el botón.

Cambiar esta línea
<button href="#" ng-click='docUpload("userId")'>Upload File</button>
a
<button type="button" ng-click='docUpload("userId")'>Upload File</button>

0
Gangadhar JANNU 8 mar. 2017 a las 17:42

No estoy seguro de si se trata de las mejores prácticas, pero pude solucionar mi problema agregando onclick="return false" a mi botón de entrada.

0
user3183717 8 mar. 2017 a las 16:55