Error uploading images with angularjs

Question

Error uploading images with angularjs

Navigation

#1 by (0 votes)

0

When uploading an image using ng-file-upload , it is uploaded correctly but what I want to do is send more data along with the image this is my code:

$scope.crear_registro= function(){
    $scope.datos_usuario = (
      { 
        "username": $scope.data.vis_usuario,
        "password": $scope.data.vis_password,
        "nombres": $scope.data.vis_nombres,
        "apellidos": $scope.data.vis_apellidos,
        "identificacion": $scope.data.vis_cedula,
        "email": $scope.data.vis_correo,
        "telefono": $scope.data.vis_telefono,
        "celular": $scope.data.vis_celular,          
        "img_perfil": $scope.data.vis_file, 
        "id_canton": $scope.vis_id_canton                          
      }
    );
    $scope.upload($scope.datos_usuario);
  }

The create record function allows you to build a json of my form data that then $scope.datos_usuario is sent to $scope.upload :

$scope.upload = function (file) {
        alert(JSON.stringify(file))
        Upload.upload({
            url: 'http://192.168.1.8:3000/servidor/users',
            method: 'POST', //webAPI exposed to upload the file
            data: file //pass file as data, should be user ng-model
        }).then(function (resp) { //upload function returns a promise
            if(resp.data.error_code === 0){ //validate success
                alert("si")
            } else {
                alert('an error occured');
            }
        }, function (resp) {
            alert('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            $scope.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
        });
    };

Before sending print file which contains the data of my form but when arriving at my server only the image is presented but not the rest of my data.

How can I fix it?

Thank you in advance

javascript angularjs

asked by Dimoreno 14.07.2017 в 17:29

source

1 answer

SaveChanges entity framework 6 error with two entities use nested $ http requests angular 1

score 0 · Answer 1

I think you should separate the image from the rest of the data. In your function crear_registro removes the attribute img_perfil of the object datos_usuario and pass it as a separate argument, like this:

$scope.crear_registro= function(){
    $scope.datos_usuario = (
      { 
        "username": $scope.data.vis_usuario,
        "password": $scope.data.vis_password,
        "nombres": $scope.data.vis_nombres,
        "apellidos": $scope.data.vis_apellidos,
        "identificacion": $scope.data.vis_cedula,
        "email": $scope.data.vis_correo,
        "telefono": $scope.data.vis_telefono,
        "celular": $scope.data.vis_celular,          
        //"img_perfil": $scope.data.vis_file, 
        "id_canton": $scope.vis_id_canton                          
      }
    );
    $scope.upload($scope.data.vis_file, $scope.datos_usuario);
  }

Then in your function upload receives two parameters, the file (image) and the rest of the data, like this:

$scope.upload = function (file, data) { //si nombras el argumento 'file' tal parece que recibiras eso, un fichero, pero en realidad recibes un objecto con mas datos
    Upload.upload({
        url: 'upload/url',
        data: {file: file, JSON.stringify(data)}
    }).then(function (resp) {
        //
    }, function (resp) {
        //
    }, function (evt) {
        //
    });
};

Taken as a reference the information of the official documentation of ng-file-upload