Simple Image Upload Using AngularJS/PHP

FLux112 · Thursday at 6:17 AM

In this tutorial we will create a Simple Image Upload Using AngularJs/PHP. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. By using angularjs will try also to save the image through PHP server. So Let start coding!!

Creating Database

To create database open your local server(wamp, xamp, etc...). Then create a database and name it "db_image". After that click SQL then copy/paste the code below

CREATE

TABLE

`photo`

(
`photo_

id`

int

(

11

)

NOT

NULL

,
`photo_

name`

varchar

(

255

)

NOT

NULL

,
PRIMARY KEY

(

`photo_

id`

)
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

latin1 AUTO_INCREMENT

=

3

;

Creating The Mark Up Form

This where the file type will be shown. To do that copy/paste the code below then name it "index.php"

<!

DOCTYPE html>
<

html>
<

head>
<

meta charset =

"UTF-8"

name =

"viewport"

content =

"width=device-width, initial-scale=1"

/>
<

title>

Image Upload Using AngularJs</

title>
<

link

rel =

"stylesheet"

type =

"text/css"

href =

"css/bootstrap.css"

/>
<

script src=

"js/angular.js"

>

</script>
</

head>
<

body ng-

app=

"myModule"

ng-

controller=

"myController"

>
<

nav class

=

"navbar navbar-default"

>
<

div class

=

"container-fluid"

>
<

a class

=

"navbar-brand"

href =

"https://sourcecodester.com"

>

Sourcecodester</

a>
</

div>
</

nav>
<

div class

=

"row"

>
<

div class

=

"col-md-3"

></

div>
<

div class

=

"col-md-6 well"

>
<

h3 class

=

"text-primary"

>

Simple Image Upload Using AngularJs</

h3>
<

hr style =

"boreder-top:1px dotted #000;"

/>
<

form ng-

submit=

"submit()"

name=

"form"

role=

"form"

>
<

div class

=

"form-inline"

>
<

input ng-

model=

"form.image"

class

=

"form-control"

type=

"file"

accept=

"image/*"

onchange=

"angular.element(this).scope().uploadedFile(this)"

style=

"width:400px"

>
<

button class

=

"btn btn-primary"

><

span class

=

"glyphicon glyphicon-upload"

></

span>

Upload</

button>
<

a href =

"result.php"

>

See All Upload Images</

a>
</

div>
<

br/>
<

center><

img ng-

src=

"{{image_source}}"

style=

"width:600px;"

></

center>
</

form>
</

div>
</

div>
</

body>
<

script src =

"js/app.js"

>

</script>
</

html>

Creating AngularJs Directives
This where the angularjs directive will be coded. Copy/paste the code below and name it "app.js"

var

app =

angular.module

(

'myModule'

,

[

]

)

;
app.controller

(

'myController'

,

function

(

$scope,

$http)

{
$scope.form

=

[

]

;
$scope.files

=

[

]

;
$scope.submit

=

function

(

)

{
$scope.form

.image

=

$scope.files

[

0

]

;
$http(

{
method :

'POST'

,
url :

'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
}
}

)

.then

(

function

(

data)

{
alert(

"Successfully Upload An Image!"

)

;
window.location

=

"index.php"

;
}

)

;
}

;
$scope.uploadedFile

=

function

(

element)

{
$scope.currentFile

=

element.files

[

0

]

;
var

reader =

new

FileReader(

)

;
reader.onload

=

function

(

event)

{
$scope.image_source

=

event.target

.result
$scope.$apply(

function

(

$scope)

{
$scope.files

=

element.files

;
}

)

;
}
reader.readAsDataURL

(

element.files

[

0

]

)

;
}
}

)

;

The code above processed the image data. The $scope.uploadedFile will display the image after the user selected the image to be upload.The $scope.submit function will submit the stored image selected by a user to the database server.

Creating The Upload Query
This where the file will be stored after getting the value from the input file type. To create this copy/paste the code then name it "upload.php"

<?php
if

(

!

empty

(

$_FILES

[

'image'

]

)

)

{
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"db_image"

)

or die

(

mysqli_error

(

)

)

;
$path

=

pathinfo

(

$_FILES

[

'image'

]

[

'name'

]

,

PATHINFO_EXTENSION)

;
$image

=

time

(

)

.

'.'

.

$path

;
move_uploaded_file

(

$_FILES

[

"image"

]

[

"tmp_name"

]

,

'images/'

.

$image

)

;
$conn

->

query

(

"INSERT INTO `photo` (photo_name) VALUES('$image

')"

)

or die

(

mysqli_error

(

)

)

;
}

else

{
echo

"<script>Error!</script>"

;
}
?>

The code above will now sending the image to the database server after storing the value within the input file type.

Displaying All The Stored Images
This is where images will be displayed. Copy/paste the code below and name it "result.php"

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
</div>
</nav>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<h3 class = "text-primary">Simple Image Upload Using AngularJs</h3>
<hr style = "boreder-top:1px dotted #000;"/>
<a class = "btn btn-success" href = "index.php"><span class = "glyphicon glyphicon-hand-right"></span> Back</a>
<table class = "table table-hover">
<thead>
<tr>
<th>Name<th>
<th>Image<th>
</tr>
</thead>
<tbody>
<?php
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"db_image"

)

or die

(

mysqli_error

(

)

)

;
$query

=

$conn

->

query

(

"SELECT * FROM `photo`"

)

or die

(

mysqli_error

(

)

)

;
while

(

$fetch

=

$query

->

fetch_array

(

)

)

{
?>
<tr>
<td><?php

echo

$fetch

[

'photo_name'

]

?>

</td>
<td colspan = "2"><center><?php

echo

'<img src = "images/'

.

$fetch

[

'photo_name'

]

.

'" width = "150px" height = "70px"/>'

?>

</center></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>

There you have we created a simple image upload using AngularJs/PHP. I hope that this tutorial help you to your project. For more updates and tutorials just visit this site, and don't forget to LIKE & SHARE. Enjoy Coding!!

Download

You must upgrade your account or reply in the thread to view the hidden content.

Advertise Here

Advertise Here

Advertise Here

Simple Image Upload Using AngularJS/PHP

More options

FLux112

452,499

349,821

349,831