Shrine: Heroku Internal Server Error

[jakehockey10]

Hello,

I was wondering if I could get some help getting pointed in the right direction. I am successfully using shrine to upload photos when running my server locally. Unfortunately, pushing things up to Heroku for some staging testing has shown different behavior. When I attempt to upload a file, I receive this error when I check my production logs:

Started GET "/images/upload/cache/presign?extension=.jpg&_=<numbers>
NoMethodError (undefined method `object' for nil:NilClass 
Did you mean?  object_id): 
vendor/bundle/ruby/2.3.0/gems/shrine-2.4.0/lib/shrine/storage/s3.rb:293:in `object'

I have a file in my asset pipeline named uploads.js.erb:

$(document).on('turbolinks:load', function () {
  $(document).on('new-file-input', function () {
    $('input[type=file]').fileupload({
      add: add,
      progress: progress,
      done: done
    });

    function add (e, data) {
      console.log('add', data);

      data.progressBar = $('<div class="progress" style="width: 300px"><div class="progress-bar"></div></div>').insertAfter('input[type="file"]');

      var options = {
        extension: data.files[0].name.match(/(\.\w+)?$/)[0], // set the file extension
        _: Date.now() // prevent caching
      };

      $.getJSON('/images/upload/cache/presign', options, function (result) {
        console.log('presign', result);
        data.formData = result['fields'];
        data.url = result['url'];
        data.paramName = 'file'; // Amazon S3 requires this to be 'file'
        data.submit();
      });
    }

    function progress (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);
    }

    function done (e, data) {
      console.log('done', data);

      data.progressBar.remove();

      $('<i class="fa fa-spinner fa-pulse fa-5x"></i><p>Finished uploading to S3...now processing and saving to Rails...</p>').insertAfter('input[type="file"]');

      var image = {
        id: data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix
        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
        }
      };

      var form = $(this).closest('form');
      var 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: 'script'
      }).done(function (data) {
        console.log('done from rails', data);
      });
    }
  });
});

and the new-file-input is triggered when the server responds with a js response in the form of new.js.erb:

$('.more-photos-separator').after('<%= j render 'photos/form' %>');
$(document).trigger('new-file-input');

The add function is being called when the image is chosen in the file field, but I seemingly immediately get the mentioned error serverside.

I followed the tutorial found at gorails.com, and everything works just about how I want it to locally, so I pushed to my staging app in Heroku and I don't know how to diagnose the problem.

Thank you!

[janko]

This error is because your S3 credentials are not properly set on Heroku, at least the bucket name, because it is being sent as nil to Shrine::Storage::S3.

If you're fetching your S3 credentials from environment variables, I recommend to always use ENV.fetch, so that it loudly fails if an ENV variable is missing.

# silently returns nil if variable is missing
ENV["S3_BUCKET"]

# loudly fails with a KeyError if variable is missing
ENV.fetch("S3_BUCKET")

[jakehockey10]

I'll double check the environment variables I've got set on my environment in heroku. Thanks for the suggestion

[jakehockey10]

@janko-m , I think I got passed that (you were right about the S3_BUCKET variable not being set like all the rest). However, the request is forbidden (403 response code).

I didn't open the ticket again because this seems like an S3 issue and not a Shrine issue at this point.
Here is what I'm seeing:

POST https://custom-caves-images.s3.amazonaws.com/ 403 (Forbidden)

This was after I added the CORS configuration to allow this staging origin in the S3 configuration for my bucket.

I was just hoping you could think of anything that would help me get pointed in the right direction. Thanks!

[jakehockey10]

Figured it out. Thanks for your suggestion earlier!

[uurcank]

@jakehockey10 what did you do to fix this problem, i get 403 error still

[jakehockey10]

@uurcankaya I wish I could remember. I think I was just following a tutorial on gorails.com and it ended up being something stupid-silly. I would follow the tutorial on gorails.com and just be extra careful.

I always have a lot of trouble with s3 cors configuration and rule setting. Everytime I have to go through it, they've changed the interface, changed the verbage, changed this, changed that. Eventually I hope to have an understanding of it all well enough to not have to soak myself with documentation.

Check spelling, check Heroku config, check everything. I wish I could be of more help, but this was too long ago and I don't think I have the tutorial. Good luck!

I vow to update GitHub issues with information that ends up helping me from here on out. I've been doing a good job of this ever since, and I apologize for how poorly I ended this conversation.