jquery fileupload rails s3 shrine image upload error

I am sort of new to rails and I am trying to upload images directly to S3 with Shrine. I got direct uploads to S3 to work perfectly, however, when I introduced jquery file upload and upload an image, chrome console throws this error at me. I'm not sure what I'm doing wrong and I can't seem to find a solution anywhere online. I get that it's a presign error and it's probably not finding the cache link but I don't know how to resolve that.

EDIT: This was solved by including the presign code in the Routes file and altering the storage location in the uploads.js to the correct location. Now, however, I have an issue with the files being rolled back when they attempt to upload.

I'm using the cloud based ide C9,

This is my uploads.js file:

$(document).on("turbolinks:load", function(){
$("[type=file]").fileupload({
  add: function(e, data) {
      console.log("add", data);
      data.progressBar = $('<div class="progress"><div class="determinate" 
style="width: 70%"></div></div>').insertBefore("form")
      var options = {
          extension: data.files[0].name.match(/(\.\w+)?$/)[0], //set the 
file extention
         _: Date.now() //prevent caching
      };

      $.getJSON("/autos/upload/cache/presign", options, function(result) {
          console.log("presign", result);
          data.formData = result['fields'];
          data.url = result['url'];
          data.paramName = "file";
          data.submit()
      });

  },
  progress: function(e, data) {
  console.log("progress", data);
  var progress = parseInt(data.loaded / data.total * 100, 10);
  var percentage = progress.toString() + '%'
  data.progressBar.find(".progress-bar").css("width", 
percentage).html(percentage);
  },
  done: function(e, data) {
  console.log("done", data);
  data.progressBar.remove();


  var image = {
    id:       data.formData.key.match(/cache\/(.+)/)[1], // we have to 
remove the prefix part
    storage:  'cache',
    metadata: {
      size:      data.files[0].size,
      filename:  data.files[0].name.match(/[^\/\\]+$/)[0], // IE return full 
path
      mime_type: data.files[0].type
    }
  }
  form = $(this).closest("form");
  form_data = new FormData(form[0]);
  form_data.append($(this).attr("name"), JSON.stringify(image))

  $.ajax(form.attr("action"), {
    contentType: false,
    processData: false,
    data: form_data,
    method: form.attr("method"),
    dataType: "json"
    }).done(function(data) {
        console.log("done from rails", data);
        });
  }
  }); 
});

My routes.rb file includes:

mount ImageUploader::UploadEndpoint => "/images/upload"

mount Shrine.presign_endpoint(:cache) => "/autos/upload/cache/presign"

I have a model which accepts these images as well as other fields called Autos, this is included in the Autos file:

include ImageUploader[:image]

My Autos Controller is:

class AutosController < ApplicationController
  before_action :find_auto, only: [:show, :edit, :update, :destroy]
  def index
    @autos = Auto.all.order("created_at DESC")
  end

  def show
  end

  def new
    @auto = current_user.autos.build
  end

  def create
    @auto = current_user.autos.build(auto_params[:auto])

    if @auto.save
      flash[:notice] = "Successfully created post."
      redirect_to autos_path
    else
      render 'new'
    end
  end

  def edit
  end

  def update
    if @auto.update(auto_params[:auto])
      flash[:notice] = "Successfully updated post."
      redirect_to auto_path(@auto)
    else
      render 'edit'
    end
  end

  def destroy
    @auto.destroy
    redirect_to autos_path
  end

  private 

  def auto_params
    params.require(:auto).permit(:title, :price, :description, :contact, :image, :remove_image)
  end

  def find_auto
    @auto = Auto.find(params[:id])     
  end
end