Forem: Sushil Subedi

How to Read EXIF Capture Time from HEIC/HEIF Photos in Ruby on Rails

Sushil Subedi — Sat, 11 Oct 2025 04:40:49 +0000

If you’ve ever uploaded an iPhone photo and noticed your captured_at field missing, you’re not alone.

Modern iPhones save images as HEIC/HEIF instead of traditional JPEGs. These formats store metadata a little differently and that’s where many Ruby EXIF libraries fall short.

In this post, I’ll walk you through a reliable way to read photo capture dates (DateTimeOriginal, CreateDate, etc.) from HEIC/HEIF files inside a Rails app even if you’re using Active Storage.

Quick Summary

Use ExifTool (through the mini_exiftool or exiftool gem), it works with HEIC/HEIF files directly.
You don’t need to decode or convert images (libheif or libvips) just to read metadata.
Always convert timestamps to UTC and check multiple EXIF date fields for reliability.
When using Active Storage, call blob.open to access a temporary file path for ExifTool.

Why HEIC/HEIF can be tricky

Here’s the issue in plain terms:

HEIC stores metadata inside QuickTime-style boxes, not the standard EXIF segments used by JPEG.
Most Ruby EXIF libraries (like exifr) only understand JPEG/TIFF files.
ExifTool is a Perl-based tool that can read just about anything, including HEIC/HEIF, RAW, and Live Photo sidecars.

Setup

Install the ExifTool CLI on your machine/container:

macOS (Homebrew): brew install exiftool
Debian/Ubuntu: sudo apt-get install -y libimage-exiftool-perl
Alpine: apk add exiftool

Then add one of these gems to your Gemfile:

gem 'exiftool'       # lightweight wrapper; also shells out to exiftool

And install them:

bundle install

Reading EXIF data from a file

Here’s a simple Ruby method using the exiftool gem:

require 'exiftool'

def extract_capture_time(path)
  data = Exiftool.new(path).to_hash # symbolized keys
  raw  = data[:date_time_original] ||
         data[:create_date] ||
         data[:media_create_date] ||
         data[:modify_date]
  return nil unless raw

  case raw
  when Time then raw.utc
  when DateTime then raw.to_time.utc
  else
    (Time.parse(raw.to_s) rescue nil)&.utc
  end
end

That’s it!

ExifTool takes care of all the format quirks, so this works for HEIC, JPEG, and even Live Photos.

Reading EXIF with Active Storage

When your image lives in Active Storage (e.g., S3 or Disk), just open it temporarily before reading EXIF:

def extract_capture_time_from_blob(blob)
  blob.open do |file|
    extract_capture_time(file.path) # call one of the helpers above
  end
end

This downloads the file into a Tempfile, passes its path to ExifTool, and cleans up afterward, no extra libraries required.

Normalizing `captured_at` in your models

When you save your capture time, normalize it to UTC and support multiple sources:

def normalized_captured_at(file_path: nil, client_value: nil)
  exif_time = file_path && extract_capture_time(file_path)
  client_time = begin
    case client_value
    when Time then client_value
    when DateTime then client_value.to_time
    when String then Time.iso8601(client_value) rescue Time.parse(client_value)
    end
  rescue ArgumentError
    nil
  end
  (exif_time || client_time)&.utc
end

This way, even if the photo doesn’t have EXIF data, you can still fall back to a timestamp sent from the frontend.

Troubleshooting

No DateTimeOriginal Some devices only set CreateDate or MediaCreateDate. Always try fallbacks.
Nil/empty type from browser, client uploads may send application/octet-stream. Fix on the frontend by inferring a proper MIME type from the filename before direct upload; EXIF reading itself is unaffected but downstream analyzers may behave better with the right type.
It worked for JPEG but not HEIC, ensure you’re using ExifTool, not EXIFR, for HEIC files.

References

If you’d like to make this reusable, you can wrap the logic into a small service class, ImageMetadataExtractorthat returns either a UTC Time or nil.
Once you have this in place, your app can reliably extract captured_at from any image, regardless of format. 📸

🚀 Speed Up Your Images: Complete Guide to Cloudflare CDN + Amazon S3

Sushil Subedi — Sat, 20 Sep 2025 17:50:08 +0000

