DelayedPaperclip.md

delayed_paperclip and Ajax

Use delayed_paperclip to process Paperclip attachments in the background. Use Rails routes and Ajax to check when processing is done.

Live app which you can run on the fly: http://runnable.com/VR3XZVDPXUJ0k3VQ/paperclip-delayed-job (remember to run bin/delayed_jobs start before clicking the big green Run button)

STATUS: WORKING

app/models/photo.rb

class Photo < ActiveRecord::Base
  belongs_to :post, :class_name => "Forem::Post"
  
  has_attached_file :attachment,
    styles: {
      medium: {
        format: "mp4",
        streaming: true,
        processors: [:ffmpeg, :qtfaststart]
      },
      thumbnail: "70x70#"
    }

  validates_attachment :attachment, presence: true, content_type: {
    content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"]
  }

  # Check if attachment is processing with `photo.attachment_processing`

  process_in_background :attachment
end

config/routes.rb

get '/check_photo_processing/:id', to: 'photos#check_photo_processing', as: :check_photo_processing

photos_controller.rb

class PhotosController < ApplicationController
  def check_photo_processing
    @photo_status = Photo.find(params[:id]).attachment_processing
    respond_to :js
  end
end

application.js

var globalVar = {};

$.delayedJob = {
  poll: function(photo_id) {
    console.log('Ran `poll`');

    if(photo_id) {
      globalVar.photoId = photo_id;
    }
    
    setTimeout(this.request, 5000);
  },
  request: function() {
    console.log('Ran `request`');

    $.ajax({
      url: "/check_photo_processing/" + globalVar.photoId,
      type: "GET",
      success: function(){
        /*
        1. find topic id of all topics that contain .processing
        2. launch new ajax req inside here (use data-url in #topics / Topics#show)
        3. replace content with that from new html
        */
        
        //globalVar.loadingScreen.finish();
      },
      error: function() {

        // Start again

        $.delayedJob.poll();
      }
    });
  },
  addMedia: function(html) {
    console.log('Ran `addMedia`');

    $(html).prependTo($('.photos'));

    console.log('New media was added');
  }
};

views/forem/posts/_post.html.erb

<div class="photos">
  <% for photo in post.photos %>
    <% if photo.attachment_processing %>
      <p class="processing">Processing!!! Should try again in 5 sec</p>
        
      <script>
        $.delayedJob.request(<%= photo.id %>);

        var loading_screen = pleaseWait({
          logo: "assets/images/pathgather.png",
          backgroundColor: '#f46d3b',
          loadingHtml: "<div class='sk-spinner sk-spinner-wave'><div class='sk-rect3'></div></div>"
        }); 
      </script>
    <% else %>
      <%= video_tag photo.attachment(:medium) %>
    <% end %>
  <% end %>
</div>

views/forem/photos/check_photo_processing.js.erb

<!-- alert("<%= @photo_status %>"); -->

What I was looking for thank very much