Create input type=file as an image in phaser 3

Phaser 3
1

I need to create “input type=file” as an image in phaser 3.

The solution is use label for image and set "style=“display: none” " for file field.

<input style="display: none" type="file" name="avatar" id="avatar" accept="image/jpeg,image/png">
<label for="avatar"><img src="images/clans/load_ava.png"></label>

It woks in normal html page, but doesn’t work in phaser scene.
When i clicking on image and upload image, event “onchange” doesn’t fires.
Only when i clicking on button "type=file " ( if visiable is not dissabled ) event “onchange” fires.

   this.upload_form = this.add.dom(game.config.width/2 + 150, game.config.height/2 - 100).createFromCache('form_upload_file')

  this.image_loader =  this.upload_form.getChildByID('avatar');

  this.image_loader.onchange = function() {
 alert("Image loaded!")
        }

So, why “for label” doesn’t work in DOM objects in Phaser correctly ? ( “onchange” event not fires ) Is there any other solution to create file field as image ?

2

Here is a demo of my solution using 3rd party plugin. This plugin create a transparent file-chooser button.

  1. Create a cover by Image or Sprite game object.
  2. Create file-chooser button
  3. Sync file-chooser button to cover.
  4. Get onchange event

Edit:

You can copy and modify these code if prefer not using 3rd party plugin.

1 Like