• We just launched and are currently in beta. Join us as we build and grow the community.

AngularJS File Preview before Upload

king diavolo

Crypto Portfolio Manager
K
K Rep
0
0
0
Rep
0
K Vouches
0
0
0
Vouches
0
Posts
90
Likes
134
Bits
0
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.

  1. <!DOCTYPE html>
  2. <html

     >
  3. <head

    >
  4. <title

    >

    AngularJS File Preview before Upload</

    title

    >
  5. <meta

     charset

    =

    "utf-8"

    >
  6. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

    rel

    =

    "stylesheet"

    >
  7. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"

    ></

    script

    >
  8. </

    head

    >
  9. <body

     ng-app=

    "app"

    ng-controller=

    "uploader"

    >
  10. <div

     class

    =

    "container"

    >
  11. <h1

     class

    =

    "page-header text-center"

    >

    AngularJS File Preview before Upload</

    h1

    >
  12. <div

     class

    =

    "row"

    >
  13. <div

     class

    =

    "col-md-3"

    >
  14. <h3

     class

    =

    "text-center"

    >

    Upload File</

    h3

    >
  15. <hr

    >
  16. <label

    >

    File:</

    label

    >
  17. <input

     type

    =

    "file"

    file-input=

    "files"

    >
  18. </

    div

    >
  19. <div

     class

    =

    "col-md-9"

    >
  20. <div

     ng-show=

    "filepreview"

    >
  21. <img

     ng-src

    =

    "{{filepreview}}"

    height

    =

    "300px"

    width

    =

    "300px"

    >
  22. <h4

    >

    Filename: {{ name }}</

    h4

    >
  23. <h4

    >

    Size: {{ size }}</

    h4

    >
  24. </

    div

    >
  25. </

    div

    >
  26. </

    div

    >
  27. </

    div

    >
  28. <script

     src

    =

    "angular.js"

    ></

    script

    >
  29. </

    body

    >
  30. </

    html

    >

angular.js

This contains our angular.js code wherein we created a directive to handle out file input for our preview.

  1. var

    app =

    angular.module

    (

    'app'

    ,

    [

    ]

    )

    ;
  2. app.directive

    (

    'fileInput'

    ,

    [

    '$parse'

    ,

    function

    (

    $parse)

    {
  3. return

    {
  4. $scope:

    {
  5. fileinput:

    "="

    ,
  6. filepreview:

    "="
  7. }

    ,
  8. link:

    function

    (

    $scope,

    element,

    attributes)

    {
  9. element.bind

    (

    "change"

    ,

    function

    (

    changeEvent)

    {
  10. $scope.fileinput

    =

    changeEvent.target

    .files

    [

    0

    ]

    ;
  11. var

    reader =

    new

    FileReader(

    )

    ;
  12. reader.onload

    =

    function

    (

    loadEvent)

    {
  13. $scope.$apply(

    function

    (

    )

    {
  14. $scope.filepreview

    =

    loadEvent.target

    .result

    ;
  15. }

    )

    ;
  16. }
  17. reader.readAsDataURL

    (

    $scope.fileinput

    )

    ;
  18. $scope.name

    =

    $scope.fileinput

    .name

    ;
  19. $scope.size

    =

    $scope.fileinput

    .size

    ;
  20. }

    )

    ;
  21. }
  22. }
  23. }

    ]

    )

    ;
  24. app.controller

    (

    'uploader'

    ,

    function

    (

    $scope,

    $http)

    {

  26. }

    )

    ;

That ends this tutorial. Happy Coding :)


Download
You must upgrade your account or reply in the thread to view hidden text.
 
You must log in or register to reply here.

452,292

323,341

323,350

R rathi
Top