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 :  AngularJS Folder Structure - Web development


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 :  vuejs Table Searching Sorting and Pagination

 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;