Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

OutSystemsのFileUploadで、ファイル名をクライアント側で扱う

FileUpload Widgetで、「ユーザーが指定したファイル名をクライアント側(ブラウザ内)で扱う方法」を複数回聞かれたのでメモしておきます。

FileUpload自体の一般的な使い方:OutSystemsでファイルをアップロードする

サンプル

Forgeコンポーネント:https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7064
FileUploadFileNameHandler Screenを参照してください。

環境

Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.6)

Traditional Web。

まずは標準的な方法を検討してみる

部品(Widget)自体の機能を使えると、信頼性や保守性の観点でうれしいので、まずは部品にその機能が備わっていないかチェック。

しかし、画面に配置したFileUploadにも、Uploadにも、そういったことができそうなプロパティがありません。

なお、FileUploadはMethod=Ajax Submitのボタンをクリックした場合、ファイル名もファイルのコンテンツもサーバに渡しません。

JavaScriptを使って対応する

Extended Properties

OutSystemsの各種Widgetには、Extended Propertiesというプロパティが含まれることがあります。
ここに指定した設定は、HTMLとして出力されるときにタグの属性になります。
そこで、ここにJavaScriptのイベントハンドラーを登録することにします。

qFileUpload2_1.PNG

Upload Widgetのドキュメント

UI

違うファイルが指定されるたびに、そのファイル名を別のInputに書き込むことにします。
以下のように、ファイルパスをそのまま表示するInputと、ファイル名を切り出して表示するInputを用意してみました。

qFileUpload2_2.PNG

後のJavaScriptで触るためにInputのNameプロパティを設定しておく必要があります。

JavaScriptの例

Upload WidgetのExtended Propertiesにonchangeを追加し、そのValueに以下の文字列を追加します。
上のコードは、InputFilePathというNameがついたInputに設定されたファイルパスをそのまま表示する例。
下のコードは、ファイルパスからファイル名部分だけを切り出しています。

"$('#" + InputFilePath.Id + "').val(this.value);" +
"$('#" + InputFileName.Id + "').val(this.value.substr(this.value.lastIndexOf('\\') + 1));"

ここに書くコードを実際の要件に合わせて修正してください。

動作確認

Chromeで動作確認したところ。
qFileUpload2_3.PNG

ファイルパスにC:\fakepath\と表示されるのは、ブラウザのセキュリティのためのようです。
Chromeに限らず、Internet Explorerでも発生しました。
Internet Explorerでは、実験サイトを信頼済みサイトに登録すれば、フルパス表示されるようになりますが、普通は必要ないですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?