AngularJS Progress Bar using PHP MySQLi

AngularJS Progress Bar using PHP MySQLi

In this Post We Will Explain About is AngularJS Progress Bar using PHP MySQLi With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular Progress Bar with PHP/MySQLi Example

In this post we will show you Best way to implement File Upload Progress Bar with AngularJS and PHP MySQLi, hear for Create Simple Progress bar using AngularJS with PHP MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Creating simple Database

First, we’re going to create simple database.

1. First of all Open your phpMyAdmin in Xampp or wampp server.
2. and then Click your databases, here simple create a new database and name it as live24u.
3. Now Lastly making a database, trigger the SQL and here simple copy-paste the below scripts.

CREATE TABLE `upload` (
  `fileuploadId` int(11) NOT NULL AUTO_INCREMENT,
  `filepath` varchar(150) NOT NULL,
  `new` varchar(150) NOT NULL,
  `type` varchar(10) NOT NULL,
PRIMARY KEY(`fileuploadId`)


After that, It is simple index.php main Files which contains simple upload HTML form and simple uploaded or Move files table.

Also Read :   SQL INNER JOIN Multiple Tables example

<!DOCTYPE html>
<html >
	<title>Simple AngularJS Progress Bar using PHP with MySQLi</title>
	<meta charset="utf-8">
	<!-- bootstrap.min.css Devloped by free download examples -->
<link href="" rel="stylesheet">
<!-- angular.min.js Devloped by free download examples -->
<script src=""></script>
<body ng-app="liveApp" ng-controller="liveProgressCtrl" ng-init="getData()">
<div class="live24 container">
	<h1 class="live page-header text-center">AngularJS simple Progress Bar using PHP with MySQLi Example</h1>
	<div class="live row">
		<div class="live col-md-3">
			<h3 class="live text-center">Upload Image/File-s</h3>
			<input type="file" file-input="files" multiple>
			<button class="live btn btn-success" ng-click="upload()"><span class="live glyphicon glyphicon-download-alt"></span> Upload</button>
			<progress id="progress" max="100" value="{{myProgressBar}}" ng-show="displayProgressBar" style="height:29px; width:100%; margin-top:29px;"></progress>
			<div class="live text-center">{{liveCounterProgress}}</div>
			<div ng-show="error" class="alert alert-danger text-center" style="margin-top:29px;">
				<button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
				<span class="live glyphicon glyphicon-remove"></span> {{ msgError }}
			<div ng-show="success" class="live alert alert-success text-center" style="margin-top:29px;">
				<button type="button" class="live close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
				<span class="live glyphicon glyphicon-check"></span> {{ msgSuccess }}
		<div class="col-md-9">
			<table class="live table table-bordered">
					<th>Main Images or FileName</th>
					<th>Generate FileName</th>
					<th>File/Images Type</th>
					<th>File/Images Location</th>
					<tr ng-repeat="fileimg in fileUploads">
						<td>{{ fileimg.filepath }}</td>
						<td>{{ }}</td>
						<td>{{ fileimg.type }}</td>
						<td>upload/{{ }}</td>
<script src="main.js"></script>


It is Data contains simple main.js source codes.

Also Read :   PHP Ajax dynamic Progress Bar for PHP AJAX File Upload

var liveApp = angular.module('liveApp', []);
app.directive('fileInput', ['$parse', function ($parse) {
	return {
		//angular file upload Directive
		restrict: 'A',
		link: function($scope, elm, param){
			elm.bind('change', function(){ //angular bind function
				$parse(param.fileInput).assign($scope, elm[0].files);
liveApp.controller('liveProgressCtrl', function($scope, $http){
	$scope.displayProgressBar = false;
	$scope.error = false;
	$scope.msgError = "";
	$scope.success = false;
	$scope.msgSuccess = "";
	$scope.upload = function(){
		var liveForm = new FormData();
		angular.forEach($scope.files, function(file){
			liveForm.append('file[]', file);
		$'do_upload.php', liveForm, {
			transformRequest:angular.identity,  //angular request
			headers: {'Content-Type':undefined, 'Process-Data': false}, //pas headers
			uploadEventHandlers: {
		        progress: function (e) {
		                  if (e.lengthComputable) {
		                  		$scope.displayProgressBar = true;
		                     	$scope.myProgressBar = (e.loaded / * 100;
		                     	$scope.liveCounterProgress = $scope.myProgressBar.toFixed(2) + ' %';
				$scope.error = true;
				$scope.msgError = results.message;
				$scope.success = true;
				$scope.msgSuccess = results.message;
	$scope.getData = function(){
			$scope.fileUploads = data;
	$scope.clearMessage = function(){
		$scope.error = false;
		$scope.msgError = "";
		$scope.success = false;
		$scope.msgSuccess = "";


It is simple PHP source code api/code that /retrive simple uploaded Images/files.

	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_DATABASE_PASSWORD', 'live24u');
	$recOput = array();
	$mysql_query = "SELECT * FROM upload";
		$recOput[] = $drow;
	echo json_encode($recOput);


In Last step, It is simple PHP source code/api in uploading simple Images/files.

	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_DATABASE_PASSWORD', 'live24u');
	$outpur_res = array('error' => false);
		$total_count = count($_FILES['file']['name']);
		foreach ($_FILES['file']['name'] as $key => $livefilename){
			$gen_file_name = time() . "_" . $livefilename;
			$file_ext = strtoupper(pathinfo($livefilename, PATHINFO_EXTENSION));
			$path = 'upload/' . $gen_file_name;
			if(move_uploaded_file($_FILES['file']['tmp_name'][$key], $path)){
				$mysql_query = "INSERT INTO upload (filepath, new, type) VALUES ('$livefilename', '$gen_file_name', '$file_ext')";
				if($total_count > 1){
					$outpur_res['message'] = 'Files/Images Uploaded Successfully Good Luck!';
					$outpur_res['message'] = 'Files/Images Uploaded Successfully Good Luck!';
				$outpur_res['error'] = true;
				$outpur_res['message'] = 'Files/Images Uploaded but not Saved';
		$outpur_res['error'] = true;
		$outpur_res['message'] = 'Upload Files/Images Failed. Sorry File empty!';
	echo json_encode($outpur_res);

IMP Note:

You can YOUR SERVER SIDE increase upload size of your any xampp or wampp sever localhost by setting config the value of increase upload_max_file-size as well as execution time Like as post_max_size in your server xampp or wampp php.ini. after that, restart your local host server to this file save some your changes.

Also Read :   Angularjs form ng-submit example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me Feed Back.
More Details……
Angularjs Example


I hope you have Got What is File Upload Progress Bar with AngularJS and PHP MySQLi And how it works.I would Like to have Feed Back From My Blog( readers.Your Valuable Feed Back,Any Question,or any Comments about This Article( Are Most Always Welcome.