Angularjs - File upload with php

Question

I have spent days looking for a fairly simple integration of angularjs file upload method that includes a basic php server side script..

I need a simple form one field and file upload upload.

All examples I find are either heavily relying of jQuery or if they seem like something I could use their "examples" are completely unclear and messy.

These two examples (if I could figure out how to incorporate with PHP) would solve my puzzle..

Example 5 on this page http://ng-upload.eu01.aws.af.cm/

And the example on this page is one I really like a lot.. http://angular-file-upload.appspot.com/

Could someone bring more light into this for me.. I would really like to see a one input filed and one file upload with as simple as possible angular and php code if such thing exists somewhere.

I would be happy to implement this http://twilson63.github.io/ngUpload/ or http://angular-file-upload.appspot.com/

If this is my PHP

$fname = $_POST["fname"];
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['image']['name'];
    $file_size =$_FILES['image']['size'];
    $file_tmp =$_FILES['image']['tmp_name'];
    $file_type=$_FILES['image']['type'];   
    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    $extensions = array("jpeg","jpg","png");        
    if(in_array($file_ext,$extensions )=== false){
     $errors[]="image extension not allowed, please choose a JPEG or PNG file.";
    }
    if($file_size > 2097152){
    $errors[]='File size cannot exceed 2 MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo $fname . " uploaded file: " . "images/" . $file_name;
    }else{
        print_r($errors);
    }
}
?>

and this my basic html

<form action="" method="POST" enctype="multipart/form-data">
    <input type="text" name="fname" />
    <input type="file" name="image" />
    <input type="submit"/>
</form>

How could I approach this (cleanly)? What should my controller and adjusted html look like?

danial · Accepted Answer · 2016-10-11 05:52:00Z

20

If you use ng-file-upload You can do most of those pre-validation on the client side like checking the file size or type with ngf-max-size or ngf-pattern directives.

Upload.upload() will send a POST multipart/form-data request to the server so $_FILES['file'] should contain the uploaded file.

HTML

<div ng-controller="MyCtrl">
  <input type="text" name="username" ng-model="username"/>
  <input type="file" ngf-select="onFileSelect($file)" ngf-pattern="'image/*'" ngf-max-size="2M">
</div>

JS:

//inject angular file upload directives and service.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function(file) {
    if (!file) return;
    Upload.upload({
        url: '/upload.php',
        data: {file: file, username: $scope.username}
      }).then(function(resp) {
        // file is uploaded successfully
        console.log(resp.data);
      });    
  };
}];

upload.php

$fname = $_POST["fname"];
if(isset($_FILES['image'])){
    //The error validation could be done on the javascript client side.
    $errors= array();        
    $file_name = $_FILES['image']['name'];
    $file_size =$_FILES['image']['size'];
    $file_tmp =$_FILES['image']['tmp_name'];
    $file_type=$_FILES['image']['type'];   
    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    $extensions = array("jpeg","jpg","png");        
    if(in_array($file_ext,$extensions )=== false){
     $errors[]="image extension not allowed, please choose a JPEG or PNG file.";
    }
    if($file_size > 2097152){
    $errors[]='File size cannot exceed 2 MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo $fname . " uploaded file: " . "images/" . $file_name;
    }else{
        print_r($errors);
    }
}
?>

edited Oct 11, 2016 at 5:52

answered Dec 17, 2013 at 21:08

danial

4,0982 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GRowing Over a year ago

Hey, thanks for taking the time. Can you tell me where does $upload come from? And I always get $files undefined when trying angular-file-upload.. Do you possibly know why?

danial Over a year ago

$upload is the angular service which will be provided when you include angular-file-upload.js Follow the instruction on the GitHub page and open an issue there if you still have problem. Many people are using it this way.

Navid_pdp11 Over a year ago

dear @danial how do you set 'image' name for $_FILE in client side?

Navid_pdp11 Over a year ago

i am using your above sample but file is null and execution of script will halt

Robbie Smith Over a year ago

Missing a comma after url:'/upload.php'

|

user3319184 · Accepted Answer · 2014-02-17 12:51:30Z

2

I was also battling with $files being undefined - I'll take a wild guess that you are writing the html code from php and haven't escaped the $ in $files. That was my problem anyway - should be \$files.

Dan

answered Feb 17, 2014 at 12:51

user3319184

211 bronze badge

Collectives™ on Stack Overflow

Angularjs - File upload with php

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related