This tutorial is based on Image or file Upload in angular js . i am providing simple steps to image or file upload , I am assuming that you have already submitted the form using angular js, i have provided all steps in my previous tutorial
Now follow these steps in existing one:
add input type file inside your form as following:
<p>Image/File:<br/> <input type="file" name="image" onchange="angular.element(this).scope().uploadedFile(this);" class="form-control" required > </p> <p ng-show="myform.image.$invalid && !myform.image.$pristine" class="help-block">Image/File is required.</p>
In above code we have passed a method name ‘uploadedFile’ in onchange of that input type file so need to create that function in our existing controller as following:
$scope.uploadedFile = function(element) { $scope.$apply(function($scope) { $scope.files = element.files; }); }
now we need to make some modification(related to add files and header info) and need to add transformRequest param, in our http post method as following:
$http({ url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services method: "POST", processData: false, headers: { 'Content-Type': undefined }, data : $scope.formdata, transformRequest: function (data) { var formData = new FormData(); var file = $scope.files[0]; formData.append("file_upload",file); //pass the key name by which we will recive the file angular.forEach(data, function (value, key) { formData.append(key, value); }); return formData; }, }).success(function(data, status, headers, config) { $scope.status=data.status; if($scope.status==1) { $scope.formdata=""; $scope.myform.$setPristine();//for flush all the validation errors/messages previously alert(data.message); } else { alert(data.message); } }).error(function(data, status, headers, config) { alert("Something Error in form process"); });
Now we can easily Recieve the image or file with ‘file_upload’ named field in php $_FILES array in our webservice, we need to save the file in uploads or any other folder and save its name to database as follow.
<?php if(!isset($_FILES['file_upload'])) { $response=array("status"=>0,"message"=>"File not choosen!"); print json_encode($response); exit; } $f_name=uniqid("img_").str_replace(" ","-",$_FILES['file_upload']['name']); $target_file="./uploads/".$f_name; if(!move_uploaded_file($_FILES['file_upload']['tmp_name'], $target_file)) { $response=array("status"=>0,"message"=>"File Upload Failed!"); print json_encode($response); exit; } $uploaded_file=$f_name; //now in your further code/insert query you can use $uploaded_file varriable as file name into your db //your further code here// //.....// //.....// //.....// ?>