Learning AngularJS: ng-file-upload a light-weight file upload directive for AngularJS
View this email in your browser

Learning AngularJS

If you are no longer interested in receiving the Learning AngularJS newsletter, click here to unsubscribe.
 

ng-file-upload: a directive for file uploads



I was thinking about directives the other day and how useful they are in AngularJS. They encourage us to create reusable components and widgets that can be shared across projects. If you've used jQuery plugins, you understand the value of good well-built reusable components.

Today I want to share a great little directive, ng-file-upload. It's a light-weight directive for handling file uploads which are common in forms that handle image or document uploads (such as forms for creating a profile on a site, or filling out legal documents, or submitting class assignments for school).

What I like is that it's very very simple to use and there are multiple examples of server-side/backend code for handling file uploads provided.

Here's an example of using ng-file-upload to show an image after it has been uploaded:

<form name="myForm">
  <input type="file"
         ngf-select
         ng-model="myFile"
         name="file"
         ngf-max-size="5MB"
  />
  <img ng-show="myForm.file.$valid"
       ngf-thumbnail="myFile"
  />
  <button ng-disabled="!myForm.$valid"
          ng-click="uploadFile(myFile)">
    Submit
  </button>
</form>


Check it out on Github: https://github.com/danialfarid/ng-file-upload

Happy hacking!

Rudolf
Forward
Share
Tweet
+1
Copyright © 2015 GoAugust, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp