Upload FIle with Angular JS and PHP - php

Question

I am trying to upload a file with Angular JS and PHP using a formdata object.
I would like to use key1 (data) value to be JSON so I can pass the filename and user info etc. to the php script
I would like to use key2 (uploadFile), value to be the file being uploaded;
I can use POSTMAN to set a key (named data) and add a value for some JSON data {"username" : "kk1"}
then set a key (named uploadFile) and a value pointing to the test file. upload_test1.txt
The PHP succeeds and the file, upload_test1.txt is uploaded and saved to the correct location.
When I run the test using Angularjs
The PHP responds and says that the index uploadFile does not exist
The only thing i can think is that the file path is set incorrectly.
See snippets below
Any help would be appreciated
KNK53
Angular username = "kk1" id="1" and filename = "C:\temp\upload_test2.txt"
...
bdy = {
"username": username, "id": id };
var fd = new FormData();
`fd.append("data", JSON.stringify(bdy));
fd.append("uploadFile", filename);
$http.post(myurl, fd, {
transformRequest: angular.identity,
headers: { "Content-Type": undefined, "processData" : false }
})
...
// the PHP echoes the json and then "from variable:kk1 " lines 1-3
// then error Notice: Undefined index: uploadFile line 5
PHP
1 $data = json_decode($_POST["data"],true);//should have a username
2 echo 'get file:' . $_POST["data"];
3 echo 'from variable:' . $data["username"];
4 echo '<br>';
5 $user = $_FILES['uploadFile']['tmp_name'];
echo 'filename:' . $user . '<br>';
echo 'dir:' . ini_get('upload_tmp_dir');
$target_dir = "../uploads/";
$target_file = $target_dir . 'gotfile.txt';
if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_file)) {
echo 'move succeeded';
}
else
echo 'move failed';

Answer 1

I came to that conclusion as well. I am new to WEB programming but have a lot of other programming experience. The FormData object append method does not actually upload the file.
fd.append("uploadFile", filename);
Is it best to use a directive and then incorporate the FileReader object to read the file data??
OR
I see on other stack overflow threads
that some answers use a directive only to access the "FILES" property of the input element
fd.append("file", element[0].files[0]) ??? does this actually append the file data
File Upload using AngularJS
see marker 57 of this thread??
KNK53

Answer 2

So I redid the functions
Using:
fd.append("file", element[0].files[0]
This sends the information as $_FILE to PHP
Using a filereader and the onreadend event:
onreadend = function(tgt) {
fdata = tgt.target.result;
fd.append("file", fdata);
.
.
.
}
This approach sends the data to $_POST in PHP
KNK53

Answer 3

HTML:
<input type="text" ng-model="userName" />
<input type="file" your-directive ng-model="userFile" />
In your directive's link method:
element.bind('change', function(event) {
scope.userFile = event.target.files[0]; // 'scope' here reefer to the scope where the model will be used to be posted, could be for example the parent scope (scope.$parent) or the root scope..., could even emit the new value too
});
In your controller, assuming your file is posted on a form submit event linked to the controller:
$scope.submit = function() {
var formData = new FormData();
...
formData.append('userName', $scope.userName);
formData.append('userFile', $scope.userFile, $scope.userFile.name);
...
$http({
method: 'POST',
url: <apiUrl>,
data: formData,
headers: {'Content-Type': undefined} // <-- don't forget this
...
}).then...
};
PHP:
$userName = $_POST['userName'];
$userFile = $_FILES['userFile'];
Sorry for the too many editings... got distracted