バージョン選択

フォーラム

メニュー

オンライン状況

127 人のユーザが現在オンラインです。 (118 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 126
takashi_16 もっと...

サイト内検索

質問 > フロント機能 > フロントで画像ファイルアップロードを実装したい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
h_tanaka
投稿日時: 2023/11/8 17:15
対応状況: 解決済
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1682
フロントで画像ファイルアップロードを実装したい
フロントで画像ファイルアップロードを実装したいのですが、実装方法わかりますでしょうか。


試しに、管理画面の商品画像アップロードの仕組みを流用してみようとしたのですが、 FilePond 変数の定義の仕方がわからないです。

app/template/default/Selling/index.twig

{% block javascript %}
    <script>
        $(document).on('drop dragover', function(e) {
            e.preventDefault();
        });

        $(function() {

            // ファイルアップロード
            // see https://pqina.nl/filepond/
            var inputFileElement = document.querySelector('input[type=file]');
            {% if eccube_config.locale == 'ja' or eccube_config.locale == 'en' %}
            FilePond.setOptions(FilePondLocale_{{ eccube_config.locale }});
            {% endif %}
            FilePond.setOptions({
                ...


コンソールエラー
jQuery.Deferred exception: FilePond is not defined ReferenceError: FilePond is not defined

管理画面では、 html/bundle/admin.bundle.js にて FilePond が定義されているようですが、難読化されており、 front 側でどのように定義すればよいかがわからないでいます。
h_tanaka
投稿日時: 2023/11/13 16:10
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1682
Re: フロントで画像ファイルアップロードを実装したい
本件、自己解決しました。

FilePond を使用せず、 FileReader を使用することでプレビューを、 Symfony の File を使用することでアップロードを実現できました。
https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は90,118名です
総投稿数は110,319件です

投稿数ランキング

1
seasoft
7369
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1682
8
red
1571
9
mcontact
1351
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.