Rails和S3直接上传-未捕获的SyntaxError：意外令牌

Question

I am running into an issue where on the Registration screen I am allowing the user to upload avatar and on the backend, I am uploading directly to S3.

But each time after upload I get

Uncaught SyntaxError: Unexpected token <

I have no clue what am I doing wrong here! Please advise.

Environment info:

ruby '2.5.0'
gem 'devise', '~> 4.4'
gem 'rails', '~> 5.1.4'
gem 's3_direct_upload', git: 'https://github.com/waynehoover/s3_direct_upload.git', branch: 'master'
gem 'fog-aws'

• I am able to upload files on S3 - YES
• I am able to see the progress bar - YES
• Code should set the value in hidden field - NOT HAPPENING
• I should see image in avatar-container - NO HAPPENING

Below is my code

(1) View: app/views/devise/registrations/new.html.erb

<div class="field">
  <%= f.hidden_field :avatar %>
  <%= s3_uploader_form callback_url: s3_upload_index_path, callback_method: "POST", callback_param: "model[image_url]", id: "s3-uploader" do %>
    <%= file_field_tag :file, multiple: false, data: { url: s3_uploader_url } %>
  <% end %>

  <div class="avatar_container" id="avatar-container"></div>
  <script id="template-upload" type="text/x-tmpl">
    <div id="file-{%=o.unique_id%}" class="upload">
      {%=o.name%}
      <div class="progress"><div class="bar" style="width: 0%"></div></div>
    </div>
  </script>

  <div class="js-progress-bars-image"></div>
</div>

(2) JS: /app/assets/javascript/signup.js

s3_direct_upload = {
  init: function() {
    return this.image_s3_bind();
  },
  image_s3_bind: function() {
    $('#s3-uploader').S3Uploader({
      progress_bar_target: $('.js-progress-bars-image'),
      allow_multiple_files: false,
      before_add: function(file) {
        var type_reg;
        type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/;
        if (type_reg.test(file.type)) {
          return true;
        } else {
          alert('This file type is unsupported.');
          return false;
        }
      }
    });
    $('#s3-uploader').bind('s3_upload_failed', function(e, content) {
      alert(content.filename + ' failed to upload with error: ' + content.error_thrown);
    });
  }
};

$(document).on('turbolinks:load', function() {
  $('#user_company_name').autocomplete({
    source: $('#user_company_name').data('autocomplete-source')
  });
  s3_direct_upload.init();
});

(3) Main js: /app/assets/javascripts/application.js

//= require jquery3
//= require jquery_ujs
//= require jquery-ui/widgets/autocomplete
//= require turbolinks
//= require popper
//= require bootstrap
//= require s3_direct_upload
//= require_tree .

(4) controller: /app/controllers/s3_upload_controller.rb

class S3UploadController < ApplicationController
  def create
    @media_url = params[:url] rescue nil
  end
end

(5) View: /app/views/s3_upload/create.js.erb

$("input#user_avatar").val('<%= @media_url.html_safe %>');
$("div#avatar-container").html('<%= j image_tag(@media_url.html_safe) %>');
alert("Uploaded successfully");

ERROR OUTPUT

Uncaught SyntaxError: Unexpected token <
  at DOMEval (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:83)
  at Function.globalEval (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:347)
  at text script (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9607)
  at ajaxConvert (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:8755)
  at done (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9223)
  at XMLHttpRequest.<anonymous> (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9515)

Any help would be highly appreciated

Answer 1

Escape the javascript. It's reading the < of the ruby tag

$("input#user_avatar").val('<%= j @media_url.html_safe %>');