Rails5 + jquery-fileupload-rails + carrierwave + Amazon S3, script issue

Question

Hey everyone.

It is my first post here (and probably not the last one...)

I'm building a Rails application where the admin can create recipe. Each recipe is listed on a index and the admin can add things such as, the title, the ingredients, the time you have to spend on the recipe etc...

Now I would like to be able to upload picture for this recipe.

As I had no idea on how to achieve this I decided to start a new app from scratch where you have a user with a name and a picture.

I already achieved to upload picture for the users (avatar) sort of with a basic upload form :

<%= f.file_field :image %>

As mentionned in the title this upload goes on amazon S3. I use the 'fog-aws' gem trough carrierwave with the help of MiniMagick to display the image the way I want. Also 'figaro' gem to hide my ID for amazon s3.

I also tried to update multiple files using the same process. That works fine. And you can find the tutorial I was following on this page : HERE

But the user has to wait and nothing is really going on on the screen meanwhile the picture is uploading. Maybe the user could think that something went wrong and just leave the page and eventually be frustrated or something.

This is why I had the idea to use jQuery File Upload for rails.

Problem is that all the tutorials are very outdated and I can't find anything working properly with all the things together (s3, carrierwave, jquery). The tutorials I found are from 2013 or so... Couldn't find anything revelant.

Except for this one. Even if (again) it is from 2014.

This script allows you to upload multiple file a the time and delete them etc... by simply paste the code in any view. I tried it but there are many problems and the first one is this :

<%= javascript_include_tag 'jquery.iframe-transport.js' %>
<%= javascript_include_tag 'jquery.fileupload.js' %>
<%= javascript_include_tag 'jquery.fileupload-ui.js' %>

When I try the code I get this error :

The asset "jquery.iframe-transport.js" is not present in the asset pipeline.

I don't think it is necessary as you should be able to get it from the application.js file with this //= require jquery-fileupload, right ?

When I remove those lines the script is loading but it looks like this :

jquery

As you can see, you can select the file but it should show the picture below.

And only the cancel button is working and removes the hr

---

which means the "pictures" I guess. But the upload and the delete wont work, same for the checkbox.

Anyone could help me to make this work somehow ?

The problem could come from s3 ? or is it a script problem ? I never coded java so I don't really see where it could be a error in there.

If anyone can help or at least show me the way I would appreciate it.

Thanks

Answer 1

So... I tried for the last 6 hours to make this happen. I successfully installed Yarn and Webpack on my rails app. According to the installation instruction you can install everything via the gemfile without having to "rails new" again.

By default when I go on my browser I can see the message (javascript/application.js -> console.log('Hello World from Webpacker')).

Nevertheless I don't understand how everything is working even after reading this and this.

I tried the Refile Gem for my uploads. Everything works. I'd like (as my first post indicates) create a progress bar. I have a coffee script for that. I put my script in my_app/javascript/users.coffee and in application.js I wrote this :

require(users.coffee)

I have a error. Then I tried to write this :

//= require refile
//= require popper
//= require bootstrap
//= jquery
//= require_tree .

And I have a error again.

Here is my coffee script :

jQuery ->
  $(document).on "upload:start", "form", (e) ->
    $(this).find("input[type=submit]").attr "disabled", true
    $("#progress-bar").slideDown('fast')

  $(document).on "upload:progress", "form", (e) ->
    detail          = e.originalEvent.detail
    percentComplete = Math.round(detail.loaded / detail.total * 100)
    $('.progress-bar').width("#{percentComplete}%");
    $("#progress-bar-text").text("#{percentComplete}% Complete")

  $(document).on "upload:success", "form", (e) ->
    $(this).find("input[type=submit]").removeAttr "disabled"  unless $(this).find("input.uploading").length
    $("#progress-bar").slideUp('fast')

By the way I changed to this my application.html.erb

<%= javascript_pack_tag 'application' %>

I also bin/yarn add refile and rails webpacker:compile

The result of my package.json :

{
  "name": "UploadRefile",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "coffeescript": "1.12.7",
    "jquery": "^3.2.1",
    "refile": "^0.2.11"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.5"
  }
}

Still not working. I also tried to use decaffeinate to modify my coffee script. The result is this :

jQuery(function() {
  $(document).on("upload:start", "form", function(e) {
    $(this).find("input[type=submit]").attr("disabled", true);
    return $("#progress-bar").slideDown('fast');
  });

  $(document).on("upload:progress", "form", function(e) {
    const { detail }          = e.originalEvent;
    const percentComplete = Math.round((detail.loaded / detail.total) * 100);
    $('.progress-bar').width(`${percentComplete}%`);
    return $("#progress-bar-text").text(`${percentComplete}% Complete`);
  });

  return $(document).on("upload:success", "form", function(e) {
    if (!$(this).find("input.uploading").length) { $(this).find("input[type=submit]").removeAttr("disabled"); }
    return $("#progress-bar").slideUp('fast');
  });
});

Error again.

Anybody could lead me towards something ? Because I can't move forward really. I'm a patient guy but I don't understand the webpack process. The explanation are very confusing even if they say the opposit. I simply want to get a progress bar working. With carrierwave or with refile. Doesn't really matter.

Thanks for you help