【Salesforce】inputFileのファイル名を保持する

【Salesforce】inputFileのファイル名を保持する

Visualforce上でapex:inputFileのタグを使用する際、一度サーバーに送信されるとファイルが選択されていない状態になります。

同じコントローラ内で画面遷移を行った際もファイルが選択されていない状態に戻ってしまうため、選択したファイル名を表示して欲しいという要望がありました。

普通のやり方では難しいようだったので、ちょっと工夫して作成しました。

コントローラ側ではファイルを受けとる準備をするだけです。

public string fileName  { get; set; }
public Blob fileBody    { get; set; }

工夫したのはVisualforce側です。

<style>
/* ファイルが選択できそうなボタン */
.selectFileBtn {
  padding: 2px 7px;
  border: solid 1px #666666;
  border-radius: 2px;
  background: linear-gradient(to bottom,
                              #FCFCFC,
                              #FCFCFC 20%,
                              #EEEEEE);
}
.selectFileBtn:hover,
.selectFileBtn:active,
.selectFileBtn:focus {
  border: solid 1px #CCCCFF;
  background: linear-gradient(to bottom,
                              #EEEEEE,
                              #EEEEEE 20%,
                              #FCFCFC);
}
/* ファイル選択ボタンの横にあるラベル */
.selectedFileName {
  margin-left: 10px;
}
</style>

<div>
  <apex:inputFile id="InputFile" value="{!fileBody}" filename="{!fileName}" onchange="changeFile(this);" style="display: none;" />
  <apex:outputLabel id="SelectFileButton" for="InputFile" value="ファイルを選択" styleClass="selectFileBtn" />
  <apex:outputLabel id="fileToUploadLabel" for="InputFile" value="{!IF(fileName != '', fileName, '選択されていません')}" styleClass="selectedFileName" />
</div>

<script>
// ファイル選択時にファイル名のラベルを設定する
function changeFile(obj){

    var fileName;

    // ファイル名を設定する
    fileName = '選択されていません';
    if(obj.files[0] != "undefined"){

        fileName = obj.files[0].name;
    }
    $(obj).parent().find('.selectedFileName').text(fileName);
}
</script>

初期状態ではfileNameに値が存在しないため、「選択されていません」となっています。

ファイルが選択された際にJavaScriptによってファイル名の表示を切り替えていることが分かると思います。

また、一度サーバー側へ送信されても、戻ってきた際には「fileName」に値が存在するため、選択したファイル名が表示されます。

ファイル選択のボタンはそれっぽく作成しただけなので、別の色にしても良いかと思います。