I'm trying to make a file upload through angular, I'm almost finished but it gives me a lot of errors.
Here is my essay **
CODE 1
** I have the following html code that works:
var app = angular.module('myApp', []);
app.controller('SubirArchivos', function($scope, $http, $parse) {
$scope.name = 'World';
$scope.files = [];
//a partir de aqui el codigo no funciona como deberia
$scope.upload = function(element) {
//aqui comienza el codigo de funcion para subir archivos
console.log("intentando subir");
angular.forEach(element[0].files, function(item) {
console.log("intentando subir");
var fd = new FormData();
fd.append('file', item);
$http.post(item.url, fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(function(success) {
console.log("subido " + success.data.data);
return success.data.data;
});
});
// aqui finaliza la funcion encargada de subir archivos
};
});
app.directive('ngFileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function() {
var values = [];
/*if (files != null)
element.push(files);*/
angular.forEach(element[0].files, function(item) {
if (item.name.endsWith("mp3")) {
var value = {
name: item.name,
size: item.size,
url: URL.createObjectURL(item),
_file: item
};
values.push(value);
}
});
scope.$apply(function() {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>prueba</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body>
<div ng-controller="SubirArchivos">
<input type="file" webkitdirectory directory ng-file-model="files" multiple />
<button type="button" ng-click="upload();">Subir archivos</button>
<p ng-repeat="file in files">
{{file.name}}
</p>
</div>
<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>
</body>
</html>CODE 2
and the function that works for me to upload files, which is without angle would be the following:
This would be the JS code:
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).then(function(success){
console.log("subido "+success.data.data);
return success.data.data;
});
}
}]);
app.controller('SubirArchivos', function($scope, $http) {
$scope.name = 'World';
$scope.files = [];
$scope.upload = function () {
app.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/upload/";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
And the following code is HTML
<div class="container" ng-controller="SubirArchivos">
<form method="post" id="uploadForm" action="upload" enctype="multipart/form-data">
<p ng-repeat="file in files">
{{file.name}}
</p>
<button class="btn btn-primary" type="submit" id="startButton">Empezar a subir</button>
</form>
</div>
In Code 1 it can be seen that when selecting a folder, all the mp3 files found in this and all its sub-folders will be selected. In Code 2 you can see that it works very well because I have a server embedded in a project that I have, the code works very well for a single file, but I want to upload all the previously mentioned ones. My idea is to take out Code 2, and pass it to Code 1 as a function upload In doing so, I run into many problems and I have not succeeded, can someone help me? thanks