AWS S3 – Pre-signed URL uploads

RUBY (create a pre-signed & public url from server side)

s3 = Aws::S3::Resource.new
obj = s3.bucket('bucket-name').object('files/hello.text')

put_url = obj.presigned_url(:put, acl: 'public-read', expires_in: 3600 * 24, content_type: 'multipart/form-data')
#=> "https://bucket-name.s3.amazonaws.com/filesp/hello.text?X-Amz-..."

obj.public_url
#=> "https://bucket-name.s3.amazonaws.com/files/hello.text"

You can fetch pre-signed URL from server side either directly while landing on the page or via AJAX. Preferred method is do a AJAX to server side with the param (filename) and in the server generate a pre-signed url using file name and time-stamp. 

JAVASCRIPT (Trigger a PUT call to AWS S3 using pre-signed url)

$.ajax( {
    url: url, //presinged-url which you get from server side
    type: 'PUT',
    data: file,
    processData: false,
    contentType: false,
    headers: {'Content-Type': 'multipart/form-data'},
    success: function(){
        console.log('Image successfully uploaded. Now the object (image/pdf/text/whatever-it-is now can be downloaded using public url received from server side');
    }
    error: function(){
        console.log('Something went wrong');
    }
});

ADD CORS ON AWS S3 (do this only for a particular bucket, avoid doing it globally)

    
 <CORSConfiguration>
 <CORSRule>
 <AllowedOrigin>*.mydomain.com</AllowedOrigin>
 <AllowedMethod>PUT</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>Content-*</AllowedHeader>
 <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
    
Advertisements

Drag & Drop Functionality for sorting a list on Ruby On Rails…

There is an easy way of implementing drag and drop sorting functionality in RoR with the help of ‘dragdrop.js’. Here is the steps :-

Consider i’m dealing with the movie application, and having a list of scenes(table named ‘scenes’) for a movie.

First gather the list of scenes in controller :- (scenes_controller.rb)

def list
@scenes=Scene.find :all
end

Note : For doing this sorting you need to have a field named ‘position’ in the appropriate table. for eg, here i have a ‘position'(integer type) field in ‘scenes’ table.

Include your drag and drop script file either in view file (list.html.erb) or in your layout
<%= javascript_include_tag ‘dragdrop.js’ %>

In view file :- (list.html.erb)

<% for scene in @scenes %>
<span>[drag]</span>
<%= scene.scene_title %><br /><br />
<% end %>
<%= sortable_element(“scenes”, :url => sort_scenes_path, :handle => “handle”) %>

Note : Here ‘scenes’ is the name of the params to be passed, and sort_scenes_path will go to the method named ‘sort’ on scenes_controller.rb

Back in controller :- (scenes_controller.rb)

def sort
params[:scenes].each_with_index do |id, index|
Scene.update_all([‘position=?’, index+1], [‘id=?’, id])
end
render :nothing => true
end

That’s it. You have done.

Lightbox in rails

Using a lightbox in rails is just a few steps.

Download lightbox.js and lightbox.css (or) control.modal.js and control_modal.css, which will be available if you search in any search engine. Copy the js file to your javascripts folder in the app and copy the css file to your stylesheets folder.

Then do the following code in your view file

<%= javascript_include_tag ‘prototype.js’, ‘lightbox.js’%>
<%= stylesheet_link_tag ‘lightbox’%>

<span id=”lightbox”><a id=”call” href=”<%= new_personal_path %>”>Click Here to Add a New Employee’s Personal Detail</a></span>
<script>new lightbox($(‘call’), {className:’lightbox_container’});</script>

if you use control.modal.js instead of lightbox.js then do this

<%= javascript_include_tag ‘prototype.js’, ‘control.modal.js’%>
<%= stylesheet_link_tag ‘control_modal’%>

<span id=”Control.Modal”><a id=”call” href=”<%= new_personal_path %>”>Click Here to Add a New Employee’s Personal Detail</a></span>
<script>new Control.Modal($(‘call’), {className:’lightbox_container’});</script>

Making a ajax request from rails

Making a AJAX request in rails is pretty simple. Just follow the below example. It will take you to the particular  method (ex.., todo_fix method in the rooms controller) as used in my example. Then in controller you can perform your operation and do the render part.

In View File

Sample Rails code

<% todo_item=TodoItem.find(:first) %>

<a href=”javascript:call_this(<%= todo_item.id %>);”>Add a New To-Do Item</a>

JavaScript function in the same file

<script>
function call_this(a)
{
var url = “/rooms/todo_fix”;
var pars = “new_todo=” + a;
var target = ‘idresult’;
var myAjax = new Ajax.Updater(target,url, {method: ‘post’,parameters: pars});
}
</script>

Ajax Request in Rails 2 & Rails 3

AJAX request from anchor tag

Rails 2
<a href="#" onclick="new Ajax.Request('/comments/1', {asynchronous:true, evalScripts:ture, method:'delete'}); return false;">Destroy</a>

Rails 3
(unobstrusive JavaScript in Rails 3) 
<a href="/comments/1" data-remote="true" data-method="delete">Destroy</a>

Scrolling automatically to some part of the link when clicking the anchor tag in html and rails

<div align=”center”>
<table border=”1″ cellspacing=”1″ width=”500″ id=”table1″>
<tr>
<td>
<div align=”left” id=”top”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100″ id=”table2″>
<tr>
<td><a href=”#home”>HOME</a></td>
</tr>
<tr>
<td><a href=”#about”>ABOUT</a></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height=”500″ valign=”top”><span id=”home”>HOME AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
<td valign=”top” height=”700″><span id=”about”>ABOUT AREA</span>
<a href=”#top”>Go Top</a></td>
</tr>
<tr>
</table>
</div>
$(document).ready(function(){
$(“.scroll”).click(function(event){
//prevent the default action for the click event
event.preventDefault();

//get the full url – like mysitecom/index.htm#home
var full_url = this.href;

//split the url by # and get the anchor target name – home in mysitecom/index.htm#home
var parts = full_url.split(“#”);
var trgt = parts[1];

//get the top offset of the target anchor
var target_offset = $(“#”+trgt).offset();
var target_top = target_offset.top;

//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
});