Thursday, 21 April 2016

How to Upload Your Media To Amazon S3 Programmatically?

One of the best tricks to improve performance of your website is to reduce the server load.

So how can you reduce server processing time?
If you observe closely, most of your page load time is getting consumed by images and videos of that page. Instead of keeping all resources on one server, you can put some resources such as heavy images and videos on other server. This other server will be treated as CDN server and this technique is called CDN.

This post has everything from soup to nuts about uploading media files such as video or image on Amazon S3.

What is Amazon S3?
Amazon Simple Storage Service is storage for the Internet. It is designed to make web-scale computing easier for developers.

Amazon S3 has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, fast, inexpensive data storage infrastructure that Amazon uses to run its own global network of web sites. The service aims to maximize benefits of scale and to pass those benefits on to developers.

I borrowed above definition from Amazon's official website. If you are looking for more details about it, then you can refer this link.

Enough theory, let's start some practicals...

Step-1: Installation

Install AWSSDK NuGet package from Visual Studio.



Step-2: Code Snippet

Once you install AWSSDK, you can now use Amazon S3 APIs to upload images or videos to the Amazon server. But for that you will need below three things.
  1. Amazon S3 Bucket URL
  2. Amazon S3 Access Key
  3. Amazon S3 Secret Key
In my case, I have created a dashboard screen from where user can upload any video to Amazon S3.


Here is the code to upload selected video to Amazon S3 bucket.
 protected void btnSubmit_Click(object sender, EventArgs e)
        {
            try
            {
                if (videoFile.HasFile)
                {
                    IAmazonS3 client;
                    AmazonS3Config a = new AmazonS3Config();
                    
                    using (client = AWSClientFactory.CreateAmazonS3Client(ConfigurationManager.AppSettings["AWSAccessKey"],
                           ConfigurationManager.AppSettings["AWSSecretKey"], RegionEndpoint.APSoutheast1))
                    {
                        if (ConfigurationManager.AppSettings["AmazonS3BucketName"] != null && 
                            ConfigurationManager.AppSettings["AmazonS3BucketURL"] != null)
                        {
                            string bucketName = ConfigurationManager.AppSettings["AmazonS3BucketName"];
                            string AmazonS3BucketURL = ConfigurationManager.AppSettings["AmazonS3BucketURL"];
                            PutObjectRequest request = new PutObjectRequest();
                            request.BucketName = bucketName;
                            request.CannedACL = S3CannedACL.PublicRead;
                            request.Key = videoFile.FileName;
                            request.InputStream = videoFile.PostedFile.InputStream;
                            PutObjectResponse response = client.PutObject(request);

                            Video objVideo = new Video();
                            objVideo.Title = txtTitle.Text;
                            objVideo.Description = txtDesc.Text;
                            objVideo.Url = AmazonS3BucketURL + videoFile.FileName;
                            objVideo.CategoryId = Int32.Parse(lstCat.SelectedItem.Value);
                            objVideo.IsActive = chkIsActive.Checked;
                            objVideo.Language = lstLang.SelectedItem.Value;
                            PepsiBeINUclBAL objBAL = new PepsiBeINUclBAL();
                            int i = objBAL.InsertVideoDashBoard(objVideo);
                            if (i >= 1)
                            {
                                lblMsg.Text = "Video added sucessfully";
                            }
                            else
                            {
                                lblMsg.Text = "Oops.. some error occured while submitting video.";
                            }
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                lblMsg.Text = "Oops.. some error occured while submitting video.";
            }
        }


You will get "status" property of  PutObjectResponse as OK if your media gets uploaded successfully on Amazon S3 bucket.

Step-3: AWS Key Configuration

Define all required Amazon S3 keys and URLs in web.config file, so that you can change them later on if you want.



Step-4: Amazon S3 File Browser

Finally you will be thinking how to confirm that media is successfully uploaded on Amazon S3 bucket and looking for URL of the same.

It's simple. Amazon S3 URL for the uploaded media will be like this:
AmazonS3BucketURL + "/" +  [Uploaded Media File Name]

For exanple:
https://youramazonaccountprefix.s3.amazonaws.com/video1.mp4

If you are looking for a way to browse all media files uploaded so far on your Amazon S3 bucket, then Amazon S3 Browser can help you on that. You can download Amazon S3 Browser from here


That's it!
Hope this article will give you everything to get start with Amazon S3 upload.

Wednesday, 20 April 2016

Show Animated Notification Message While Postback

Many times while inserting or deleting records, you want to show a friendly notification message to user about that action.

Unlike desktop application, you don't have facility to show such message out of the box in web. Also showing java-script alert message is out of the fashion now.

Now there is trend of BootStrap and Notify JS for such stuff. So let's see how to show animated message to user about the action performed.

Step 1:
Include JQuery and Notify.JS in your page.

<script type="text/javascript" src="/admin/common/script/jquery-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js" type="text/javascript"></script>


Step 2:

Define variable to hold the value of different actions performed by user which you will use later on to show notification message accordingly.



Now set the operation variable as per the action (e.g. "Save" or "Delete) as shown below.



Finally based on the variable you set, show notification message to user by using $.notify() function.


Whenever user will save record, below message will appear and then disappear after few seconds.



This is simple but impressive way of showing notification to user about the action performed! Isn't it?