Member Avatar for akvarel1

I was following RailsCasts tutorial JQuery Uploading and I ran into difficulties.
I would like to be able to select several files, preview only the name of the files on the website, remove those, which where selected by mistake and only then upload the neccessary ones in Ruby on Rails.
<br>
I have looked through as well HTML5 and jQuery-File-Upload but I am pretty new to Ruby on Rails and all this everything. If comebody gives me a hint what is better and some primitive codes, I will be really happy.

I have got a code but it creates a new Painting and uploads directly, so it doesnt do what I want.

<%= form_for Painting.new do |f| %>
  <%= f.label :image, "Upload paintings:" %>
  <%= f.file_field :image, multiple: true, name: "painting[image]" %>
<% end %>

I have found as well another code hier but it doesnt support multiple selection and I need the only the name of the file to be previewed.How can I change it to preview multiple files?

<script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" multiple />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

I would be really grateful if somebody helps me to deal with it.

  • 2 Contributors
  • 11 Replies
  • 299 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by akvarel1
Member Avatar for Taywin

I don't know how you want to preview each file. It looks like you should go back to your design first. Select tag can be multiple, but how would you want it to be preview? Instead, you may create a page with all files listed, and have a check box on each of the file. Users could preview each file they want (check/uncheck), and then click submit.

Anyway, I have no idea of your design. That could be one step to be understood first.

Member Avatar for akvarel1

It should look somehow like this http://stormy-sea-2471.herokuapp.com/celfiles. You select the files, the names of files appear in the box (it is as well drag and drop -box), you can remove the files and then you click submit and the files and their information are transfered into a database. In my the site below the files are transfered automotically to the database without a preview, I need this "preview" stage between selection and upload.

Member Avatar for Taywin

OK, are you using partial to display each of the load the display after a user select a file? You could use ajax to load each partial, and then display the image in the partial. The submit button for form should cover the whole display area. The button display selection should call ajax to add each selection file.

Anyway, you could simply try this JQuery plug-in to do the work.

Edited by Taywin
Member Avatar for akvarel1

I have tried it alredy but I have no idea what I have to change and what I have to load into Ruby on Rails. I mean I have my own database and variables with other names so I do not know what I should change in JQuery plug-in to make it work. I have tried as well just to copy and paste every single file they have it there but Add file button doesnt load the pictures.
Should I copy and paste all files there and then change the variables?

I have tried as well this tutorial but I can olny select the files and nothing happens afterwords, no uploading, nothing. Only "Browse"-button and multiple file select works

Member Avatar for akvarel1

I guess I have found out why my copy-paste story didnt work.
At the end of their index.html they have lins to javascripts:

<script src="js/jquery.fileupload-ui.js"></script>
<script src="js/main.js"></script>

So my rails s count not recognize the routes, so I changed them into

<script src="http://blueimp.github.com/cdn/js/jquery.fileupload-ui.js"></script>
<script src="http://blueimp.github.com/cdn/js/main.js"></script>

But the add-button depends on a /server/php and I cannot find the whole path to it. Do you know how I can after downloading the folder server from a page and adding it to my rails project 'attach' the right rout to it?

I mean now I have

<form id="fileupload" action="/server/php" method="POST" enctype="multipart/form-data">

but after downloading the folder server from JQuery how can I manage the routs, so that rails will find it?

Thank you in advanced

i mean

Member Avatar for Taywin

Oh, OK. When you want to load js file from default rails directory, you could use...

<%=javascript_include_tag "file.js"%>

This also happens to be similar to loading CSS file (for your future reference)

<%=stylesheet_link_tag "file.css"%>

The tag will automatically looks from RAILS_ROOS_DIRECTORY/public/javascripts for js file and RAILS_ROOTS_DIRECTORY/public/stylesheets for css file.

Member Avatar for akvarel1

Yep, I got it, thanks.
But I sill have one small problem :

<form id="fileupload" action="server/php" method="POST" enctype="multipart/form-data">

It is a folder that should be uploaded to a server, I would like to test first if it works with normal rails s but I have no idea how I shoud change

action="server/php"

. I have downloaded the folder server/php from JQuery and added it to my current rails project but I have no idea how I can load server/php from default rails directory-

Member Avatar for Taywin

In Rails, you need to call an action from a controller. What is the controller name you are working with?

For example, you have a file named upload_controller.rb which is the download controler. Inside the file, it should have class declaration similar to class UploadController < ApplicationController or something like that. The action is a method inside the class and starts with def word.

#i.e
class UploadController < ApplicationController  # inherit from application controller

  def uploadFile
    # do something with the upload
  end  # end uploadFile method

end  # end class

When you call for action from form, you call 'upload/uploadFile'. Notice that the controller name comes first, and follows by action. However, you should not hard-code by using regular form because Rails will use it as an absolute path. I am not sure about Rails 3+ syntax, but it should be similar to below...

<%= form_tag ({:controller=>"upload", :action=>"uploadFile"}, :encrypt=>"multipart/form-data") do %>
#blah blah blah in HTML or ruby
<%- end -%>
Edited by Taywin
Member Avatar for akvarel1

Yep, that is why I dont understand it.
In JQuery they do not have such an action server/php in their controller, they have no controllers at all.

Their action server/php correspons to a folder /server/php with another files in it.
Take a look hier:. And in order to set up a plugin, they suggest do download the archive with folder server/php inside it.
So this server/php action somehow interact with a folder server/php.

Member Avatar for Taywin

Sorry for not reply earlier. Anyway, the example page has the form as follows.

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">

The link is to go directly to the index page of the site, but I have a feeling that it is actually being redirected. You could set up the redirection (rewrite URL) from the config/routes.rb file.

Because it is a demo, the action link is irrelevant. You could still apply any destination action to the form and perform real upload. The JQuery plug-in has that folder so it could be compatible with PHP. You shouldn't be worried about it.

Member Avatar for akvarel1

thank you.
I have got it, I have still another questions but I posted them as a new topic=)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.