こんにちは。
バグですか？
只野です。
最近はLivewireを使ってプログラムを作っているのですが、Livewireはまだ発展途上だけあり、便利なんだけど、なんかおかしな動きしたりするんですよ。
ファイルアップロード処理もその一つ。
便利は便利なんですよ。プロパティ定義してhtmlの項目と紐づければ後は一時ファイル保存まで勝手にやってくれるので、ただ前回もあったように何かとおかしな動きをします。
今回は一時ファイル保存した後に「やっぱいらないから削除しよ。」こんな処理をしたかっただけなんですが…
サーバー側でプロパティの値消してもファイルのクリアがされない…
なんだこいつオートザオリク機能もついてんのかよってぐらい消えません…
一時ファイルの取消は画面上にボタンを用意して、クリックでLivewireコンポーネントに記載したPHP(サーバー処理)を動くようにしたのですが、これだとさっぱり消えませんでした。
なんでかな～？とか考えてみたところLivewireはファイルアップロードを裏でJavascriptがやっています。
ここの処理とサーバー処理の順序の問題で、サーバークリアしてもファイル復活が発動している可能性がありそうだったので、Livewireとhtmlの「input type=”file”」タグの紐づけを解除（wire:model削除）して全てjavascript側にファイルアップロード処理を移動させてみました。
そしたらこれが正解だったらしく、ようやく私がやりたかった一時ファイルのクリアをすることができました。
Livewireのファイルアップロードをjavascript側に移動させる方法は公式のドキュメントに記載があります。
それを参考に私が記載したコードが下記です。
@script
<script>
$(function()
{
// ファイル変更イベント
$('.js-file').on('change', function() {
const file = this.files[0];
const propertyName = "form." + $(this).data("property-name");
console.log(file);
if (file)
{
// Livewireファイルアップロード実行
$wire.upload(propertyName, file, (uploadedFilename) => {
// Success callback...
}, () => {
// Error callback...
}, (event) => {
// Progress callback...
// event.detail.progress contains a number between 1 and 100 as the upload progresses
}, () => {
console.log("Cancelled");
// Cancelled callback...
});
}
else
{
// ファイルがない場合は変数クリア
console.log("Remove");
$wire.removeUpload(propertyName);
$wire.set(propertyName, null);
}
});
$(document).on('click', '.js-delete', function() {
const propertyName = "form." + $(this).data("property-name");
$wire.removeUpload(propertyName);
$wire.set(propertyName, null);
$("#" + $(this).data("property-name")).val("");
});
});
</script>
@endscriptLivewireは悪くないフレームワークだと思うので、今後も発展してほしいところです。
本日はこの辺で
