10+ Angular 2 File Upload Demos

Here are some Angular 2 File Upload Demos which I’ve found to give you the best tutorials to give you a quick start with already working demos you can play around with. Following on from my previous post Top 5 File Upload AngularJS 1x Modules. Now with angularjs2 and TypeScript to put it bluntly, there is no more scope…or controllers, everything is now a module so where better to start from! And throw in ES6 as opposed to ES5 (Regular JavaScript) and you are really now cooking! I was also thinking maybe ng-upload actually exists now?

I’d love to code an AngularJS 2 module to upload files to AWS S3 buckets, stay tuned. I might integrate that into a demo video when I get the time. Might use Node.js to process the upload of the file and save to the remote server securely using Express.js (web application server framework).

1. Angular 2 File Uploader

A set of service and directives and it is designed to make your life easier when uploading files in you Angular2 apps.

Documentation Code Beginner Demo Advanced Demo

2. Angular2 File Upload Directives

Easy to use Angular2 components for files upload.

Code Demo

3. Angular File Upload Demo

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support.

Code Demo

4. File Upload Angular2 Nodejs

File upload with angular 2 and node.js

Code Article Demo

5. Angular 2 File Upload Example jQWidgets

In this demo you can browse for files and click the widget’s buttons to see how it will work in a real environment. For uploading files however, you should set the “uploadUrl” property to point to a Web Server file that will handle the actual Upload process.

Documentation and Demo

6. Angular 2 Upload Progress

Simple Angular 2 File Upload progress.

Code Demo

7. Vaadin NG2 File Upload

Vaadin upload allows you to upload multiple files with progress indication. Supports drag and drop and manual file selection.

Documentation and Demo

8. Angular 2 AWS S3 File Upload

In this article will show you how to upload files to Amazon S3 with Angular 2 and Webpack

Article

9. Alfresco Upload Component for Angular 2

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration prerequisites.

Article

10. Upload Files To Node.js Using Angular 2

This tutorial will be broken up into two parts: File uploading via the Angular 2 front-end and File receiving via the Node.js back-end

Code Article