私はRailsの初心者です。
BlueImp の jQuery-File-Upload プラグインを Rails 4 アプリに実装しようとしています。したがって、基本的なファイルのアップロードは機能していますが、複数の問題があります。まず、アップロード ページの UI がおかしい。
[アップロードの開始] ボタンと [アップロードのキャンセル] ボタンしか表示されません。それでも、目に見えない「ファイルを追加」ボタンがページの半分を占めているため、それらをクリックできません。ファイルをアップロードするには、巨大で目に見えない「ファイルを追加」ボタンをクリックし、ファイルを選択し、タブを 2 回押します。 [アップロードの開始] ボタンを強調表示し、Enter キーを押します。アップロードしたら、特定のページに移動する代わりに、ファイル アップロードのパラメーターを表示するページに移動します。ただし、ファイルはアップロードされます。写真をアップロードしたいのですが、どうやらできないようです。どんな助けでも大歓迎です。
video_resources ビューの _form.html.haml ファイルを次に示します。おそらくhtmlからhamlへの変換が問題になると思います。
= form_for VideoResource.new, :html => {:multipart => true, :id => "fileupdload" } do |f|
.row.fileupload-buttonbar
.span7
%span.btn.btn-success.fileinput-button
%i.icon-plus.icon-white
%span Add files...
= f.file_field :file_path
%button.btn.btn-primary.start{:type => "submit"}
%i.icon-upload.icon-white
%span Start upload
%button.btn.btn-warning.cancel{:type => "reset"}
%i.icon-ban-circle.icon-white
%span Cancel upload
%button.btn.btn-danger.delete{:type => "button"}
%i.icon-trash.icon-white
%span Delete
%input.toggle{:type => "checkbox"}/
.span5
.progress.progress-success.progress-striped.active.fade
.bar{:style => "width:0%;"}
.fileupload-loading
%br/
%table.table.table-striped
%tbody.files{"data-target" => "#modal-gallery", "data-toggle" => "modal-gallery"}
:javascript
var fileUploadErrors = {
maxFileSize: 'File is too big',
minFileSize: 'File is too small',
acceptFileTypes: 'Filetype not allowed',
maxNumberOfFiles: 'Max number of files exceeded',
uploadedBytes: 'Uploaded bytes exceed file size',
emptyResult: 'Empty file upload result'
};
/ The template to display files available for upload
%script#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>
{% } %}
/ The template to display files available for download
%script#template-download{:type => "text/x-tmpl"}
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
/ The jQuery UI widget factory, can be omitted if jQuery UI is already included
= javascript_include_tag 'jquery.ui.widget.js'
/ The Templates and Load Image plugins are included for the FileUpload user interface
%script{:src => "http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"}
%script{:src => "http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"}
/ The Iframe Transport is required for browsers without support for XHR file uploads
= javascript_include_tag 'jquery.iframe-transport.js'
= javascript_include_tag 'jquery.fileupload.js'
= javascript_include_tag 'jquery.fileupload-ui.js'
/ add include_tag js files to config.assets.precompile in ...environments/production.rb if you have it in vendor/ assets
%script{:charset => "utf-8", :type => "text/javascript"}
$(function () {
\// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
\//
\// Load existing files:
$.getJSON($('#fileupload').prop('action'), function (files) {
var fu = $('#fileupload').data('blueimp-fileupload'),
template;
fu._adjustMaxNumberOfFiles(-files.length);
template = fu._renderDownload(files)
\.appendTo($('#fileupload .files'));
\// Force reflow:
fu._reflow = fu._transition && template.length &&
template[0].offsetWidth;
template.addClass('in');
$('#loading').remove();
});
});