Angular JS file upload via php -- Undefined index:

Question

I'm trying to make an upload method with Angular and PHP. that is what i have so far....

HTML

<form class="well" enctype="multipart/form-data">
              <div class="form-group">
                <label for="file">Select a file to upload</label>
                <input type="file" fileread="uploadme" >
                <p class="help-block">Only jpg,jpeg,png and gif file with maximum size of 1 MB is allowed.</p>
              </div>
              <input type="button"  ng-click="upoload()" class="btn btn-lg btn-primary" value="Upload">
            </form>

JS

app.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                });
            });
        }
    }
}]);

app.controller('upController',function($scope,$http){
$scope.upoload=function(){
        $http.post('server/uploadFile.php',$scope.uploadme).
        success(function(data, status) {
                alert(status +" -- "+ data)
        })
    }})

PHP

<?php
    //turn on php error reporting
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    //$data = json_decode( file_get_contents('php://input') );
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $name     = $_FILES['uploadme']['name'];
        $tmpName  = $_FILES['uploadme']['tmp_name'];
        $error    = $_FILES['uploadme']['error'];
        $size     = $_FILES['uploadme']['size'];
        $ext      = strtolower(pathinfo($name, PATHINFO_EXTENSION));

        switch ($error) {
            case UPLOAD_ERR_OK:
                $valid = true;
                //validate file extensions
                if ( !in_array($ext, array('jpg','jpeg','png','gif')) ) {
                    $valid = false;
                    $response = 'Invalid file extension.';
                }
                //validate file size
                if ( $size/1024/1024 > 2 ) {
                    $valid = false;
                    $response = 'File size is exceeding maximum allowed size.';
                }
                //upload file
                if ($valid) {
                    move_uploaded_file($tmpName,'../uploads/'.$name);
                    $response = 'OOOK!';
                    exit;
                }
                break;
            case UPLOAD_ERR_INI_SIZE:
                $response = 'The uploaded file exceeds the upload_max_filesize directive in php.ini.';
                break;
            case UPLOAD_ERR_FORM_SIZE:
                $response = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.';
                break;
            case UPLOAD_ERR_PARTIAL:
                $response = 'The uploaded file was only partially uploaded.';
                break;
            case UPLOAD_ERR_NO_FILE:
                $response = 'No file was uploaded.';
                break;
            case UPLOAD_ERR_NO_TMP_DIR:
                $response = 'Missing a temporary folder. Introduced in PHP 4.3.10 and PHP 5.0.3.';
                break;
            case UPLOAD_ERR_CANT_WRITE:
                $response = 'Failed to write file to disk. Introduced in PHP 5.1.0.';
                break;
            case UPLOAD_ERR_EXTENSION:
                $response = 'File upload stopped by extension. Introduced in PHP 5.2.0.';
                break;
            default:
                $response = 'Unknown error';
            break;
        }

        echo $response;
    }
    ?>

The problem is that I can't find a way to give an index to the post variable, I think this is the reason I keep getting an "undefined index" error message. Any suggestions?

Thank you for the help.

put this at the top print_r($_FILES); might give you some helpful information. — Jelle Keizer
– Jelle Keizer, Commented Nov 6, 2014 at 16:34
add a name to <input type="file" fileread="uploadme" name="uploadme"> — Jelle Keizer
– Jelle Keizer, Commented Nov 6, 2014 at 16:36
unfortunately yes.....i tried also with ng-model but nothing.....=/ — icchio
– icchio, Commented Nov 6, 2014 at 17:08

Funk Forty Niner · Accepted Answer · 2014-11-06 17:42:53Z

There are a few reasons why you are getting an undefined index message.

One is that form requires a POST method.

Change your form code to:

<form class="well" enctype="multipart/form-data" method="post">

It is required when uploading files.

Forms default to a GET method when omitted.

The other is this <input type="file" fileread="uploadme" >

It needs a name attribute: name="uploadme"

Change your input to:

<input type="file" fileread="uploadme" name="uploadme">

Plus, since you are using this conditional statement:

if ($_SERVER['REQUEST_METHOD'] == 'POST')

it works in conjunction with the POST method, which as I said, is missing from your form.

Read the documentation on move_uploaded_file()

http://php.net/manual/en/function.move-uploaded-file.php

Quoting from the manual:

This function checks to ensure that the file designated by filename is a valid upload file (meaning that it was uploaded via PHP's HTTP POST upload mechanism). If the file is valid, it will be moved to the filename given by destination.

Alex Doe · Accepted Answer · 2014-11-06 17:54:35Z

1

You should use another library for uploading a file through angular js, take a look here: https://github.com/danialfarid/angular-file-upload

and then you`ll use it something like this in your js controller:

$scope.upload = $upload.upload({
    url: 'your url', //upload.php script, node.js route, or servlet url
    method: 'POST',
    file: scope.fileread
}).progress(function (evt) {
    //console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); 
}).success(function (data) {
    // file is uploaded successfully
});

answered Nov 6, 2014 at 17:54

Alex Doe

9346 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular JS file upload via php -- Undefined index:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related