Ionic Framework : Simple File Upload with Associated Object Kinvey & Angularjs - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

Update January 2017 – See Updated Sample Code for Ionic2 And Kinvey Here


With Ionic Framework you can create hybrid mobile apps with the web technologies you love
Free and open source, Ionic Framework offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.

 

File Upload with Associated FileParent Object in Kinvey + Angular Ionic Framework sample application.

If you are not familiar with Ionic Framework, here is a quick start to get you moving on a excellent cross-platform HTML5 based solution. http://ionicframework.com/getting-started/

Setup Kinvey Account

if you are not familiar with Kinvey, follow the directions provided here for setting up a free account to get you started. Kinvey is a backend-as-a-service provider that integrates well with Ionic Framework

Create Test User and Proper Collections in Kinvey

http://devcenter.kinvey.com/angular/guides/users

After your account is setup, you will need to create a user account; in the code I have provided, the username and password word are “test”

You will also need to setup the proper collection to hold the objects you are creating for the test application. Open the the Kinvey Console for you application and create the “FileParent” Collection. Next click on the “Settings” button in the header and set the permissions for the collection to “Full”

Create Ionic Framework Sample Application

If you are not familiar with Ionic Framework, here is a quickstart to get you moving on a excellent cross-platform HTML5 based solution. http://ionicframework.com/getting-started/

The process in the code is to initialize Kinvey then login the user.

After the user selects a file to upload, the application detects a change in the input form element and processes the file for upload.

First the file is uploaded, and then the FileParent object is created and the File is associated with the FileParent object for saving in the backend.

http://devcenter.kinvey.com/angular/guides/files

The FileParent Object is saved to the DataStore which is different than the FileStorage for Blobs, additional information on the datastore is available here: http://devcenter.kinvey.com/angular/guides/datastore

 

<< Click Here For All Articles on Ionic Framework >>

 

Listing of Complete Ionic Framework Application: Click Here to View Full Source