flox1an / angular-profile-picture-upload-example

Angular 4 example to create a drag and drop file upload for profile pictures based on ng2-file-upload

Angular Profile Picture Upload Example

This is a small example on how to use the ng2-file-upload module to add a profile image with drag and drop capability.

• Angular 4
• ng2-file-upload
• File upload through drag and drop
• File upload through click and file selector

This example is not fully working without a service that stores images. This service is not included. The code is meant to be taken as a reference and built upon.

Screenshots

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

angular-profile-picture-upload-example's Issues

Unexpected end of JSON input

core.js:1427 ERROR SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at eval (profile-picture.component.ts:31)
at SafeSubscriber.schedulerFn [as _next] (core.js:4351)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:239)
at SafeSubscriber.next (Subscriber.js:186)
at Subscriber._next (Subscriber.js:127)
at Subscriber.next (Subscriber.js:91)
at EventEmitter.Subject.next (Subject.js:56)
at EventEmitter.emit (core.js:4319)
at XMLHttpRequest.xhr.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (file-uploader.class.js:295)