AngularJS File-image Upload ng-file-upload | angular-file-upload

AngularJS File-image Upload ng-file-upload | angular-file-upload

AngularJS File Upload Example & Tutorial

we have used HTML Form, CSS and AngularJS and PHP server.This Example Show to you how to upload the file using AngularJS.AngularJS $http protocols is a service that provides simple functionalities to receive all the headers (get) and send (post) method to information to a remote protocols HTTP server side send data.AngularJS File-image Upload server script ng-file-upload

index.html

  <title>Angularjs File or Image Uploading</title>
  <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a>




	<form name="form" role="form">

	  
	  
	  <br />
	  <img style="width:300px">

	</form>
	
	    var app =  angular.module('live-App',[]);
	    app.controller('liveCtrl', function($scope, $http) {
		  //create a form array
	      $scope.form = [];
		  //create a file
	      $scope.files = [];
	      $scope.myformsubmit = function() {

	      	$scope.form.image = $scope.files[0];

			//http server method post
	      	$http({
			  method  : 'POST',
			  url     : '/filedo_upload.php',
			  processData: false,
			  transformRequest: function (data) {
			      var formData = new FormData();
			      formData.append("image", $scope.form.image);  
			      return formData;  
			  },  
			  data : $scope.form,
			  headers: {

			         'Content-Type': undefined
			  }
		   }).success(function(data){
		        console.log(data);

		   });
	      };

	      $scope.myfileupload = function(element) {

		    $scope.latestfile = element.files[0];

		    var fdread = new Filefdread();


		    fdread.onload = function(event) {

		      $scope.filedata_source = event.target.result

		      $scope.$apply(function($scope) {

		        $scope.files = element.files;

		      });
		    }
                    fdread.readAsDataURL(element.files[0]);
		  }
	    });
	

filedo_upload.php

SETUP THE PROJECT STRUCTURE

Example is working on bellow listed three things, you can see.

1.index.html
2.app.js
3.save_filedata.php

The post explains to the very easy ways to different stages involved in simple uploading a file or images on angularjs. Hope you will search it very useful.

File Upload Using AngularJS with php server script Example 2

include libs

  <title>Angularjs Simple file or Image Uploading Example</title>
  <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a>

    <div class="file-upload">
        
        
        <button>upload me</button>
    </div>

app.js

We can write our own fileUpload service to reuse it in the controller

var liveApp = angular.module('liveApp', []);

liveApp.directive('fileModel', ['$parse', function ($parse) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
   };
}]);


liveApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, fileuploadquery, name){
         var filedcontent = new FormData();
         filedcontent.append('file', file);
         filedcontent.append('name', name);
         $http.post(fileuploadquery, filedcontent, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined,'Process-Data': false}
         })
         .success(function(){
            console.log("Data Success");
         })
         .error(function(){
            console.log("error display");
         });
     }
 }]);

 liveApp.controller('liveCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

   $scope.uploadFile = function(){
        var file = $scope.filename;
        console.log('file is ' );
        console.dir(file);

        var fileuploadquery = "save_filedata.php";
        var text = $scope.name;
        fileUpload.uploadFileToUrl(file, fileuploadquery, text);
   };

}]);

save_filedata.php

 connect_error) {
        die("Connection failed: " . $conn->connect_error);
     }

     $sql_query = "INSERT INTO products (name,filename) VALUES ('".$name."','".basename($_FILES["file"]["name"])."')";

     if ($conn->query($sql_query) === TRUE) {
         echo json_encode($_FILES["file"]); // simple create new file uploaded
     } else {
        echo "Error: " . $sql_query . "<br>" . $conn->error;
     }

     $conn->close();

?>

Example