javascript - form - Imagen de carga angular y visualización al usuario

upload file and data angularjs

Question

Me gustaría implementar una interfaz de usuario donde el usuario selecciona una imagen y esa imagen se muestra al instante para su revisión. El usuario debería hacer clic en "enviar" para cargar / guardar la imagen en su perfil.

Tengo problemas con la "visualización instantánea de vuelta a la parte del usuario".

Estoy utilizando FormData angular con el siguiente marcador y controlador:

MARGEN

<input id="chooseFile" type="file" file-model="picFile" />

<img src="{{uploadedImage}}" /> <!-- this populates with filename but what is the path?? -->

CONTROLADOR

angular.element(''#chooseFile'').change(function(){

        var file = $scope.picFile; // this comes up "undefined" since file is still uploading when this is fired

        $scope.uploadedImage = file.name;

});

Tengo 2 problemas principales con el código anterior (descrito en los comentarios):

1) En el controlador, el file aparece undefined obviamente, porque incluso el archivo más pequeño tarda> 0 segundos en cargarse mientras la devolución de llamada se dispara casi de manera instantánea. Lo hice funcionar utilizando $timeout pero eso es un hack un poco cojo. ¿Cómo puedo hacer que la devolución de llamada espere hasta que se cargue el archivo?

2) La idea es cargar el archivo y mostrarlo en la etiqueta img utilizando el enlace de datos de Angular. Esto funciona en ese src que está poblado con el nombre de archivo, pero ¿cuál es la ruta del img. ¿Alguna ubicación temporal en el caché o algo así? Obviamente, aún no he establecido un camino para mover el archivo.

Cualquier ayuda apreciada!

Answer 1

También necesitaba esta característica, y de alguna manera me las arreglo para mostrar la imagen al instante.

angular.module(''HelloWorldApp'', [])
   .controller(''HelloWorldController'', function($scope) {
       $scope.uploadavtar = function(files) {
        //var fd = new FormData();
        //Take the first selected file
        //fd.append("file", files[0]);
        
        var imagefile = document.querySelector(''#file'');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $(''#temp_image'')
                            .attr(''src'', e.target.result);
                    };
                    reader.readAsDataURL(imagefile.files[0]);
                    this.imagefile = imagefile.files[0];
                }else{
                    console.log("Image not selected");
                }
        
        
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
    <div ng-controller="HelloWorldController">
        <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
    </div>
      <img src="" id="temp_image" width="100">
    <div>
    </div>
</div>

Estaba usando laravel + Angularjs así que otra publicación relacionada a la imagen de la tienda es: https://stackoverflow.com/a/34830307/2815635