AngularJS Progress Bar with PHP/MySQLi

By CampCodes Administrator

Published on:

angular_progress

Getting Started

I’ve used Bootstrap and Angular JS in this tutorial, so you need an internet connection for them to work. Angular JS version = 1.5.7.

Creating a Database

First, we’re going to create our database.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as angular.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `upload` (
  `uploadid` int(11) NOT NULL AUTO_INCREMENT,
  `original` varchar(150) NOT NULL,
  `new` varchar(150) NOT NULL,
  `type` varchar(10) NOT NULL,
PRIMARY KEY(`uploadid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

angular js progressbar in php

index.php

Next, this is a index which contains our upload form and a uploaded files table.

<!DOCTYPE html>
<html >
<head>
    <title>AngularJS Progress Bar with PHP/MySQLi</title>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
</head>
<body ng-app="app" ng-controller="uploader" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Progress Bar with PHP/MySQLi</h1>
    <div class="row">
        <div class="col-md-3">
            <h3 class="text-center">Upload File/s</h3>
            <hr>
            <label>File:</label>
            <input type="file" file-input="files" multiple>
            <hr>
            <button class="btn btn-primary" ng-click="upload()"><span class="glyphicon glyphicon-download-alt"></span> Upload</button>
            <progress id="progress" max="100" value="{{progressBar}}" ng-show="showProgress" style="height:30px; width:100%; margin-top:30px;"></progress>
            <div class="text-center">{{progressCounter}}</div>
            <div ng-show="error" class="alert alert-danger text-center" style="margin-top:30px;">
                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                <span class="glyphicon glyphicon-remove"></span> {{ errorMessage }}
            </div>
            <div ng-show="success" class="alert alert-success text-center" style="margin-top:30px;">
                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                <span class="glyphicon glyphicon-check"></span> {{ successMessage }}
            </div>
        </div>
        <div class="col-md-9">
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Original FileName</th>
                    <th>New FileName</th>
                    <th>Type</th>
                    <th>File Location</th>
                </thead>
                <tbody>
                    <tr ng-repeat="upload in uploads">
                        <td>{{ upload.original }}</td>
                        <td>{{ upload.new }}</td>
                        <td>{{ upload.type }}</td>
                        <td>upload/{{ upload.new }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="angular.js"></script>
</body>
</html>

angular.js

This contains a angular.js codes.

READ ALSO:   Delete All Data In Table in PHP

var app = angular.module('app', []);
app.directive('fileInput', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function($scope, elm, attrs){
            elm.bind('change', function(){
                $parse(attrs.fileInput).assign($scope, elm[0].files);
                $scope.$apply();
            });
        }
    }
}]);
app.controller('uploader', function($scope, $http){
    $scope.showProgress = false;
    $scope.error = false;
    $scope.errorMessage = "";
    $scope.success = false;
    $scope.successMessage = "";
    $scope.upload = function(){
 
        var uploadForm = new FormData();
        angular.forEach($scope.files, function(file){
            uploadForm.append('file[]', file);
        });
        $http.post('upload.php', uploadForm, {
            transformRequest:angular.identity, 
            headers: {'Content-Type':undefined, 'Process-Data': false},
            uploadEventHandlers: {
                progress: function (e) {
                          if (e.lengthComputable) {
                          		$scope.showProgress = true;
                             	$scope.progressBar = (e.loaded / e.total) * 100;
                             	$scope.progressCounter = $scope.progressBar.toFixed(2) + ' %';
                          }
                }
            }
        })
        .success(function(response){
            console.log(response);
            if(response.error){
                $scope.error = true;
                $scope.errorMessage = response.message;
            }
            else{
                $scope.success = true;
                $scope.successMessage = response.message;
                $scope.fetch();
            }
        })
    }
 
    $scope.fetch = function(){
        $http.get('fetch.php')
        .success(function(data){
            $scope.uploads = data;
        });
 
    }
 
    $scope.clearMessage = function(){
        $scope.error = false;
        $scope.errorMessage = "";
        $scope.success = false;
        $scope.successMessage = "";
    }	
});

fetch.php

This is a PHP api/code that fetches a uploaded files.

<?php
    $conn = new mysqli('localhost', 'root', '', 'angular');
    $output = array();
    $sql = "SELECT * FROM upload";
    $query=$conn->query($sql);
    while($row=$query->fetch_array()){
        $output[] = $row;
    }
 
    echo json_encode($output);
?>

upload.php

Lastly, this is a PHP code/api in uploading a files.

<?php
 
    $conn = new mysqli('localhost', 'root', '', 'angular');
    $out = array('error' => false);
 
    if(!empty($_FILES['file']['name'])){
        $count = count($_FILES['file']['name']);
        foreach ($_FILES['file']['name'] as $key => $filename){
            $newFilename = time() . "_" . $filename;
 
            $ext = strtoupper(pathinfo($filename, PATHINFO_EXTENSION));
 
            $path = 'upload/' . $newFilename;
 
            if(move_uploaded_file($_FILES['file']['tmp_name'][$key], $path)){
                $sql = "INSERT INTO upload (original, new, type) VALUES ('$filename', '$newFilename', '$ext')";
                $query=$conn->query($sql);
            }
 
            if($query){
                if($count > 1){
                    $out['message'] = 'Files Uploaded Successfully';
                }
                else{
                    $out['message'] = 'File Uploaded Successfully';
                }
 
            }
            else{
                $out['error'] = true;
                $out['message'] = 'File Uploaded but not Saved';
            }
 
        }
    }
    else{
        $out['error'] = true;
        $out['message'] = 'Upload Failed. File empty!';
    }
 
    echo json_encode($out);
?>

Note: You can increase the upload size of your localhost by setting the value of upload_max_filesize and post_max_size in your php.ini. Then, restart your localhost server to save your changes.

That ends this tutorial. Happy Coding!

READ ALSO:   Update and Delete Data using VueJs in PHP
Download Code

 

 

ajax php progress bar ajax progress bar ajax progress bar bootstrap ajax progress bar php ajax progress bar with percentage ajax progress bar with percentage php angular js progressbar in php animated circular progress bar animated progress bar animated progress bar bootstrap animated progress bar html animated progress bar on scroll bootstrap 3 progress bar bootstrap 4 progress bar bootstrap animated progress bar bootstrap circle progress bar animation bootstrap draggable progress bar bootstrap dynamic progress bar example bootstrap progress bar animate bootstrap progress bar animation bootstrap progress bar animation on page load bootstrap progress bar circle bootstrap progress bar example code bootstrap progress bar example jquery bootstrap progress bar javascript bootstrap progress bar on form submit bootstrap progress bar on page load bootstrap progress bar with percentage bootstrap progress-bar bootstrap skill bar browser progress bar circle progress bar jquery bootstrap circular progress bar free download circular progress bar html circular progress bar jquery cool progress bar css create a progress bar creating progress css indeterminate progress bar css loading bar css progress bar css progress bar animation css thermometer progress bar css tricks progress bar display progress bar in php while in a loop dynamic progress bar in html dynamic progress bar in php fake progress bar javascript file upload progress bar html5 form completion progress bar jquery form progress bar codepen how to create a loading bar how to create a progress bar in html how to make a loading bar how to make a progress bar how to make progress bar in html html css progress bar html form submit progress bar html progress html progress bar html progress bar color html progress bar css html progress bar example html progress bar with text html5 progress html5 progress bar html5 progress bar animation html5 progress bar css html5 progress bar javascript html5 progress bar style html5 progress bar with text indeterminate progress bar css javascript file upload progress bar example javascript loading bar javascript progress bar javascript progress bar ajax javascript progress bar timer javascript progress bar with percentage javascript progress bar with steps javascript progress circle jquery ajax real time progress bar jquery animated progress bar jquery bootstrap progress bar jquery circular progress bar with percentage jquery circular progress bar with text counter jquery file download with progress bar jquery mobile progress bar jquery progress bar jquery progress bar ajax jquery progress bar example jquery progress bar while page loads jquery progress bar with percentage jquery progress bar with percentage ajax jquery progress bar with percentage example jquery progress circle jquery ui progress bar ajax example jquery ui progress bar color jquery ui progressbar jquery update progress bar loading bar animation loading bar css loading bar gif loading bar html loading bar in html loading bar js loading bar png loading bar svg loading progress bar make a progress bar page load progress bar jquery php ajax progress bar php progress bar php tutorials php upload progress bar php zip progress profile completion progress bar jquery progress bar progress bar android progress bar animation progress bar circle progress bar code progress bar css progress bar css example progress bar css3 animation progress bar demo progress bar design progress bar design css progress bar embed progress bar for website progress bar html progress bar html code progress bar html5 progress bar image progress bar in html progress bar in html using javascript progress bar in jsp using javascript example progress bar in php demo progress bar in php examples progress bar in php mysql demo progress bar in php source code progress bar javascript progress bar jquery progress bar jquery ui progress bar js progress bar on button click in jquery progress bar plugin progress bar plugins progress bar timer javascript progress bar website progress bar widget progress bar with percentage in php progress bars html progress element html progress js progress widget progressbar js pure css progress bar animation by css3 real time progress bar real time progress bar jquery real time progress bar php scroll indicator jquery semi circle progress bar css semi circle progress bar jquery show progress report for long-running php scripts simple css progress bar simple html progress bar simple progress bar in php status bar in html status bar javascript style progress bar svg progress bar example tracking progress bar in jquery upload progress bar php vertical progress bar jquery vertical scroll progress bar video progress bar jquery

Leave a Comment