Geek Answers Handbook

Angularjs - Upload a file using php

I spent several days searching for a fairly simple integration of the angularjs file upload method, which includes the main side of the php server script ..

I need a simple form for one field and file uploads.

All the examples I find are either heavily dependent on jQuery, or if they seem like something I can use, their “examples” are completely obscure and messy.

These two examples (if I could figure out how to include it in PHP) could solve my riddle.

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

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

Can anyone bring me more light. I would really like to see one input file and one file upload with the simplest angular and php code, if such a thing exists somewhere.

I would be happy to implement this http://twilson63.imtqy.com/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 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 can I approach this (purely)? What should my controller and customized html look like?

+6
source share
2 answers

If you use ng-file-upload, you can do most of this client-side pre-validation, for example, checking the size or file type using the ngf-max-size or ngf-pattern directives.

Upload.upload() will send a POST multipart / form-data request to the server, so $_FILES['file'] must contain the downloaded 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); } } ?>
+20
source

I also fought with $ files undefined - I think you are writing html code from php and do not avoid $ in $ files. In any case, this was my problem - there should be \ $ files.

Dan

+2
source

More articles:


All Articles