AngularJS Enviando uma imagem com ng-upload

Eu estou tentando fazer upload de um arquivo no AngularJS usando ng-upload, mas estou com problemas. Meu html se parece com isso:

Select A Category <option value=" category_id; ?>"> category_name; ?> <input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value=" post_title; ?>" /> Crop Image

E meu controlador js se parece com isso:

 ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', function($scope, PostModel) { $scope.uploadPostImage = function(contents, completed) { console.log(completed); alert(contents); } }]); 

O problema que estou enfrentando é quando a imagem da cultura é atingida e ela executa uploadPostImage, ela carrega o formulário inteiro. Comportamento não desejado, mas eu posso fazer o trabalho. O grande problema é que no js a function uploadPostImage ‘contents’ é sempre indefinida, mesmo quando o parâmetro ‘completed’ retorna como true.

O objective é apenas carregar uma imagem para recortar. O que estou fazendo errado nesse processo?

Não há documentação sobre angular para o upload de arquivos. Muitas soluções requerem diretivas customizadas outras dependencies (jquery in primis … apenas para fazer upload de um arquivo …). Depois de muitas tentativas eu encontrei isso com apenas angularjs (testado na versão 1.0.6)

html

  

Angularjs (1.0.6) não suporta ng-model em tags “input-file”, então você tem que fazê-lo em um “caminho nativo” que passe todos os arquivos (eventualmente) selecionados do usuário.

controlador

 $scope.uploadFile = function(files) { var fd = new FormData(); //Take the first selected file fd.append("file", files[0]); $http.post(uploadUrl, fd, { withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity }).success( ...all right!... ).error( ..damn!... ); }; 

A parte legal é o tipo de conteúdo indefinido e o transformRequest: angular.identity que dá ao $ http a capacidade de escolher o “tipo de conteúdo” correto e gerenciar o limite necessário ao manipular dados multiparte.

Você pode tentar o upload do plugin angularjs (em vez de ng-upload ).

É bastante fácil configurar e lidar com os detalhes do angularjs. Ele também suporta o progresso, cancelar, arrastar e soltar e é cross browser.

html

     

JS:

 //inject angular file upload directives and service. angular.module('myApp', ['ngFileUpload']); var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { $scope.onFileSelect = function($files) { //$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]; $scope.upload = $upload.upload({ url: 'server/upload/url', //upload.php script, node.js route, or servlet url data: {myObj: $scope.myModelObj}, file: file, }).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).then(function(response) { var data = response.data; // file is uploaded successfully console.log(data); }); } }; }]; 

No meu caso, os methods acima mencionados funcionam bem com php, mas quando eu tento fazer upload de arquivos com esses methods em node.js, então eu tenho algum problema. Então, ao invés de usar $ http ({.., .., …}) use o jjaja ajax normal.

Para o arquivo selecionado, use este

  

E no controlador

 $scope.uploadFile = function(element) { var data = new FormData(); data.append('file', $(element)[0].files[0]); jQuery.ajax({ url: 'brand/upload', type:'post', data: data, contentType: false, processData: false, success: function(response) { console.log(response); }, error: function(jqXHR, textStatus, errorMessage) { alert('Error uploading: ' + errorMessage); } }); };