如何自定义 Rails 上传表单并仍然显示已上传的文件

Posted 2023-02-15

【中文标题】如何自定义 Rails 上传表单并仍然显示已上传的文件

【英文标题】：How to customize rails upload form and still show file that's uploaded

【发布时间】：2021-07-17 05:45:54

【问题描述】：

我正在使用 Rails ActiveStorage 上传照片。我已将 CSS 和 bulma 添加到 1）隐藏 rails 上传表单和 2）在其之上创建一个新的自定义表单。但是，一旦照片上传，我怎样才能显示文件名？现在照片上传但不显示上传的内容（因为默认的 rails 表单是隐藏的）。

        <div class="file" style="    position: relative;
    overflow: hidden;
    margin: 10px;">
        <label class="file-label">
        <span class="file-cta">
        <span class="file-icon">
        <i class="fas fa-upload"></i>
        </span>
        <%= form.file_field :images, multiple: true, direct_upload: true, class:" ", placeholder:"Choose files", style:"    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);" %>
        <span class="file-label">
        Choose photos
        </span>
        </span>
        </div>

如果您能为 1) 多张照片和 2) 在上传时显示进度添加如何执行此操作，我将不胜感激。

【问题讨论】：

请添加您现有的 ruby​​ 代码，以便我们就您遇到的错误提供建议

【参考方案1】：

您需要使用一些自定义 JS 来执行此操作。假设，正如你所说，文件实际上正在上传，那么它应该是半简单的。

我没有做完全相同的事情，但我在我目前正在构建的应用程序中所做的是将图像在上传后渲染为预览，对代码进行快速调整应该适合您！

JS：

$(document).on("turbolinks:load", function() 
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) 

  if (input.files) 
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) 
          var reader = new FileReader();

          reader.onload = function(event) 
              $($.parsehtml('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
          

          reader.readAsDataURL(input.files[i]);
      
  

;

$('#event_banner').on('change', function() 
        $("div.event_banner").html("");
        $("div.event_banner_explanation").show();
        $("div.event_existing_banner").hide();
        $("div.event_banner").show();
  imagesPreview(this, 'div.event_banner');
);

我的 erb 是：

<div class="row">
                <div class="col-md-12">
                    <div class="event_banner_explanation" style="display:none;">
                        <p>Custom explanation text</p>
                        <br>
                    </div>
                    <div class="event_banner" style="display:none;">
                    </div>
                </div>
            </div>
            <% if @event && @event.banner.attached? then %>
            <div class="row">
                <div class="col-md-9 event_existing_banner">
                        <br>
                        <p>Current Banner image:</p>
                        <p>If you upload a new image then this one will be replaced.</p><br>
                        <% if @event.banner.id? then %>
                            <%= link_to 'Remove the image below?', delete_image_attachment_partner_event_url(@event.banner.id),
                                method: :delete,
                                data:  confirm: 'Are you sure?' , style:"margin-left: 5px;" %><br>
                            <%= image_tag @event.banner, style: "max-height: 150px; max-width: 300px;" %>
                        <% else %>
                            <p>Your banner did not upload properly, please try again.</p>
                        <% end %>
                </div>
            </div>
            <% end %>
        </div>

希望这会有所帮助，您可以以相同的方式提取文件名，这是为多个文件设置的。

对于进度条，活动存储导轨页面上有一个功能示例。

https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-upload-javascript-events