current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question

2 Answers 2

up vote 8 down vote

If you use https://github.com/danialfarid/angular-file-upload You can do most of those validation on the client side - but still need to check at the server side too - with javascript like checking the file size or type. Then when you call $upload.upload() it would actually 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="fname" ng-model="fname"/>
  <input type="file" ng-file-select="onFileSelect($files)" >
</div>

JS:

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

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    var file = $files[0];
    if (file.type.indexOf('image') == -1) {
         $scope.error = 'image extension not allowed, please choose a JPEG or PNG file.'            
    }
    if (file.size > 2097152){
         $scope.error ='File size cannot exceed 2 MB';
    }     
    $scope.upload = $upload.upload({
        url: upload.php
        data: {fname: $scope.fname},
        file: file,
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(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);
    }
}
?>
share|improve this answer
    
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? –  ng-js learning curve Dec 18 '13 at 7:40
1  
$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. –  danial Dec 19 '13 at 3:45
up vote 0 down vote

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

share|improve this answer
    
This is a good wild guess :) I will have to re-check this. –  ng-js learning curve Feb 19 at 22:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.