king diavolo
Crypto Portfolio Manager
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
Getting Started
I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.
Creating our HTML
This contains our input file and the place where we want our preview.
angular.js
This contains our angular.js code wherein we created a directive to handle out file input for our preview.
That ends this tutorial. Happy Coding :)
Download
I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.
Creating our HTML
This contains our input file and the place where we want our preview.
- <!DOCTYPE html>
- <html
>
- <head
>
- <title
>
AngularJS File Preview before Upload</
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.4.8/angular.min.js"
></
script
>
- </
head
>
- <body
ng-app=
"app"
ng-controller=
"uploader"
>
- <div
class
=
"container"
>
- <h1
class
=
"page-header text-center"
>
AngularJS File Preview before Upload</
h1
>
- <div
class
=
"row"
>
- <div
class
=
"col-md-3"
>
- <h3
class
=
"text-center"
>
Upload File</
h3
>
- <hr
>
- <label
>
File:</
label
>
- <input
type
=
"file"
file-input=
"files"
>
- </
div
>
- <div
class
=
"col-md-9"
>
- <div
ng-show=
"filepreview"
>
- <img
ng-src
=
"{{filepreview}}"
height
=
"300px"
width
=
"300px"
>
- <h4
>
Filename: {{ name }}</
h4
>
- <h4
>
Size: {{ size }}</
h4
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- <script
src
=
"angular.js"
></
script
>
- </
body
>
- </
html
>
angular.js
This contains our angular.js code wherein we created a directive to handle out file input for our preview.
- var
app =
angular.module
(
'app'
,
[
]
)
;
- app.directive
(
'fileInput'
,
[
'$parse'
,
function
(
$parse)
{
- return
{
- $scope:
{
- fileinput:
"="
,
- filepreview:
"="
- }
,
- link:
function
(
$scope,
element,
attributes)
{
- element.bind
(
"change"
,
function
(
changeEvent)
{
- $scope.fileinput
=
changeEvent.target
.files
[
0
]
;
- var
reader =
new
FileReader(
)
;
- reader.onload
=
function
(
loadEvent)
{
- $scope.$apply(
function
(
)
{
- $scope.filepreview
=
loadEvent.target
.result
;
- }
)
;
- }
- reader.readAsDataURL
(
$scope.fileinput
)
;
- $scope.name
=
$scope.fileinput
.name
;
- $scope.size
=
$scope.fileinput
.size
;
- }
)
;
- }
- }
- }
]
)
;
- app.controller
(
'uploader'
,
function
(
$scope,
$http)
{
- }
)
;
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view hidden text.