0

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);
    }
});
Zypps987
  • 404
  • 6
  • 21
  • You're looking for a variable `fileToUpload` on the server, but there's no place client-side that sets that variable. Try `$_FILES['file']` and see what is available from that. – Jason Dec 10 '15 at 04:04
  • This is too broad. First need to figure out whether it is client or server side problem. What is exactly the error you mentioned 'document.getElementById(...) is null' in the browser console. Can you elaborate? – LeOn - Han Li Dec 10 '15 at 04:09
  • @Jason in the php file correct? – Zypps987 Dec 10 '15 at 23:13
  • @Leon li 19 I don't recall where in the firebug debugger it said 'document.getElementById(...) is null' , but now it's saying (for the javascript) TypeError: API.uploadImage(...) is undefined API.uploadImage(data) – Zypps987 Dec 10 '15 at 23:13
  • Do you mean API is not defined? Or data? If it is API, do you minify your js? If so, I would suggest you using ['API', '$scope', function(API, $scope){....}] in your controller. – LeOn - Han Li Dec 11 '15 at 02:53
  • Yes I am using the minify version of angularJS. When you say use ['API', '$scope', function(API, $scope){....}] what about eh "MainController"? – Zypps987 Dec 12 '15 at 19:39

0 Answers0