Uploading files/image with Ajax & Jquery, without submitting a form

Ishank Gupta
Here is the code for uploading an image or file without submitting a form with Ajax. For this we will create object of FormData class and will append the properties of the file field in a attribute of FormData object, finally we will set the FormData object with the data key of ajax method of JQuery.
 <input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
 $(document).on("click", "#upload", function() { var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field var form_data = new FormData(); // Creating object of FormData class form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data form_data.append("user_id", 123) // Adding extra parameters to form_data $.ajax({ url: "/upload_avatar", dataType: 'script', cache: false, contentType: false, processData: false, data: form_data, // Setting the data attribute of ajax with file_data type: 'post' }) })...
Read more

Upload files in Amazon S3 with Paperclip and Rails 4

Ishank Gupta
Here is a clean approachto set the configuration of model to upload images in Amazon S3 server with paperclipin Ruby on Rails. We need following gems in out Gemfile
gem 'paperclip' gem 'aws-sdk'
In the config folder create a file called config/api_config.ymlwhere youset up yourbucket name, amazon access key and access secret in the file.
 development: amazon_bucket_name: demo-dev amazon_access_key: XXXXXXXXXXXXXXXXXXXX amazon_access_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx production: amazon_bucket_name: demo-prod amazon_access_key: XXXXXXXXXXXXXXXXXXXX amazon_access_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Our next step isto create a file called config/paperclip_options.yml, which will contain configurations of paperclip like styles, url, convert_options, etc
 common: &default_settings :access_key_id: <%= API_CONFIG['amazon_access_key'] %> :secret_access_key: <%= API_CONFIG['amazon_access_secret'] %> :bucket: <%= API_CONFIG['amazon_bucket_name']...
Read more

HTML5 and CSS3

Ishank Gupta

HTML5 is a revision of the standard HTML technology. It contains new elements and support for various types of multimedia content while keeping it simple. It provides features that are required in common. It contains enhanced processing models and specialized programming interfaces for enabling access to complex applications. The new additions make it an option for cross platform mobile applications. The Document Object Model is a part of the specification.

The new elements in HTML5 are -
<aside>, <bdi>, <details>, <dialog>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <menuitem>, <meter>, <nav>, <progress>, <section>, <summary>, <time>, <rp> (defines what to show in browsers that do not support ruby annotations), <rt>(defines an explanation/pronunciation of characters (for East Asian typography), <ruby>(defines a ruby annotation (for East...
Read more

Ruby on Rails - A killer app for Ruby

Ishank Gupta

Ruby on Rails is an open source framework making it easier to develop, deploy, and maintain web applications. The framework is designed in Ruby. Rails was created by David Heinemeier Hansson in 2005 with subsequent updates being made upon.

Professional developers wanted to feel that the applications they were developing were designed and implemented using modern, professional techniques. So, these developers opted Rails and discovered it wasn’t just a tool for hacking out sites. Subsequently, Rails has undergone the transformation from being a popular framework to a dynamic fully-functional system. Rails has turned into a primary choice with a diverse set of developers working on the framework.

Rails applications are implemented using the Model-View-Controller (MVC) architecture but Rails takes MVC further: when you develop in Rails, you start with a working application, there’s a place for each piece of code, and all the pieces of your application interact in a standard way. Best...

Read more