Fueling Curiosity, One Insight at a Time

Handling Image Uploads with Active Storage in Rails

Active Storage simplifies file uploads in Rails by attaching files to models.

Setup: Install Active Storage and run rails active_storage:install and rails db:migrate to create necessary tables.

Model Configuration: Use has_many_attached :images to allow multiple image uploads in our model. Example:

class SomeModel < ApplicationRecord
  has_many_attached :images
end

Form: Ensure the form includes multipart: true and allows multiple file uploads with form.file_field :images, multiple: true.

Controller: Permit images in the strong parameters with images: []. Example:

def some_params
  params.require(:some_model).permit(:note, images: [])
end

Migration: Remove old image columns if switching from direct storage to Active Storage.
#CU6U0R822 #activestorage #fileupload

To logout from Keycloak using the signOut function in NextAuth, you need to override the default behavior to ensure that the user is properly logged out from Keycloak as well. Here's how you can update your signOut function:

async signOut({ token }) {
  if (token.provider === "keycloak") {
    const issuerUrl = authOptions.providers.find((p) => p.id === "keycloak")
      .options!.issuer!;
    const logOutUrl = new URL(
      `${issuerUrl}/protocol/openid-connect/logout`
    );
    logOutUrl.searchParams.set("id_token_hint", token.id_token!);
    await fetch(logOutUrl);
  }
}

#keycloak #nextauth #nextjs #js

Delegating Permissions in Pundit:

I encountered a scenario where I needed to retrieve the scope of one policy and use it within another policy. Specifically, I wanted to delegate permissions from one policy to another.

To address this issue, I learned to use Pundit's methods for manually retrieving policies and scopes:
• Retrieving a Policy

Pundit.policy(user, record)  # Returns nil if the policy does not exist
Pundit.policy!(user, record) # Raises an exception if the policy does not exist

• Retrieving a Policy Scope:

Pundit.policy_scope(user, ModelClass)  # Returns nil if the policy scope does not exist
Pundit.policy_scope!(user, ModelClass) # Raises an exception if the policy scope does not exist

These methods allowed me to delegate permissions effectively by retrieving and applying the appropriate scopes and policies

#rails #pundit #pundit-policy #authorization

Quick Tip: How can we open a PR from one repository to another repository

1. Create the branch in the current repo

git checkout -b new-branch

2. Add the destination repository as a remote.

git remote add destination https://github.com/username/destination-repo.git

3. Push the new branch to the destination repository

git push destination new-branch

4. To check all the remote repositories added, we can do:

 git remote -v

Then, we create a PR in the destination repository from the new branch. This process effectively copies the changes from the original PR into a new PR in a different repository.

#github #git

Rails templates accept any locals as arguments. However, starting from Rails 7.1, we can restrict which locals a template must accept using "Strict Locals".

// _search.html.erb

<# locals: (:url, :field_name, :placeholder) -%>

We can also set default values

<# locals: (placeholder: "Search", :url, :field_name) -%>

#rails

Detecting a mobile browser using regex.

You can use regex which returns a true or false value depending on whether or not the user is browsing with a mobile. WOW!

window.mobilecheck = function () {
  var mobileCheck = false;
  (function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        a.substr(0, 4)
      )
    )
      mobileCheck = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return mobileCheck;
};

I wonder who in the world wrote this snippet!!! :)

#javascript #browser

Ransack adds several class methods to ActiveRecord::Base for managing search and sort capabilities. These methods allow us to define which attributes, associations, and scopes are accessible through Ransack queries, thus enhancing security and control.

ransackable_attributes: Defines which model attributes can be used in Ransack searches.
For example, only the order_number, status, and business_unit fields can be used in Ransack searches.

def self.ransackable_attributes(auth_object = nil)
    %w[order_number status business_unit]
  end

ransackable_associations: Specifies which model associations are accessible for searching.
For examle, only the customer and vendor associations are allowed for searching.

def self.ransackable_associations(auth_object = nil)
    %w[customer vendor]
  end

ransortable_attributes: Lists which attributes can be used for sorting results.
In this example, sorting is allowed only by order_number and created_at

def self.ransortable_attributes(auth_object = nil)
    %w[order_number created_at]
  end

ransackable_scopes: Determines which custom scopes can be applied in searches.

#rails #ransack #search

In postgres, current_setting() function is used to get the value of a configuration parameter.

Set rls.tenant_id = 1;
SET

select current_setting('rls.tenant_id');
 current_setting
-----------------
 1
(1 row)

#postgres

Namespaces in Rails help organize our application by grouping related controllers, models, and views into separate directories. Using namespaces with scaffolding keeps our codebase structured and manageable, especially in larger applications.

Example.
rails generate scaffold Order::PurchaseOrder order_number:string business_unit:string ...

This will create files under the Order namespace, including controllers, models, and views. This approach keeps our codebase structured, with Order as a namespace, making it easier to manage related components and maintain clarity in larger applications.

app/
├── controllers/
│   └── order/
│       └── purchase_orders_controller.rb
├── models/
│   └── order/
│       └── purchase_order.rb
├── views/
│   └── order/
│       └── purchase_orders/
│           ├── _form.html.erb
│           ├── edit.html.erb
│           ├── index.html.erb
│           ├── new.html.erb
│  

#rails #namespace

Cross browser regular expression issue:

Recently I came across a regular expression that would cause the page to crash on iphone Safari browser, the regex was for obscuring email.

Problematic Regex:

const obscuredEmail = email.replace(/(?<=.1}).(?=[^@]*@)/g, '*');

Fix:

const obscuredEmail = email.replace(/(.)(?=.*@)/g, (match, p1, offset, string) => offset < string.indexOf('@') - 1 ? '*' : p1);

Lesson: Even a browser can cause browser compatibility issues.

#regex #browserCompatibility #safari #javascript