動的フォームに画像添付の項目を追加したい

[poph...@gmail.com]

お世話になります、検索しても見つけられなかったためこちらに書き込ませていただきます。

表題の通り、動的フォームに画像添付の項目を追加したいのですが可能でしょうか。

画像アップロードの項目を動的フォームで追加ができ、アップロードされた画像をフォーム送信結果メールに添付できるとベターです。

画像アップロードの項目は複数追加する可能性があります。

ご回答よろしくお願いいたします。

[伊藤淳]

お世話になります。

動的フォームの静的部分に画像添付をつける事はできますが、

動的に画像添付を増やす事は残念ながら出来ません。

よろしくお願いいたします。

[poph...@gmail.com]

ありがとうございます

http://www.a-blogcms.jp/support_ver2/forum.html?place=topic%2Fa-blog-cms%2FLrunw44360U%2Fdiscussion

http://www.a-blogcms.jp/support_ver2/forum.html?place=topic%2Fa-blog-cms%2FLrunw44360U%2Fdiscussion

を参考にさせていただきましたが、内容確認画面で選択した画像が表示されておりません。

＞formにenctype="multipart/form-data"を記載

というのは初期ステップと修正エラーのステップの二カ所のみで合ってますでしょうか？

また、

＞mail_file_mimeには、メール添付を許可したい拡張子とmimeタイプを追加してください。

というのが具体的にどういう記述になるのかがわかりません。

メール添付を許可したい画像はpngかjpegかgifです。

動的フォームに追加する項目なのでバックスラッシュが

必要なのかと追加しましたが、この場所であっていますか？

（追加してもしなくても挙動は同じです）

【入力画面】

<!-- BEGIN mail_image@path:veil -->

<img src="%{ARCHIVES_DIR}\{mail_image@path\}" width="450" alt="" /><br />

<input type="hidden" name="mail_image@old" value="{mail_image@path}" />

<input type="hidden" name="mail_image@secret" value="{mail_image@secret}" />

<label for="input-checkbox-mail_image@edit">

<input type="checkbox" name="mail_image@edit" value="delete" id="input-checkbox-mail_image@edit" />

削除

</label><br /><!-- END mail_image@path:veil -->

<!-- イメージファイルをアップロードするフィールド -->

<input type="file" name="mail_image" size="20" />

<input type="hidden" name="field[]" value="mail_image" />

<input type="hidden" name="mail_image:extension" value="file" /> 

【確認画面】

<!-- BEGIN\ recruitment_image@path:veil --><img src="%{HTTP_ARCHIVES_DIR}\{recruitment_image@path\}" width="200" height="" alt="#" /><!-- END\ recruitment_image@path:veil -->

よろしくお願いいたします

[伊藤淳]

お世話になります。以下ご質問に回答します。

> ＞formにenctype="multipart/form-data"を記載

> というのは初期ステップと修正エラーのステップの二カ所のみで合ってますでしょうか？

すべてのform要素に設定してください。

> ＞mail_file_mimeには、メール添付を許可したい拡張子とmimeタイプを追加してください。

> というのが具体的にどういう記述になるのかがわかりません。

> メール添付を許可したい画像はpngかjpegかgifです。

例えばprivate/config.system.yamlに以下のように記述してください。

mail_file_mime :

  - png@image/x-png

  - png@image/png

  - gif@image/gif

  - jpg@image/jpeg

  - jpeg@image/jpeg

あと、管理ページ > コンフィグ > 編集設定 > アップロード許可ファイル拡張子のドキュメントの欄に

jpeg, jpg, png, gif 

を追加してください。

> 動的フォームに追加する項目なのでバックスラッシュが

> 必要なのかと追加しましたが、この場所であっていますか？

はい。大丈夫だと思います。

ただし、確認画面の画像パスの変数名が違うと思います。

<!-- BEGIN\ mail_image@path:veil -->

<img src="%{HTTP_ARCHIVES_DIR}\{mail_image@path\}" width="200" height="" alt="#" /><!-- END\ mail_image@path:veil -->

ではないでしょうか？

以上になります。

よろしくお願いいたします。

[伊藤淳]

参考URL : http://developer.a-blogcms.jp/document/form/attachments.html

[poph...@gmail.com]

ありがとうございます。

画像を添付して送信することができました。

ですが、フォーム送信完了画面で、画像が表示されません。（imgタグはあり、画像ファイルのリンク切れになります）

同じテンプレートを使っているはずの確認画面では画像は問題なく表示されるのですが、

送信完了画面のみでリンク切れになってしまうのは、どうしたらいいでしょうか。

また、一度確認画面に進んでから入力画面に戻ると、画像が消えてしまう（もう一度アップロードが必要になる）のですが、

それは仕方がないでしょうか。

[伊藤淳]

お世話になっております。

完了画面では表示させることができません。これはアップロードが完了したときに一時的に表示する為にアップロードしていた画像を削除する為です。完了時には存在しない為表示されません。

確認画面から入力画面に戻っても画像は表示されると思います。

私も一度試しましたが、入力画面と確認画面を行き来しても消えませんでした。

