Angular Multiple File Upload with PHP and MySQL

Previously we have published tutorial to Upload Multiple Images using jQuery, PHP & MySQL and get huge response from our readers. Many of our users requested to also publish tutorial to upload multiple images with AngularJS.

So in this tutorial you will learn about Angular multiple file upload with PHP and MySQL. The tutorial handled in easy steps with live demo and link to download demo source code. In this tutorial we will upload images to server in a folder and also insert into MySQL database table. We will fetch uploaded images from database table and display uploaded images gallery.

Also, read:

As we have covered this tutorial with live demo to upload multiple images with AngularJS, PHP and MySQL, so the file structure for this example is following.

index.php
angular_upload.js
image_upload.php
show_images.php

Steps1: Create MySQL Database Table
First we will create MySQL database table images using below query to insert uploaded images records.

CREATE TABLE `images` (
`id` int(11) NOT NULL,
`file_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Include Bootstrap and Angular Files
In this example we have handled design with Bootstrap and image upload functionality using AngularJS, so we will include Bootstrap and AngularJS files.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Steps3: Create File Upload Form
Now we will create Angular file upload form in index.php file.

<div class="container" ng-app="galleryapp" ng-controller="uploadController" ng-init="show_images()">
<h2>Angular File Upload with PHP and MySQL</h2>
<br>
<div class="row" >
<div class="col-md-6">
<input type="file" file-input="files" multiple />
<br>
<button class="btn btn-info" ng-click="uploadImage()">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3" ng-repeat="image in uploaded_images">
<img ng-src="upload/{{image.file_name}}" width="200" height="200" class="show_images" />
</div>
</div>
</div>

Steps4: Handle Antgular File Upload
In angular_upload.js file, we will create custom Angular directive uploadImage to upload multiple file to the server by making Ajax request to image_upload.php. We will use file data and append into form data object to send to the server using Ajax request to PHP script. We have also created show_images() function for fetching uploaded images from MySQL database and display on page load or when images uploaded by making Ajax request to show_images.php.

var gallery_app = angular.module("galleryapp", []);
gallery_app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
gallery_app.controller("uploadController", function($scope, $http){
$scope.uploadImage = function(){
var form_data = new FormData();
angular.forEach($scope.files, function(file){
console.log(file);
form_data.append('file[]', file);
});
$http.post('image_upload.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
alert(response);
$scope.show_images();
});
}
$scope.show_images = function(){
$http.get("show_images.php")
.success(function(data){
$scope.uploaded_images = data;
});
}
});

Steps5: Handle Multiple Images Upload at Server End
Now in image_upload.php, we will handle multiple images upload to server and also insert uploaded images details into MySQL database table.

<?php
include_once("db_connect.php");
foreach($_FILES['file']['name'] as $key=>$val){
$upload_dir = "upload/";
$upload_file = $upload_dir.$_FILES['file']['name'][$key];
$filename = $_FILES['file']['name'][$key];
if(move_uploaded_file($_FILES['file']['tmp_name'][$key],$upload_file)){
$insert_sql = "INSERT INTO images(file_name) VALUES ('".$filename."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
}
echo 'File uploaded and saved in database successfully.';
?>

Steps6: Display Upload Images
Now finally in show_images.php, we will fetch uploaded images from MySQL database table images and return as JSON response to display on page.

<?php
include_once("db_connect.php");
$sql = "SELECT file_name FROM images ORDER BY id DESC";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$total_records = '';
while($record = mysqli_fetch_array($resultset)) {
$total_records[] = $record;
}
echo json_encode($total_records);
?>

Latest Tutorials

Popular Tags