Upload HTML5 canvas to server using ASP.NET Core

On the client side, we use this method to.DataURL(). The method will method returns a data URI containing a representation of the image.

The data URI will look something like this:

Now, we can “post” the data URI to our asp.net controller. When the controller received the data, we can save it to the server using the following snippet.

First, we need to “decode” the data URI. If you notice value of data URI, it contains the mediatype and the encode type,  data:image/png;base64. We are not interested in this data so we do a split and retrieve only the base64 data.

Lastly, we open up a filestream object and use binarywriter to convert the base64 data to byte array.

That’s it! Happy coding!

 

Firebase Cloud Messaging in PhoneGap and ASP.NET core

Firebase Cloud Messaging (FCM) is the new push notification services from Google. In this post, I will show how to integrate FCM in a PhoneGap project and send push notification to devices using ASP.NET core.

Setting Up FireBase

First and foremost, we need to create an android app in Firebase. Login to https://console.firebase.google.com with your google account.

  • Select “Add Firebase to your Android App”
  • Fill up the fields in the text fields. Take note that the android package name has to be the same as your Phonegap package name. 
  • The next step is where you will find the google-services.json file. Download this file to your computer. We need this file to register our app with Firebase and in return, we will have a device token. 
  • Continue with the rest of the steps.
  • As we are sending push notifications from our server, we will require a server API and a sender ID. It’s extremely straightforward. Just click “Settings” from the app  and click on “Cloud Messaging Tab”
    Note down the values for Server key and SenderID.

So far, we have a file named google-services.json, Server key and  SenderID and we are ready to dive into PhoneGap and ASP.NET.

Setting PhoneGap

Before we continue, I will like to point that the following steps are tested on Android using Cordova cli 7.0.1, Cordova android 6.2.3 and Android SDK 25.

Setting Phonegap for push notification is such a breeze, kudos to author of cordova-plugin-fcm (https://github.com/fechanique/cordova-plugin-fcm). The instructions for setting up fcm in PhoneGap can be found at the github page. In short,

  • copy your google-services.json to your root project.
  • run
  • Now you can get your token by implementing the code below.

    The token should be sent and store in the server. I highly recommend to use onTokenRefresh method, this method will return a token every time a new token is generated.

    Before we can build our phonegap project, we need to ensure that Google Service is installed in our android SDK as shown below:

    Now, we ready to run

Sending notification to FCM from ASP.NET

Replace applicationID and senderId with the Server Key and SenderId respectively from FireBase console.

The deviceId will be the token generated from onTokenRefresh method.

 

And we are done!