Rails 5/Ruby - Pull og:data from external URL to populate form fields when link is pasted

Question

I have a form that allows users to create a new post. The first field is a url field. I want the user to be able to paste an external url and then it pre-populate the form below with an image/title/description from the external url's open graph/meta data. Basically the same way a 'share card' is generated when you post a URL to facebook.

I've basically copied what is stated in this answer but its not working: How to pull data from URL into form with Ruby on Rails 5

I'm struggling to figure out how to resolve it and also how to add the image (I'm using paperclip gem). Here's what I've got so far

url_grabber_controller.erb

require 'mechanize'
class UrlGrabberController < ApplicationController
    def grab
        pasted_url = params.fetch("pasted_url")
        page = agent.get(pasted_url)
        title = page.title
        node = page.at("head meta[name='description']")
        description = node["content"]
        render json: {title: title, description: description}
    end
end

_form.html.erb

// Form Fields

<script>
$("#link_url").on("paste", function(e) {
 $.ajax({
  url: "/url-grabber/grab",
  data: $("#link_url").val(),
  success: function(result) {
    $("#title").val(result["title"]);
    $("#description").val(result["description"]);
  }
 });
});
</script>

routes.rb

Rails.application.routes.draw do
  get "url-grabber/grab" => "url_grabber#grab"
end

Help is greatly appreciated!

Answer 1

I eventually solved this using the Nokogiri gem. This provides a working solution but for a complete solution it needs fallback methods for sites with no og properties.

fetch_url_controller.erb

require 'open-uri'
require 'nokogiri'

class FetchUrlController < ApplicationController
  def grab
    url = params.fetch("url")
    doc = Nokogiri::HTML(open(url))

    title = doc.at('meta[property="og:title"]')['content']
    description = doc.at('meta[property="og:description"]')['content']
    img_url = doc.at('meta[property="og:image"]')['content']

    render json: {title: title, description: description, image: img_url}
  end
end

Jquery

$('#link_url').on('input', function(e) {
  var url = $('#link_url').val();
    $.ajax({
      url: "/fetch-url/grab?url="+url,
      success: function(result) {
      $('.js-share-data').html('<h1>'+result["title"]+'</h1><p>'+result["description"]+'</p><img src="'+result["image"]+'">');
  }
  });
});

routes.rb

get "fetch-url/grab" => "fetch_url#grab"