0

I am using this application example and try to model it to fit my needs.

I am modelling your index.html.erb to fit my needs.
I want to get rid of "start" button in order to prevent single-file upload (I dont want it), but it seems that "start upload"(multiple upload)-button is on "start" button dependent and I could not find how to modify the script in order to get rid of "start"-buttom but to keep the functionality of a "start upload" -button.

Can you give me some hints how to get rid of those dependencies?

Hier is the short code cut-off:
I have marked the lines where "start upload" and "start" buttons are situated with !!!.

<div class="container">
      <h2>Upload file</h2>
      <%= form_for Upload.new, :html => { :multipart => true, :id => "fileupload" } do |f| %>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
          <div class="span7">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
              <i class="icon-plus icon-white"></i>
              <span>Add files...</span>
              <%= f.file_field :upload %>
            </span>
            <button type="submit" class="btn btn-primary start">
              <i class="icon-upload icon-white"></i>
 !!!!            <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
              <i class="icon-ban-circle icon-white"></i>
              <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
              <i class="icon-trash icon-white"></i>
              <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
          </div>
          <div class="span5">
            <!-- The global progress bar -->
            <div class="progress progress-success progress-striped active fade">
              <div class="bar" style="width:0%;"></div>
            </div>
          </div>
        </div>
        <!-- The loading indicator is shown during image processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
        </table>
      <% end %>

    </div>


    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
      <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
        <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
        <td>
          <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
        </td>
   !!!     <td class="start">{% if (!o.options.autoUpload) { %}
          <button class="btn btn-primary">
            <i class="icon-upload icon-white"></i>
            <span>{%=locale.fileupload.start%}</span>
          </button>
          {% } %}</td>
        {% } else { %}
        <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
          <button class="btn btn-warning">
            <i class="icon-ban-circle icon-white"></i>
            <span>{%=locale.fileupload.cancel%}</span>
          </button>
          {% } %}</td>
      </tr>
      {% } %}
    </script>
    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl"></script>

    <script type="text/javascript" charset="utf-8">
      $(function () {
          // Initialize the jQuery File Upload widget:
          $('#fileupload').fileupload();
          //
          // Load existing files:
          $.getJSON($('#fileupload').prop('action'), function (files) {
            var fu = $('#fileupload').data('fileupload'),
              template;
            fu._adjustMaxNumberOfFiles(-files.length);
            console.log(files);
            template = fu._renderDownload(files)
              .appendTo($('#fileupload .files'));
            // Force reflow:
            fu._reflow = fu._transition && template.length &&
              template[0].offsetWidth;
            template.addClass('in');
            $('#loading').remove();
          });

      });
    </script> 

Thank you.
Cheers, Katja

2
Contributors
1
Reply
8
Views
4 Years
Discussion Span
Last Post by LastMitch
0

JQuery-File-Upload Button dependencies

The issue you are having has nothing to do with Ruby on Rails at all.

This issue is more related to the javascript section.

The reason is very simple if you modify jQuery code first than add Ruby on it and maybe it will look much easier than what you are presenting.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.