Angular image upload to PHP server tmp_name missing

Question

I am using Angular 1.x on the front end of my Web app with a backend API powered by a PHP framework. I want to provide a drag and drop image upload, the UI works and I am able to POST the submitted data to the backend to save.

However, I am using a 3rd party plugin to process the images on the backend and it is complaining that the tmp_name field is empty. My payload has this structure:

lastModified: 1490387993409
lastModifiedDate: Fri Mar 24 2017 20:39:53 GMT+0000 (Greenwich Mean Time) {}
name: "20170324_185515.jpg"
size: 155232
type: "image/jpeg"
webkitRelativePath: ""

Where as if I use a plain PHP on the front end the payload is:

'tmp_name' => 'tmp\php38BB.tmp',
'error' => (int) 0,
'name' => '20190621_083531_HDR.jpg',
'type' => 'image/jpeg',
'size' => (int) 3871475

I understnad that tmp_name is the location of the temporary storage server side used to copy the image from. Can I simply add this field to my payload manually or am I missing a bigger point and heading down a blind alley?

Answer 1

The simple solution is to use a formData object. So in my case I did the following:

var dataObj = new FormData();

     angular.forEach($scope.listing, function(value, key) {

          dataObj.append(key, object); 

     } 
}

This pushed my multiple image uploads onto the dataobj which retains the tmp_name data as I required.