I'm having trouble understanding how to get an image uploaded to my server (right now my localhost) with angularjs.
In my front end I'm using a form with an angular directive for the model:
main.php
<form>
<div class="form-group">
<label for="myFileField">Select a file: </label>
<input type="file" file-model="MenuItem.myFile" class="form-control" id ="myFileField"/>
</div>
<button ng-click="uploadFile()" class = "btn btn-primary">Upload File</button>
</form>
Then the directive:
app.js
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
In my JS, I'm getting the file from my scope.
$scope.uploadFile = function() {
var file = $scope.MenuItem.myFile;
console.log(file);
console.log($scope.MenuItem);s
qData = {
file_name: file['name'],
file_type: file['type'],
file_size: file['size'],
}
console.log(qData);
qF(qData, 'uploadImage');
};
To explain the above code, I'm just attempting the print out the above info and send it to my backend file. The "qF" function takes all the variables in qData and passes them via post to whatever php file I specify.
The problem is that all solutions I find for the back end involve a "tmp_name" variable, but the "file" object I'm passing into the php has no "tmp_name". When I console.log out the "file" variable, this is the output:
FILE:
lastModified: 1601663109351
lastModifiedDate: Fri Oct 02 2020 13:25:09 GMT-0500 (Central Daylight Time) {}
name: "SmallDoc.txt"
size: 0
type: "text/plain"
webkitRelativePath: ""
__proto__: File
I also don't know what webkitRelativePath is. If I can get tmp_name, I know what to do in the backend. Is there a way to upload a file to a hard-coded location using the php file without this variable, and if not, how do I get it.
My php.ini in my xampp:
> ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;;
>
> ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads
> file_uploads=On
>
> ; Temporary directory for HTTP uploaded files (will use system default
> if not ; specified). ; http://php.net/upload-tmp-dir
> upload_tmp_dir="C:\xampp\tmp"
>
> ; Maximum allowed size for uploaded files. ;
> http://php.net/upload-max-filesize upload_max_filesize=2000M
>
> ; Maximum number of files that can be uploaded via a single request
> max_file_uploads=20
For clarity, the issue I'm having is I'm basically just not sure how to finish the operation of getting the image from my upload form all the way back to being stored on my server/localhost. I'm basically getting stuck and not able to move it past my JS.
