July 11, 2019

Upload Image/File with AngularJS and PHP

In this tutorial, we going to see how to upload Image/File with AngularJS and PHP. The main advantage in the AngularJS is weightless and without reloading your web page you can do more things. As like the same without web page refresh or reload you can upload your image and file.

The process of this Image/File uploading is you can upload the Image/File in your preferable path. Here I have done with uploads folder as same like this you can create whatever folder which would you like and one more thing is you can store your Image/File name in your database using PHP. After completion of this process, you can fetch those images and preview on your web page without a refresh by using AngularJS.

If you looking for Image/File uploading with AngularJS and PHP, Here this can help you simple integration process with your project. With the help of AngularJS and PHP, we going to do the following process to execute the Image/File upload and preview.

Database

--
-- Database: `angular_tu`
--
-- --------------------------------------------------------
--
-- Table structure for table `angularjs_file_upload`
--

CREATE TABLE `angularjs_file_upload` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `angularjs_file_upload`
--

-- Database: `angular_tu`

-- --------------------------------------------------------

-- Table structure for table `angularjs_file_upload`

CREATE TABLE `angularjs_file_upload` (

`id` int(11) NOT NULL,

`name` varchar(255) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

-- Dumping data for table `angularjs_file_upload`

index.php

 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Upload Image/File with AngularJS and PHP - softAOX</title>  
           <link rel="stylesheet" href="bootstrap.min.css" />  
           <script src="angular.min.js"></script>  
           <style>
            .files input {
                outline: 2px dashed #92b0b3;
                outline-offset: -10px;
                -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
                transition: outline-offset .15s ease-in-out, background-color .15s linear;
                padding: 120px 0px 85px 35%;
                text-align: center !important;
                margin: 0;
                width: 100% !important;
            }
            .files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
                -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
                transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
            }
            .files{ position:relative}
            .files:after {  pointer-events: none;
                position: absolute;
                top: 60px;
                left: 0;
                width: 50px;
                right: 0;
                height: 56px;
                content: "";
                background-image: url(download_icon.png);
                display: block;
                margin: 0 auto;
                background-size: 100%;
                background-repeat: no-repeat;
            }
            .btn {
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            .file_list {
                border: 1px solid #eaeaea;
                height: 410px;
                overflow-y: scroll;
            }
           </style>
      </head>  
      <body align="center">  
           <br />  
           <h2>Upload Image/File with AngularJS and PHP</h2><br />  
           <br />  
           <div class="container" ng-app="saApp" ng-controller="saController" ng-init="select()">  
                <div class="col-md-offset-4 col-md-4">  
                       <div class="form-group files">
                        <label>Upload Your File </label>
                        <input type="file" file-input="files" class="form-control">
                    </div>
                </div>  
                <div class="col-md-12">  
                     <button class="btn btn-success" ng-click="uploadFile()"> Upload</button>  
                </div>  
                <div style="clear:both"></div>  
                <br/>
                <p><b>Note:</b> Once you successfully uploaded the image or file, you get automatically preview to display the image can't file</p>
               <div class="col-md-12 file_list"> 
                       <div class="col-md-3" ng-repeat="myimages in images">  
                        <img ng-src="uploads/{{myimages.name}}" width="150" height="150" style="padding:3px; border:1px solid #dcdcdc; margin:5px;" />  
                    </div>  
                </div>
           </div> 
           <script>  
               var app = angular.module("saApp", []);  
               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();  
                              });  
                         }  
                    }  
               });  
               app.controller("saController", function($scope, $http){  
                    $scope.uploadFile = function(){  
                         var form_data = new FormData();  
                         angular.forEach($scope.files, function(file){  
                              form_data.append('file', file);  
                         });  
                         $http.post('upload.php', form_data,  
                         {  
                              transformRequest: angular.identity,  
                              headers: {'Content-Type': undefined,'Process-Data': false}  
                         }).success(function(response){  
                              alert(response);  
                              $scope.select();  
                         });  
                    }  
                    $scope.select = function(){  
                         $http.get("fetch.php")  
                         .success(function(data){  
                              $scope.images = data;  
                         });  
                    }  
               });  
          </script>   
      </body>  
 </html>

100

101

102

103

104

105

106

107

108

109

<!DOCTYPE html>

<html>

<head>

<title>Upload Image/File with AngularJS and PHP - softAOX</title>

<style>

.files input {

outline: 2px dashed #92b0b3;

outline-offset: -10px;

-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;

transition: outline-offset .15s ease-in-out, background-color .15s linear;

padding: 120px 0px 85px 35%;

text-align: center !important;

margin: 0;

width: 100% !important;

}

