У меня есть
Кнопка просмотра файлов
<input type="file" upload-files multiple />
Кнопка создания
<button class="btn btn-link" ng-click="store()" >Create</button>
Директива
myApp.directive('uploadFiles', function () {
return {
scope: true,
link: function (scope, element, attrs) {
element.bind('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
scope.$emit("seletedFile", { file: files[i] });
}
});
}
};
});
Прослушать выбранный файл
$scope.files = [];
$scope.$on("seletedFile", function (event, args) {
console.log("event is ", event);
console.log("args is ", args);
$scope.$apply(function () {
$scope.files.push(args.file);
});
});
Опубликовать данные и выбранные файлы.
$scope.store = function() {
$scope.model = {
name: $scope.name,
type: $scope.type
};
$http({
method: 'POST',
url: '/image/store',
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
console.log("data coming into the transform is ", data);
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files; i++) {
formData.append("file" + i, data.files[i]);
}
return formData;
},
data: { model: $scope.model, files: $scope.files }
})
.then(function successCallback(response) {
console.log("%cSuccess!", "color: green;");
console.log(response);
$scope.refresh();
$scope.showModal = false;
}, function errorCallback(response) {
console.log("%cError", "color: red;");
console.log(response);
});
};
Результат
В моей консоли я не вижу, чтобы мои файлы попадали на мой контроллер в фоновом режиме.
array:1 [
"model" => "{"type":"wedding"}"
]
Вопросы
Какие шаги я забыл?
Как бы это сделать и отладить это дальше?
