▼テンプレート
[EC-CUBE]ec-cube4.0.5

現在カテゴリーに画像データを関連付ける作業を行っているのですが
、商品登録のcontorollerなどを参考に作成しているのですが、

ローカルからサーバーへの画像アップロードの手順がよくわからず
止まっている最中です

edit.twig


<div id="thumb" class="c-form__fileUploadThumbnails clearfix"></div>
<p id="message"></p>
<div id="upload-zone" class="media py-5 border-ec-dashed mb-2 rounded">
<div class="media-body">
<i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true"></i>
{{ 'admin.common.drag_and_drop_image_description'|trans }}
{{ form_widget(form.category_image, { attr : { accept : 'image/*', style : 'display:none;' } }) }}
{{ form_errors(form.category_image) }}
<a class="btn btn-ec-regular mr-2" onclick="$('#admin_category_image').click()">
{{ 'admin.common.file_select'|trans }}
</a>
</div><!-- /.media-body -->
</div><!-- /.media -->
</div>

この部分でファイルを選択するボタンを押しても何も起きないような状況です。
どういった処理を行えば選択できるようになるのかお教えいただけないでしょうか。

よろしくお願いします。

「onclick="$('#admin_category_image').click()"」と記載されていますが、

form_widgetでform.category_imageを出力すると、そのINPUTタグのIDは、admin_category_imageではなく、admin_category_category_imageになるはずです。

それが原因ではないでしょうか？

----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

ご返信ありがとうございます。
上記のことでファイルアップロード画面が出るようになりましたが
画像のプレビューが表示されません
もしプレビューについての表示方法も教えていただけないでしょうか？

よろしくお願いします。

商品登録画面と同じアップロードを実現されたいのであれば、商品登録画面のtwigに記載されているjavascriptを理解する必要があります。

{% block javascript %}

{% endblock javascript %}

で囲まれた部分のjavascriptはほとんどが画像のアップロードに関する実装で、プレビューもこれによって実現されています。

----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

ご返信ありがとうございました。
理解しながら作成してまいります。