Multiple select and preview of name of selected files

Rails
1

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.


I have looked through as well HTML5 and
jQuery-File-Uploadhttps://github.com/blueimp/jQuery-File-Uploadbut I
am pretty new to Ruby on Rails and all this everything. If somebody
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.

<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

On Oct 18, 2012, at 10:51 AM, akvarel wrote:

<% end %>
                }
    </form>
</body>

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

For starters, do you have uploading a single file working correctly yet?
That might be an excellent place to start. You’ve shown a number of
client-side snippets, but do you have the server ready to play “catch”?
Also, if you are adding a file field to a form_for helper, you have to
specify that it’s a multipart form:

<%= form_for @quote, :html => {:multipart => true} do |f| %>

Otherwise the browser is under no compulsion to actually send you the
file.

Walter

3

On Oct 20, 2012, at 6:17 AM, akvarel wrote:

I have uploading several file working already. The problem is that I want to
make a oreview before uploading.
I have studied as well the code of JQuery Upload. I have copied and pasted the
content of all their pages and files. The problem is I cannot add the files
because the “action” is really strange:

<form id="fileupload" action="server/php/" method="POST"

enctype=“multipart/form-data”>

    <!-- The fileupload-buttonbar contains buttons to add/delete files and

start/cancel the upload -->

They do not have a controller with a function server/php , but they do have a
folder server/php with other files. I have downloaded this folder and added it to
my rails project, but I have no idea how I can link action=“server/php/” with that
folder.

You’re not, not unless you put it in the /public folder, and configure
Apache to run the PHP interpreter against it. I have heard of this sort
of thing being possible, but I have never attempted it.

If you already have file upload working with Rails, then there’s no
reason to add the form tag as they have here, just learn from it. Think
of this as the working model that you must adapt from PHP to Rails.
Change action to your file upload action, or just add the ID of this
example form to your Rails form_for method. Then fold in the JavaScript
that they use to make the preview, and you should be good. If they are
doing a client-side preview, then the form handler (PHP or Rails) is
completely outside of the problem, not related at all to the solution.

Walter

4

So, did I get you right?
Either
I have to adapt PHP to Rails and change JQuery-File-Upload file upload
action “server/php” to my file upload action

or
I have to adapt PHP to Rails and add the ID of the example form (do you
mean “form id=“fileupload””? ) to my Rails form_for [1] method and then
fold it in the JavaScript JQuery-Upload-File use to make the preview.

[1] I have such kind of form_for

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

and I have to add and ID to it, dont I?

There are two ways to solve my problem, did I define them correctly?

Cheers and many many thanks,
Katja

5

On Oct 21, 2012, at 5:48 PM, akvarel wrote:

<%= form_for Painting.new do |f| %>
<%= f.label :image, “Upload paintings:” %>
<%= f.file_field :image, multiple: true, name: “painting[image]” %>
<% end %>
and I have to add and ID to it, dont I?

There are two ways to solve my problem, did I define them correctly?

Yes, and I think, if you already have file upload working in Rails, you
know which one you should do. Maybe something like this:

form_for Painting.new, :id => ‘fileupload’, :html => {:multipart => true
} do |f|

See if that gives you any love. Realize that on your file upload handler
in Rails, you will need to determine if there are multiple files or just
one, and handle them differently in either case. Default is one file per
file input on your form (i.e. one per form submission), but you can’t
count on that if you expose the :multiple => true option as you have
done.

Walter

6

I have uploading several file working already. The problem is that I
want
to make a oreview before uploading.
I have studied as well the code of JQuery Upload. I have copied and
pasted
the content of all their pages and files. The problem is I cannot add
the
files because the “action” is really strange:

<form id="fileupload" action="server/php/" method="POST"

enctype=“multipart/form-data”>

They do not have a controller with a function server/php , but they do
have
a folder server/php with other files. I have downloaded this folder and
added it to my rails project, but I have no idea how I can link
action=“server/php/”
with that folder.