So here's the thing, I had this Rails app where images were taking forever to load. Users were bouncing, my AWS bill was getting expensive, and I was serving the same set of photos from S3 over and over again to users all around the world.

After some research, I discovered that putting Cloudflare in front of my S3 bucket was basically free performance magic. Here's exactly how I did it, including the gotchas I ran into.

Why This Actually Works

Before I get into the how-to, let me quickly explain why this setup is so effective:

When you serve images directly from S3, every single request hits your bucket. A user in Tokyo requesting an image from your US-East bucket? That's a long round trip. A user refreshing the page? Another S3 request and another charge on your AWS bill.

With Cloudflare in front, images get cached at edge locations worldwide. That Tokyo user gets the image from Cloudflare's Tokyo datacenter instead of Virginia. Plus, once an image is cached, you're not paying S3 bandwidth costs for repeated requests.

What You'll Need

An AWS account with an S3 bucket (or willingness to create one)
A domain on Cloudflare (free tier works fine)
About 30 minutes

Let me walk you through each step.

Step 1: Setting Up Your S3 Bucket

First, create a new S3 bucket or use an existing one. I called mine my-app-images-2024 but you can name it whatever makes sense.

The tricky part: you need to turn off Block All Public Access.
Here's what the setting looks like:

Choose your region based on where most of your users are, or just pick the one closest to you.

Step 2: The Bucket Policy

