Jquery, drag and drop, multiple select, PREVIEW

I was following a tutorial on RailsCasts to upload with jquery. I have some few questions about it:

How can I display name of the files BEFORE uploading files and how can I set some restrictions as well before uploading a file.

I would be really grateful if somebody helps me or writes how I should change the code.

Hier is the javascript for drag-and-drop and upload:

jQuery ->
  $('#new_celfile').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_celfile').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')
HTML:

<div id="container">
      <% flash.each do |name, msg| %>
        <%= content_tag :div, msg, id: "flash_#{name}" %>
      <% end %>
      <%= yield %>
    </div>
    <div id="multiple-files">
    <%= form_for Celfile.new do |f| %>
  <%= f.label :image, "Select files:" %>
  <%= f.file_field :image, multiple: true, name: "celfile[image]" %>

<% end %>

</div>
  </body>
</html>

<script id="template-upload" type="text/x-tmpl">   
</script>