Angular JS File Upload

Angular JS File Upload using ng-file-upload


Lightweight Angular JS directive to upload files using input type file or drag&drop with ajax call. Support drag&drop, paste image, progress and abort.

  • file upload progress, cancel/abort
  • file drag and drop (html5 only)
  • image paste form clipboard and drag and drop from browser pages (html5 only).
  • image resize and center crop (native) and user controlled crop through ngImgCrop. See crop sample (html5 only)
  • orientation fix for jpeg image files with exif orientation data
  • resumable uploads: pause/resume upload (html5 only)
  • native validation support for file type/size, image width/height/aspect ratio, video/audio duration, and ng-required with pluggable cusome sync or async validations.
  • show thumbnail or preview of selected images/audio/videos
  • supports CORS and direct upload of file's binary data using Upload.$http()
  • plenty of sample server side code, available on nuget
  • on demand flash FileAPI shim loading no extra load for html5 browsers.
  • HTML5 FileReader.readAsDataURL shim for IE8-9
  • available on npm, bower, meteor, nuget

html:



script:


output:



Click here to download working sample

References:

Comments

Post a Comment

Popular posts from this blog

Typeahead using Angular JS and Bootstrap

Image
Typeahead using Angular JS and Bootstrap Creating a simple type-ahead or autocomplete using Angular JS and Bootstrap. " Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input. It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. This directive works with promises, meaning you can retrieve matches using the $http service with minimal effort. " Use   bootstrap type-ahead  into the input element.  For example: In the above example uib-typeahead is a bootstrap directive, through which we retrieve data by a http request.  The typeahead-on-select  directive is used to indicate what function has to be done while selecting on the suggested result. html: script: Click here to download working sample Reference:  [1] Angular Bootstrap Ty...
Read more

Electron JS

Electron JS Why Electron? Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native  o p e r a t i n g s y s t e m o p e r a t i n g s y s t e m  APIs. This does not mean Electron is a JavaScript binding to graphical user interface  G U I G U I  libraries. Instead, Electron uses web pages as its GUI, so you can also see it as a minimal Chromium browser, controlled by JavaScript. So all the electron apps are technically web pages running in a browser that can leverage your OS APIs. Who Uses Electron? Github developed Electron for creating the text editor Atom. They were both open sourced in 2014. Electron is used by many companies like Microsoft, Github, Slack, etc. Electron has been used to create a number of apps. Following are a few notable apps − Slack desktop Wordpress desktop app Visual Studio Code Caret Markdown Editor Nylas Email App GitKraken git client ELECTRON - ...
Read more

Sorting DIV's using jQuery

Image
Sort DIVs alphabetically without destroying and recreating the content. Sort a bunch of div elements on my page with the click of a button. 1. Sort the element array with sort()[1]  2. Reattach (in their sorted state) with appendTo()[2] html :   script: Click here to download working sample Reference: [1]. sort() [2]. appendTo()
Read more