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

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


  <title>Angularjs File or Image Uploading</title>
  <a href=""></a>

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

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

	    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
			  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


	      $scope.myfileupload = function(element) {

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

		    var fdread = new Filefdread();

		    fdread.onload = function(event) {

		      $scope.filedata_source =

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

		        $scope.files = element.files;



READ :  Vuejs Add Remove Class to Active Element


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


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

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

include libs

  <title>Angularjs Simple file or Image Uploading Example</title>
  <a href=""></a>

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


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(){
                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);
         $, filedcontent, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined,'Process-Data': false}
            console.log("Data Success");
            console.log("error display");

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

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

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



READ :  Angularjs Dynamic Dropdown Menu using json

 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;