Upload image without submitting form, works on all browsers

Ishank Gupta
If you will have a look at my old post on Uploading files/image with Ajax & Jquery, without submitting a form, you will find that this implementation does not works with Internet Explorer (IE). IE does not supports FormData, so either we can flash or the hidden iframe solution. Now flash is not the best solution as it is not installed in many browsers (and many of the mobile devices does not supports flash). So, the hidden iframe solution is best in our case. Here is how we can implement it :
 <!-- Change the target of the form to the hidden iframe -->
<form id="avatar_form" action="/welcome/upload" method="post" enctype="multipart/form-data" target="uploader_iframe">
<input id="avatar" type="file" name="avatar" size="30" />

<!-- Hidden iframe which will interact with the server, do not forget to give both name and id values same -->
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

Read more

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