You need to add a bucket policy to actually make the images readable. This is the JSON you need to paste in (replace my-images-bucket with your actual bucket name):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::my-images-bucket/*"]
    }
  ]
}

Go to your bucket → Permissions → Bucket Policy, paste this in, and save.
After this, you should be able to access any image in your bucket directly:

After this, you should be able to access any image in your bucket directly:

https://my-images-bucket.s3.amazonaws.com/path/to/image.jpg

Note: Test this before moving on - upload a test image and try accessing it via the URL.

Step 3: Cloudflare CNAME Setup

Now for the good stuff. In your Cloudflare dashboard:

Go to DNS
Add a CNAME record
- Set the name to something like images or cdn
Point it to your S3 bucket: my-images-bucket.s3.amazonaws.com
Make sure the cloud is orange (proxied through Cloudflare) 🟠

Now your images are accessible at https://images.yourdomain.com/path/to/image.jpg instead of the ugly raw S3 URL.

Step 4: Caching Rules (Where the Magic Happens)

This is where you actually get the performance benefits. Without proper caching rules, Cloudflare might not cache your images aggressively.

Go to Rules → Cache Rules and create a new Cache rule:

Select Cache everything Template
Edge Cache TTL: 1 month (images don't change often)
Browser Cache TTL: 7 days

URL pattern: images.yourdomain.com/*

I initially set this to cache for just a few hours, but realized that was stupid - images rarely change, so why not cache them for a month?

Step 5: Cloud Connector (Don't Skip This!)

Okay, I need to be honest - I initially thought Cloud Connector was just extra fluff, but it's actually really important. It handles the technical details that make S3 work properly with Cloudflare.

Here's what Cloud Connector does automatically:

Fixes the Host header - S3 is picky about headers, and this makes sure they match what your bucket expects
Routes traffic correctly - Makes sure requests actually reach your bucket

What it doesn't do (you still need cache rules):

Cache behavior - you still need to set up those cache rules we talked about earlier

The good news? You get 10 free connectors even on Cloudflare's free plan, which is way more than you'll need.

Go to Rule → Cloud Connector and click Create Cloud Connector:

Select AWS S3 since that's what we're using:

Now enter your bucket information. This is where you need to be precise:

Important: For the hostname pattern, use a wildcard like images.yourdomain.com/* since you'll be serving different images from various paths:

This wildcard setup ensures that whether someone requests images.yourdomain.com/user-avatars/123.jpg or images.yourdomain.com/blog-posts/hero-image.png, the connector knows exactly which bucket to route to.

Pro tip: Double-check that your bucket name matches exactly what you put in the connector. I spent 20 minutes debugging why my images weren't loading, only to realize I had a typo in the bucket name. 🤦‍♂️

Step 6: Rails Helper (If You're Using Rails)

Here's the Rails helper I wrote to make this work seamlessly with ActiveStorage:

Instead, we build URLs using the blob key and point them to our Cloudflare domain.

Here’s a helper module:

module ApplicationHelper
  include Pagy::Frontend

  def cdn_image_url(attachment_or_blob, **opts)
    blob = attachment_or_blob.is_a?(ActiveStorage::Blob) ? attachment_or_blob : attachment_or_blob&.blob
    return unless blob

    base = ENV['CDN_CLOUDFLARE_URL'].presence ||
           Rails.application.routes.url_helpers.rails_blob_url(blob, only_path: false)

    url = "#{base.chomp('/')}/#{blob.key.delete_prefix('/')}"
    return url if opts.blank?

    params = opts.slice(:width, :height, :quality, :format).map { |k, v| "#{k.to_s[0]}=#{v}" }
    "#{url}?#{params.join('&')}"
  end
end

Then in your views:

<%= image_tag cdn_image_url(user.avatar, width: 300, quality: 80, format: :webp) %>

I set the CDN_CLOUDFLARE_URL in my environment variables, so I can easily switch between development (direct S3) and production (Cloudflare CDN).

What I Learned the Hard Way

Cache headers matter. Initially, my images weren't being cached properly because I didn't set up the cache rules correctly.

The first request is still slow. That's expected - Cloudflare has to fetch from S3 the first time. After that, it's lightning fast.

ActiveStorage signed URLs don't work. If you're using Rails, you can't just use the built-in signed URLs because they have query parameters that mess with caching. That's why I built the custom helper.

Test with curl. This command helped me debug caching issues:

curl -I https://images.yourdomain.com/some-image.jpg

Look for cf-cache-status: HIT in the response headers.

Worth the Effort ?

Absolutely. This took me about 2-3 hours to set up (including debugging time), and the performance improvement was immediate and dramatic. Plus, it's basically free - Cloudflare's free tier handles this just fine for most applications.

If you're serving images directly from S3, you should definitely do this. Your users will thank you, and your AWS bill will too.

Got questions about the setup? Hit me up in the comments. I probably ran into the same issue when I was figuring this out!

References:

Create Gitlab PR Template

Sushil Subedi — Tue, 08 Feb 2022 03:51:50 +0000

For any company projects or gitlab repository we need to make sure all the processes to contribute should be standardized. So, Maintaining a proper pull request standard is an important way. It will save time, energy for you and your team members.
It also helps new team members be able to show the standard and easily onboard themselves to the team.
The best part of creating a Pull Request (Merge Request) template in Gitlab is we can update it anytime and it can be configured in just 5 steps.

Steps to create a PR template in Gitlab:

1.Create a folder .gitlab/merge_request_templates in your project root:
Navigate to your project root and create a folder name as .gitlab then we also need to add another folder inside the .gitlab as merge_request_templates.

NOTE: We need to create a .md file and name of the file should be same name of the template you want it to appear in your gitlab repository which we will see visually in the step yet to come.

We can see that I have created a file name called default.md because I want to have a template name as default.

2.Update default.md:
Now, let's update the content inside the default.md as below.

  ## Trello Card Link:

  - Link of a Trello card (we use [Trello] 
    (https://trello.com) for Project Management)  which was assigned for completing the feature.


 ## Tasks Done: (list of tasks completed)

  - What did you complete in this PR? Mention a list of them (we will see it in an example in upcoming steps below on how it is done in a real project)

 ## Tasks Remaining: (List of tasks remaining to be 
    implemented)

 - What is remaining to be implemented in this PR? Mention a 
   list of them 

 ## Steps to test feature:
 - How can we test the feature we implemented in this PR? You 
  could mentioned steps to test it.

 ## Screenshots:

  (if your changes has any UI updates, include screenshot of 
  the changes)

As I want my fellow developers to add trello card link assigned to them, add what they have completed, remaining, how can we test it and screenshots if possible.
This is the template format we use in Truemark Technology which helps the the person who is reviewing the PR know what feature they should be reviewing, link to feature description if they have any confusions and what feature is implement in this PR.

3.Commit and push:
Let's commit the code and push the change to our default branch which in our case is develop.

 > git add .
 > git commit -m "create new template"
 create new template
  1 file changed, 0 insertions(+), 0 deletions(-)
  create mode 100644 .gitlab/merge_request_templates/default.md
> git push origin develop
  Enumerating objects: 6, done.
  Counting objects: 100% (6/6), done.
  Delta compression using up to 8 threads
  Compressing objects: 100% (3/3), done.
  Writing objects: 100% (5/5), 384 bytes | 384.00 KiB/s, done.
  Total 5 (delta 1), reused 0 (delta 0), pack-reused 0
  remote: 
  remote: To create a merge request for develop, visit:
  remote: https://gitlab.com/sushilsubedi151/template- 
          react/-/merge_requests/new? 
          merge_request%5Bsource_branch%5D=develop
remote: 
To gitlab.com:sushilsubedi151/template-react.git

4.Create a new branch to verify new template:
Let's follow below steps to verify new template:

Checkout to a branch called check-template with

 git checkout -b check-template

Create a dummy file called test.txt and add some content to it with

echo "This is a test content for checking my new PR template in Gitlab" >> test.txt

Add new changes with git add . and commit those changes with

git commit -m "Added test.txt to test PR template in Gitlab"

Push your changes with

git push origin check-template

5.Create a merge request:
In this step we will breakdown the process into two smaller steps:

Choose a template:. Let's create a merge request and set the target branch to develop branch.

Note: Make sure we have set default branch as develop.

To set the default branch from master to develop, we need to follow below steps:

Let's select Repository from Settings as shown above.
Now, Let's select develop from the list of branches and click on Save Changes.

We need to create a merge request by selecting Merge Requests and click on New Merge Request.After, that we need select from the template list.

As we can see, default as our template name.

Edit the template: In this step, we will be update the selected template.

In my case, I have just updated the content of test.so, I have remove Steps to test feature, Screenshots and updated Task completed and remaining task. After this click over Create Merge Request.

✅ we have successfully create a merge request using our template.🎉🎉🎉

Conclusion:
I hope this article help to create a standard format for your team. Thank you so much for reading my blog! I really appreciate it!👏

How to rename files so that git can detect it.

Sushil Subedi — Sat, 29 Jan 2022 16:32:00 +0000

Renaming files on git can be really painful to deal with. Git is case insensitive, so we can’t rename the file and hope for them to be updated in the remote repository. It can also create all sorts of problems for yourself and your team.
Today, I will point down a step by step process to solve this particular problem.

Problem:
Let’s discuss what happen when you manually tried to rename Containers to container. Also, keep a close eye on the git lens change in sidebar.

We tried to manually change the files name from uppercase to lowercase which git wasn’t able to detect. Let's see if our remote repository also has the same naming conversion problem after we push the code.

It seems the git wasn't able to detect the case-sensitive.

Let’s see how we can solve the problem and make git detect our file changes.

Solution:
There could be multiple way we could solve case-sensitive problem and we would use two different ways to solve the problem. Let's move on to our first solution.

Using git-mv command:

git mv <your_file_name><temporary_file_name>
git mv <temporary_file_name><new_file_name>

Let's make sure we have navigated to file location before using above command.

The above command will delete the file or folder and add a new one with the same content. You can achieve the same facility by deleting the file and adding a new one with the same content. Git facilitates the process as you don't need to manually delete a file.

It will work on both folder and files cases.

Let’s use the same command on other remaining files as well.

Logo.svg to logo.svg

App.js to app.js

After renaming the above files, we should commit and push the changes to the remote repository.

Result:

We finally made the changes on the remote repository as well. And it worked!

2.Second Method:

This method will be a little different than the previous one. We are going to manually change the name but we have to add an extra symbol or letter to it. Don’t worry, I will explain it more so that you can understand how it works.

Let’s break down the process into two different steps:

A. In the first step, we are going to rename Containers to containers-1. I have renamed it containers-1, so that I will have zero confusion in the next step. Although you can rename with whatever you want, I will suggest a name with more readability.

As we could see above, git will detect the changes as a given folder Containers was deleted and another new folder containers-1 is added but reality is we only changed the name of the folder.

Let’s make the changes to other files as well App.js to app-1.js and Logo.svg to logo-1.svg

Before moving to the next step, we should commit our changes so that our changes are save in our local device.

 git add .
 git commit -m “temporary name change”

B. In this step, we will follow the same exact process but this time we rename the file to the exact name which we want. In our case, it will be containers-1 to containers. Let’s make the changes with other files as well app-1.js to app.js, logo-1.svg to logo.svg.

After you change the name, we have to commit the changes and push it to remote repository.

git add .
git commit -m “Manually changing name”
git push origin master.