Using embedded ruby in application.js

Question

I'm following the Heroku image upload tutorial which includes the following code in application.js -

fileInput.fileupload({
      fileInput:       fileInput,
      url:             '<%= @s3_direct_post.url %>',
      type:            'POST',
      autoUpload:       true,
      formData:         <%= @s3_direct_post.fields.to_json.html_safe %>,
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
      replaceFileInput: false
    });

...you can see that formData: does not have quotes around the erb - this is causing a javascript error when I deploy the code - SyntaxError: Unexpected token '<'

That erb should be in quotes, right? Any comment greatly appreciated.

Yes. But worse than that, application.js is a static file (or rather 'quasi-static' because of the asset pipeline) and it won't be processed by erb. So even if you don't have JS syntax errors, it isn't gonna work. — Marek Lipka
– Marek Lipka, Commented Feb 5, 2015 at 10:11
I've solved the immediate problem by pasting the code into /assets/javascripts/somejavascriptfile.js.erb- it's left me with other bugs, but this first one is solved, thank you. — dan
– dan, Commented Feb 5, 2015 at 12:44

BroiSatse · Accepted Answer · 2015-02-05 10:20:32Z

1

Don't do that - it might work in development, but will break in production as default production configuration assumes all the assets are precompiled and are served by the server. This obviously can be changed, but might cause some performance issues.

If you need to pass any data from your controller to your javascript, use gon gem:

controller:

gon.fileUpload = {
  url: @s3_direct_post.url,
  data: @s3_direct_post.fields.to_json
}

Then you can use it within 100% static javascript:

fileInput.fileupload({
      fileInput:       fileInput,
      url:             gon.fileUpload.url
      type:            'POST',
      autoUpload:       true,
      formData:         gon.fileUpload.data,
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
      replaceFileInput: false
    });

Naturally you need to follow gon installation guide.

answered Feb 5, 2015 at 10:20

BroiSatse

44.8k8 gold badges63 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marek Lipka Over a year ago

I think it's not gonna work even in development - because application.js isn't an erb file, so it won't be preprocessed by erb before rendering.

BroiSatse Over a year ago

Well, what I meant was that even if he makes it work in dev. :)

dan Over a year ago

I've solved my immediate problem by moving the code into a .js.erb file, but thanks for this suggestion - I'll have a look at the gon gem :)

Collectives™ on Stack Overflow

Using embedded ruby in application.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related