I have
Browse files button
<input type="file" upload-files multiple /> Create Button
<button class="btn btn-link" ng-click="store()" >Create</button> Directive
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] }); } }); } }; }); Listen for the file selected
$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); }); }); Post data and selected files.
$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); }); }; Result
In my console, I don't see my files got pass on to my controller in the back-end.
array:1 [ "model" => "{"type":"wedding"}" ] Questions
What steps did I forget ?
How would one go about and debug this further ?
I'm opening to any suggestions at this moment.
Any hints / suggestions / helps on this be will be much appreciated !
4 Answers
Answers 1
Here some suggestions for you:
- Make the
Content-typesets tomultipart/form-datato set the content type to something like.... "it has some part in it, please make sure you get it properly" thing. - Use Axios. Here's a working examples (if you didn't use Axios, this example are good too). Example to Axios on Uploading File.
Answers 2
I've done several angular 1 projects and also find it is not simple to upload files via $http api. Hope below code snippet which i used in my projects may help you.
$scope.store = function() { var formData = new FormData(); // add normal properties, the name should be the same as // what you would use in a html form formData.append('model[name]', $scope.name); formData.append('model[type]', $scope.type); // add files to form data. for (var i = 0; i < $scope.files; i++) { formData.append('file' + i, $scope.files[i]); } // Don't forget the config object below $http.post('/image/store', formData, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }).then(function() { // ... }); }; Answers 3
You can use FormData instead
var formData = new FormData(); formData.append('model[var]', $scope.var); // For add to the FormData other file for (var i = 0; i < $scope.files; i++) { formData.append('file' + i, $scope.files[i]); } // POST REQUEST MUST BE: $http.post('url', formData, { transformRequest: angular.identity, //It is for allowing files headers: {'Content-Type': undefined} }).then(function(response) { // verify if response get 200 }); Answers 4
I am not very experienced in Angular, so I'm assuming that your front-end works.
Debugging Tip Create a PHP file called...I dunno...file_dump.php. In that file, put this code:
<?php echo "<pre>" print_r($_REQUEST) echo "</pre>" ?> and submit your form to that. That will show you all your request data. If you do not see your files in the output, it is a problem with your JavaScript. Since I am not that good at Angular, I'm going to point you to this link: link to multiple file upload tutorial using Angular. These guys seem to know what they're doing.
If you do see your files in the file_dump.php output, it's a problem with your backend - Laravel. This, I can help you with, but I need to see your scripts for me to be helpful in this aspect.
Please do post the results of file_dump.php.
Also, are you using the correct methods for fetching files? Link. If not, then we have found our culprit...
=D
Pranav
0 comments:
Post a Comment