Upload FIle with Angular JS and 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';

You are only sending the file _name_ in text form here, you are not performing an actual file upload. — 04FS, Oct 15 '19 at 06:36
_“The only thing i can think is that the file path is set incorrectly.”_ - sounds like you thought you could upload arbitrary files from the client by simply specifying the path to them yourself in code …? Of course you can’t, the user needs to actively select the file. — 04FS, Oct 15 '19 at 06:38

score 0 · Answer 1 · answered Oct 15 '19 at 17:49

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

score 0 · Answer 2 · answered Oct 16 '19 at 12:13

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

EurekA · Answer 3 · 2019-10-26T10:22:50.100

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

Upload FIle with Angular JS and PHP

3 Answers3