I'm still new to webdev and I can't seem to figure out a problem I've been having with uploading images. When I use firebug to try and narrow the problem down I get a "document.getElementById(...) is null" error.
In the apache2 error logs I'm also seeing the following error messages. I've been cracking at this problem for about 4 hours now to no avail. I would really appreciate some help on this issue.
[Wed Dec 09 22:48:37.204338 2015] [:error] [pid 956] [client 127.0.0.1:51149] PHP Notice: Undefined index: fileToUpload in /var/www/html/js/upload_image.php on line 15, referer: http://127.0.0.1/
[Wed Dec 09 22:48:37.204383 2015] [:error] [pid 956] [client 127.0.0.1:51149] PHP Notice: Undefined index: file in /var/www/html/js/upload_image.php on line 17, referer: http://127.0.0.1/
Here's my html markup.
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="file" name="file"/>
<button ng-click="add()">Upload</button>
</div>
<div ng-include="template.url"><div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is my php
<?php
$input_dir = "uploads"; // where image is should come from json object
$uniqueID_output = date('m.d.Y.h.i.s.a').uniqid()."."; // uniqueID should be a json object that is passed to php
if ($_SERVER['HTTP_CLIENT_IP']) {$today = $uniqueID_output . $_SERVER['HTTP_CLIENT_IP'];} // get local ip of user
else if($_SERVER['HTTP_X_FORWARDED_FOR']) {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_X_FORWARDED_FOR'];}
else if($_SERVER['HTTP_X_FORWARDED']) {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_X_FORWARDED'];}
else if($_SERVER['HTTP_FORWARDED_FOR']) {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_FORWARDED_FOR'];}
else if($_SERVER['HTTP_FORWARDED']) {$uniqueID_output = $uniqueID_output.$_SERVER['HTTP_FORWARDED'];}
else if($_SERVER['REMOTE_ADDR']) {$uniqueID_output = $uniqueID_output.$_SERVER['REMOTE_ADDR'];}
else {$uniqueID_output = $uniqueID_output.'UNKNOWN';}
$input_img = $input_dir . basename($_FILES["fileToUpload"]["name"]); //name of uploaded
$imageFileType = pathinfo($input_img,PATHINFO_EXTENSION);
$tmp_name = $_FILES["fileToUpload"]["tmp_name"];
$uploadOk = 1;
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check == false) {$uploadOk = 0;}
else if ($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png") {$uploadOk = 0;}
if ($uploadOk == 1){
$uniqueID_input = $input_dir . $uniqueID_output . $imageFileType;
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $uniqueID_input);
}
}
exit();
?>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory("API", function ($http) {
return {
uploadImage: function (image) {
$http.post("upload_image.php", image);
}
}
});
app.controller("MainController",function($scope, API) {
$scope.imageUrl = "";
$scope.template = "";
$scope.templates = [];
$scope.templates.push("select an option...");
$scope.templates.push("MakeGray");
$scope.templates.push("Canny");
$scope.template = $scope.templates[0];
$scope.add = function() {
var f = document.getElementById("file").files[0];
var r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
API.uploadImage(data)
.success(function (imgUrl) {
$scope.imageUrl = imgUrl;
})
.error (function (error) {
});
}
r.readAsBinaryString(f);
}
});