現象からみると、takeoverが仕込んでない可能性があります。一度テンプレートを確認してみてください。

まずは、siteテーマの静的なフォームを参考にするとわかりやすいと思います。

以上になります。

よろしくお願いいたします。

[poph...@gmail.com]

ありがとうございます

完了画面では表示させることができません。これはアップロードが完了したときに一時的に表示する為にアップロードしていた画像を削除する為です。完了時には存在しない為表示されません。

そうなのですね、veilで囲っていますが、画像がなくてもimgタグが出てしまい、

リンク切れが不格好でそれはなんとかしたいですが、表示しない方法はありますか？

 

確認画面から入力画面に戻っても画像は表示されると思います。

私も一度試しましたが、入力画面と確認画面を行き来しても消えませんでした。

現象からみると、takeoverが仕込んでない可能性があります。一度テンプレートを確認してみてください。

まずは、siteテーマの静的なフォームを参考にするとわかりやすいと思います。

takeoverは入力画面に戻るボタンの

<input type="hidden" name="takeover" value="{takeover}" /> 

でしょうか？

 これは記述されていますが、画像は消えてしまいます。

[伊藤淳]

お返事おそくなり申し訳ございません。

完了画面のリンク切れですが、mainのhtmlから確認画面と完了画面で同じテンプレートを読み込んでいると思いますが、

そこを分けて、共通で使えるところは更にイクルードすれば対応できるかと思います。

入力画面に戻った時の問題ですが

一度動的フォームではなくsite2015テーマなどに設置されているフォームで静的にテストしてみてはどうでしょうか。

よろしくお願いいたします。

[poph...@gmail.com]

ありがとうございます。

 

完了画面のリンク切れですが、mainのhtmlから確認画面と完了画面で同じテンプレートを読み込んでいると思いますが、

そこを分けて、共通で使えるところは更にイクルードすれば対応できるかと思います。

対応できました。ありがとうございます 

 

入力画面に戻った時の問題ですが

一度動的フォームではなくsite2015テーマなどに設置されているフォームで静的にテストしてみてはどうでしょうか。

静的フォームで試してみたところ、こちらは問題なく入力画面に戻っても画像が保持されていました。

以下、動的フォームのformタグ部分です。これではおかしいでしょうか…

<!-- BEGIN step -->

<!-- フォームステップ：初期 -->

<section class="acms-admin-entry entryColumn" id="testId">

<form enctype="multipart/form-data" action="?step=reapply#testId" method="post">

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/input.html"-->

</div>

<div class="formBtnBox acms-admin-col-12">

<input type="hidden" name="step" value="confirm" />

<input type="hidden" name="id" value="{form_id}" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" id="btnConfirm" class="acms-admin-btn acms-btn acms-btn-large" />

<hr class="clearHidden" />

</div>

</form>

</section>

<!-- END step -->

<!-- BEGIN step#reapply -->

<!-- フォームステップ：修正・エラー -->

<section class="acms-admin-entry entryColumn" id="testId">

<form enctype="multipart/form-data" action="?step=reapply#testId" method="post">

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/input.html"-->

</div>

<div class="formBtnBox acms-admin-col-12">

<input type="hidden" name="step" value="confirm" />

<input type="hidden" name="id" value="{form_id}" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" id="btnConfirm" class="acms-admin-btn acms-btn acms-btn-large" />

<hr class="clearHidden" />

</div>

</form>

</section>

<!-- END step#reapply -->

<!-- BEGIN step#confirm -->

<!-- フォームステップ：確認画面 -->

<section class="acms-admin-entry entryColumn" id="testId">

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/confirm.html"-->

</div>

    <div class="formBtnBoxTwin">

<form enctype="multipart/form-data" action="?step=reapply#testId" method="post" class="formBtnBox formBtnBoxHalf">

<input type="hidden" name="step" value="reapply" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" id="btnToInput" class="acms-admin-btn acms-admin-float-left acms-btn-large" />

</form>

<form enctype="multipart/form-data" method="post" class="formBtnBox formBtnBoxHalf">

<input type="hidden" name="To[]" value="{email}" />

<input type="hidden" name="AdminReply-To[]" value="<{email}>" />

<input type="hidden" name="AdminFrom[]" value="<{email}>" />

<input type="hidden" name="step" value="result" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="hidden" name="id" value="{form_id}" />

<input type="submit" name="ACMS_POST_Form_Submit" value="送信" id="btnSubmit" class="acms-admin-btn acms-admin-float-right acms-btn-large" />

</form>

<hr class="clearHidden" />

</div>

</section>

<!-- END step#confirm -->

[伊藤淳]

お世話になっております。

takeoverですが、confirmブロックのみに設定してみるとどうでしょうか？

[poph...@gmail.com]

ありがとうございます。

takeoverをconfirmブロックのみに設定してみると、入力画面に戻った際に、

画像だけではなくメールアドレスなどほかの情報も消えてしまいます。

[伊藤淳]

おそくなり申し訳ございません。

なるほど。ではtakeoverを戻して頂き、画像がリンク切れになった時のパスはどうなっていますでしょうか？

