上载核心:如何从Rails应用程序中呈现JS.ERB响应

Question

我正在尝试使用Fine-Uploader脚本和Rails Server实现直接到S3上传系统。

我面临的问题是，如果S3上传成功（即uploadsuccess端点），我发布的端点是呈现Rails JS.ERB模板的控制器，据说应该更新DOM。该脚本被Fine-Upload脚本捕获为成功的JSON响应，但是JS脚本并未执行。

相关代码：

images_controller.rb

def create
  @image = Image.create!
  set_standard_vars
end

create.js.erb（view）

alert("This is the view");
$("div#image_name").attr("id", <%= @image.name %>);

uploader.js

$(function () {
'use strict';
$("div#button").fineUploaderS3({
    debug: true,
    uploaderType: 'basic',
    button: $('div#button'),
    validation: {
      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
      sizeLimit: 3000000 // 3MB
    },
    objectProperties: {
      key: function(fileId) {
          var filename = $("div#button").fineUploader("getName", fileId);
          return item_picture_bucket + "/" + filename;
      },
      acl: "public-read"
    },
    request: {
        endpoint: "mybucket.s3.amazonaws.com",
        accessKey: access_key
    },
    signature: {
        endpoint: signature_end_point,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
    uploadSuccess: {
        endpoint: upload_url,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
  })
});

请注意，upload_url设置为图像＃创建。create.js.s.erb模板由Rails正确渲染，但脚本将其解释为JSON，而不是将JavaScript流式传输到浏览器，因此它不显示警报框。

。

事先感谢您的帮助。

Answer 1

尽管我没有fine uploader的经验，但我会给您一些关于铁轨的想法，考虑到作者花时间迅速向您回复：

---

recond_to

#app/controllers/images_controller.rb
def create
  @image = Image.create!
  set_standard_vars
  respond_to do |format|
      format.html
      format.json { render json: {success: true} }
  end
end

如果Fine-Uploader正在将请求处理为JSON，也许您最好准备JSON响应？这将使您至少可以直接使用Fine-Uploader处理响应（就像ajax:success的工作原理一样）：

$("div#button").fineUploaderS3({
    debug: true,
    uploaderType: 'basic',
    button: $('div#button'),
    validation: {
      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
      sizeLimit: 3000000 // 3MB
    },
    objectProperties: {
      key: function(fileId) {
          var filename = $("div#button").fineUploader("getName", fileId);
          return item_picture_bucket + "/" + filename;
      },
      acl: "public-read"
    },
    request: {
        endpoint: "mybucket.s3.amazonaws.com",
        accessKey: access_key
    },
    signature: {
        endpoint: signature_end_point,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
    uploadSuccess: {
        endpoint: upload_url,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
  })
})
.on('complete', function(event, id, fileName, responseJSON) {
       alert("Success: " + responseJSON.success);
       if (responseJSON.success) {
          alert("success");
       }
});

这需要具有正确的JSON返回

Answer 2

我想我找到了一个合理的铁轨解决方案。

在images_controller.rb中，而不是使用render_to_string方法将模板渲染为文本，而不是将模板渲染为文本，然后将其置于JSON响应中：

def create
  # create! is really to simplify the example, in reality you want to use a background worker to 
  # attach the image to a model and maybe resize it, but this is not the point of the question
  @image = Image.create! 
  set_standard_vars
  render :json => { :success => true, :partial => render_to_string }
end

这将把渲染的create.js.erb模板发送回fineuploader，以中的json响应。然后，我使用Eval JS方法和"完整"回调运行脚本：

$(function () {
    'use strict';
    $("div#button").fineUploaderS3({
        debug: true,
        uploaderType: 'basic',
        button: $('div#button'),
        validation: {
          allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
          sizeLimit: 3000000 // 3MB
        },
        objectProperties: {
          key: function(fileId) {
              var filename = $("div#button").fineUploader("getName", fileId);
              return item_picture_bucket + "/" + filename;
          },
          acl: "public-read"
        },
        request: {
            endpoint: "anglers-zoo.s3.amazonaws.com",
            accessKey: access_key
        },
        signature: {
            endpoint: signature_end_point,
            customHeaders: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
            }
        },
        uploadSuccess: {
            endpoint: upload_url,
            customHeaders: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
            },
            params: {
              'hash': image_group,
              'position': $('#button_slot').data('imageposition'),
            }
        },
      }).on("submit", function(id, name) {
        $('.destroy_image').hide();
        $('#button').hide();
        $("div#button").parent().find('#throbber').show();
        disable_submit_button();
      }).on("complete", function(event, id, name, responseJSON, xhr){
        jQuery.globalEval(responseJSON.partial);
      });
    });

它仍然不是100％的轨道方式，但对我来说很干净，轨道却足够。