.files input:focus{ outline: 2px dashed #92b0b3; outline-offset: -10px;

-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;

transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;

}

.files{ position:relative}

.files:after { pointer-events: none;

position: absolute;

top: 60px;

left: 0;

width: 50px;

right: 0;

height: 56px;

content: "";

background-image: url(download_icon.png);

display: block;

margin: 0 auto;

background-size: 100%;

background-repeat: no-repeat;

}

.btn {

margin: 0 auto;

display: block;

width: 300px;

}

.file_list {

border: 1px solid #eaeaea;

height: 410px;

overflow-y: scroll;

}

</style>

</head>

<br />

<h2>Upload Image/File with AngularJS and PHP</h2><br />

<br />

<label>Upload Your File </label>

</div>

<button class="btn btn-success" ng-click="uploadFile()"> Upload</button>

</div>

<br/>

<p><b>Note:</b> Once you successfully uploaded the image or file, you get automatically preview to display the image can't file</p>

</div>

var app = angular.module("saApp", []);

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();

});

}

});

app.controller("saController", function($scope, $http){

$scope.uploadFile = function(){

var form_data = new FormData();

angular.forEach($scope.files, function(file){

form_data.append('file', file);

});

$http.post('upload.php', form_data,

{

transformRequest: angular.identity,

headers: {'Content-Type': undefined,'Process-Data': false}

}).success(function(response){

alert(response);

$scope.select();

});

}

$scope.select = function(){

$http.get("fetch.php")

.success(function(data){

$scope.images = data;

});

}

});

</script>

</body>

</html>

upload.php

<?php  
 $connect = mysqli_connect("localhost", "root", "", "angular_tu");  
 if(!empty($_FILES))  
 {  
      $path = 'uploads/' . $_FILES['file']['name'];  
      if(move_uploaded_file($_FILES['file']['tmp_name'], $path))  
      {  
           $insertQuery = "INSERT INTO angularjs_file_upload(name) VALUES ('".$_FILES['file']['name']."')";  
           if(mysqli_query($connect, $insertQuery))  
           {  
                echo 'File Uploaded Successfully';  
           }  
           else  
           {  
                echo 'File Uploaded But Not Saved';  
           }  
      }  
 }  
 else  
 {  
      echo 'Error';  
 }  
 ?>

<?php

$connect = mysqli_connect("localhost", "root", "", "angular_tu");

if(!empty($_FILES))

{

$path = 'uploads/' . $_FILES['file']['name'];

if(move_uploaded_file($_FILES['file']['tmp_name'], $path))

{

$insertQuery = "INSERT INTO angularjs_file_upload(name) VALUES ('".$_FILES['file']['name']."')";

if(mysqli_query($connect, $insertQuery))

{

echo 'File Uploaded Successfully';

}

else

{

echo 'File Uploaded But Not Saved';

}

else

{

echo 'Error';

}

fetch.php

<?php  
 $connect = mysqli_connect("localhost", "root", "", "angular_tu");  
 if(!empty($_FILES))  
 {  
      $path = 'uploads/' . $_FILES['file']['name'];  
      if(move_uploaded_file($_FILES['file']['tmp_name'], $path))  
      {  
           $insertQuery = "INSERT INTO angularjs_file_upload(name) VALUES ('".$_FILES['file']['name']."')";  
           if(mysqli_query($connect, $insertQuery))  
           {  
                echo 'File Uploaded Successfully';  
           }  
           else  
           {  
                echo 'File Uploaded But Not Saved';  
           }  
      }  
 }  
 else  
 {  
      echo 'Error';  
 }  
 ?>

<?php

$connect = mysqli_connect("localhost", "root", "", "angular_tu");

if(!empty($_FILES))

{

$path = 'uploads/' . $_FILES['file']['name'];

if(move_uploaded_file($_FILES['file']['tmp_name'], $path))

{

$insertQuery = "INSERT INTO angularjs_file_upload(name) VALUES ('".$_FILES['file']['name']."')";

if(mysqli_query($connect, $insertQuery))

{

echo 'File Uploaded Successfully';

}

else

{

echo 'File Uploaded But Not Saved';

}

else

{

echo 'Error';

}

Preview & Download

Image Upload JavaScript jQuery

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Upload Image/File with AngularJS and PHP

Share:

Database

index.php

upload.php

fetch.php

Preview & Download

Mraj

Don't miss on latest updates