空っぽですか？

お手数ですがご確認よろしくお願いいたします。

[poph...@gmail.com]

リンク切れではなく、imgタグ自体が出力されません。

よろしくお願いいたします。

[伊藤淳]

お世話になっております。

再度私の環境で動的フォームの静的部分に添付ファイルのカスタマイズを実装してみました。

そこで、入力画面、確認画面を移動しても画像が表示されていましたので以下コードを載せます。

コードを見比べてチェックしていただいてよろしいでしょうか。

unit.html

<!-- BEGIN step -->

<!-- フォームステップ：初期 -->

<div class="acms-admin-entry contactBox">

<section class="entryColumn">

<div class="acms-admin-grid-r">

<h2>メールでのお問い合わせ</h2>

<p class="message">ご質問やご要望がありましたら、お気軽にお問い合わせください。</p>

</div>

<form action="?step=reapply" method="post" class="acms-admin-form" enctype="multipart/form-data">

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/input.html"-->

</div>

<div class="formBtnBox clearfix">

<input type="hidden" name="step" value="confirm" />

<input type="hidden" name="id" value="{form_id}" />

<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" id="btnConfirm" class="btnAttentionBlockLarge" />

<hr class="clearHidden" />

</div>

</form>

</section>

</div>

<!-- END step -->

<!-- BEGIN step#reapply -->

<!-- フォームステップ：修正・エラー -->

<div class="acms-admin-entry contactBox">

<section class="entryColumn">

<div class="acms-admin-grid-r">

<h2>メールでのお問い合わせ</h2>

<p class="message">入力内容を、もう一度ご確認下さい。</p>

</div>

<form action="?step=reapply" method="post" class="acms-admin-form" enctype="multipart/form-data">

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/input.html"-->

</div>

<div class="formBtnBox acms-col-12">

<input type="hidden" name="step" value="confirm" />

<input type="hidden" name="id" value="{form_id}" />

<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" id="btnConfirm" class="btnAttentionBlockLarge" />

<hr class="clearHidden" />

</div>

</form>

</section>

</div>

<!-- END step#reapply -->

<!-- BEGIN step#confirm -->

<!-- フォームステップ：確認画面 -->

<div class="acms-admin-entry contactBox">

<section class="entryColumn">

<div class="acms-admin-grid-r">

<h2>メールでのお問い合わせ</h2>

<p class="message">内容に誤りがないか、よくご確認ください。</p>

</div>

<div class="acms-admin-margin-bottom-medium">

<!--#include file="/include/form/confirm.html"-->

</div>

<div class="formBtnBox clearfix">

<form action="?step=reapply" method="post" class="formBtn formBtnReturn" enctype="multipart/form-data">

<input type="hidden" name="step" value="reapply" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="submit" name="ACMS_POST_Form_Chain" value="戻る" id="btnToInput" class="btnLarge" />

</form>

<form action="/bid/%{BID}/eid/%{EID}/tpl/thanks.html" method="post" class="formBtn formBtnSend" enctype="multipart/form-data">

<input type="hidden" name="To[]" value="{email}" />

<input type="hidden" name="AdminReply-To[]" value="<{email}>" />

<input type="hidden" name="AdminFrom[]" value="<{email}>" />

<input type="hidden" name="step" value="result" />

<input type="hidden" name="takeover" value="{takeover}" />

<input type="hidden" name="id" value="{form_id}" />

<input type="submit" name="ACMS_POST_Form_Submit" value="送信" id="btnSubmit" class="btnAttentionBlockLarge" />

</form>

</div>

<hr class="clearHidden" />

</section>

</div>

<!-- END step#confirm -->

input.html

<tr>

<th>写真</th>

<td>

<!-- アップロード済みのファイルのプレビューエリア -->

<!-- BEGIN\ photo@path:veil -->

<img src="%{ARCHIVES_DIR}\{photo@path\}" width="450" alt="" /><br />

<input type="hidden" name="photo@old" value="\{photo@path\}" />

<input type="hidden" name="photo@secret" value="\{photo@secret\}" />

<label for="input-checkbox-photo@edit">

<input type="checkbox" name="photo@edit" value="delete" id="input-checkbox-photo@edit" />

削除

</label><br /><!-- END\ photo@path:veil -->

<!-- イメージファイルをアップロードするフィールド -->

<input type="file" name="photo" size="20" />

<input type="hidden" name="field[]" value="photo" />

<input type="hidden" name="photo:extension" value="file" />

</td>

</tr>

confirm.html

<tr>

<th>写真</th>

<td><!-- BEGIN\ photo:veil -->

<img src="%{ARCHIVES_DIR}\{photo@path\}" width="450" alt="" /><!-- END\ photo:veil -->

</td>

</tr>

[poph...@gmail.com]

ありがとうございます、解決しました。

input.htmlの

<input type="hidden" name="photo@old" value="\{photo@path\}" />

<input type="hidden" name="photo@secret" value="\{photo@secret\}" />

この部分のバックスラッシュが抜けておりました。

長々と解決に向けておつきあいくださいましてありがとうございます。