javascript - ngvalue - ng-< cloak angularjs

AngularJS cargando una imagen con ng-upload

Question

Intento cargar un archivo en AngularJS usando ng-upload, pero me estoy encontrando con problemas. Mi html se ve así:

<div class="create-article" ng-controller="PostCreateCtrl">
<form ng-upload method="post" enctype="multipart/form-data" action="/write" >
<fieldset>
<label>Category</label>
<select name="category_id" class="">
<option value="0">Select A Category</option>
<?php foreach($categories as $category): ?>
<option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option>
<?php endforeach; ?>
</select>
<label>Title</label>
<input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="<?= $post -> post_title; ?>" />
<label>Attach Image</label>
<input type="file" name="post_image" />
<a href=''javascript:void(0)'' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a>
<label>Body</label>
<div id="container">
<textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea>
</div>
<div style=''clear:both;''></div>
<label>Preview</label>
<div id=''textarea-preview''></div>
</fieldset>
<div class="span7" style="margin: 0;">
<input type="submit" class="btn btn-success" value="Create Post" />
<input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" />
</div>
</form>
</div>

Y mi controlador js se ve así:

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

El problema al que me enfrento es cuando se golpea la imagen de recorte y se ejecuta uploadPostImage, carga todo el formulario. Comportamiento no deseado, pero puedo hacerlo funcionar. El gran problema es que en los parámetros js la función uploadPostImage ''contents'' siempre está indefinida, incluso cuando el parámetro ''completed'' vuelve a ser verdadero.

El objetivo es subir solo una imagen para recortar. ¿Qué estoy haciendo mal en este proceso?

Answer 1

Hay poca documentación, ninguna en angular para cargar archivos. Muchas soluciones requieren directivas personalizadas otras dependencias (jquery in primis ... solo para cargar un archivo ...). Después de muchos intentos, he encontrado esto con solo angularjs (probado en v.1.0.6)

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) no es compatible con ng-model en las etiquetas "input-file", por lo que debe hacerlo de forma nativa y pasar todos los archivos seleccionados (eventualmente) del usuario.

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!... );
};

La parte interesante es el tipo de contenido indefinido y el transformRequest: angular.identity que le dan a $ http la capacidad de elegir el "tipo de contenido" correcto y administrar el límite necesario al manejar datos de varias partes.

Answer 2

En mi caso, los métodos mencionados anteriormente funcionan bien con php, pero cuando intento cargar archivos con estos métodos en node.js, entonces tengo un problema. Entonces, en lugar de usar $ http ({.., .., ...}) usa el jquery ajax normal.

Para seleccionar el archivo, use esto

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)"/>

Y en el 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);
}
});
};

Answer 3

Error al cargar el archivo: "el contenedor no tiene un método que maneje POST"

App.service(''fileUpload'', [''$http'', function($http) {
this.uploadFileToUrl = function(file, uploadUrl) {
console.log("inside upload file service js ");
var fd = new FormData();
fd.append(''file'', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {
''Content-Type'': undefined
}
})
.success(function(response) {
console.log("file uploaded sucessfully " + response);
})
.error(function(error) {
console.log("Error while uploading file " + JSON.stringify(error));
});
}
}]);

{"error": {"nombre": "Error", "estado": 404, "mensaje": "Clase compartida /" contenedor / "no tiene ningún método para manejar POST / 5555-1111", "estadoCódigo": 404, " pila ":" Error:

Answer 4

Puedes probar el complemento ng-file-upload angularjs.

Es bastante fácil de configurar y tratar con detalles angulares. También es compatible con el progreso, cancelar, arrastrar y soltar, y es un navegador cruzado.

html

<!-- Note: MUST BE PLACED BEFORE angular.js-->
<script src="ng-file-upload-shim.min.js"></script>
<script src="angular.min.js"></script>
<script src="ng-file-upload.min.js"></script>
<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directives and service.
angular.module(''myApp'', [''angularFileUpload'']);
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));
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
};
}];