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
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.
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
Comments