Problem with <input type=file> on mac in telegarm web app

Question

I have problem in telegram web app on macOS (Vue js). If i use input with type file, then click and choose nothing - input don't work again.

<template>
  <div>
    <button @click="triggerFileInput">Add document</button>
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleFileChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const fileInput = ref(null);

const triggerFileInput = (event) => {
  event.preventDefault();
  fileInput.value.click();
};

const handleFileChange = (event) => {
  const files = event.target.files;
  if (files.length > 0) {
    console.log(files[0]);
  }
  event.target.value = '';
};
</script>

"then click and choose nothing" -- what do you mean? click what? How is the file selection dialog being closed? — devlin carnate
– devlin carnate, Commented Jun 2 at 20:36
1) click but - file upload window opened 2) click cancel - file upload window closed 3) click but - file upload window didn't open — Archon
– Archon, Commented Jun 2 at 20:38
Also, please explain what you found when you debug your code. At what line is the code not behaving like you expect? — devlin carnate
– devlin carnate, Commented Jun 2 at 20:39

Jeremy Griffin · Accepted Answer · 2025-06-02 21:19:56Z

0

I think, the file input’s change event only fires if the selected files actually change. When you cancel, the input’s value remains unchanged (often empty), so the browser doesn’t trigger the change event the next time you open it. As a result, your handler doesn’t run and the file dialog may seem unresponsive.

So, To fix that problem, you have to reset the file input's value before opening the dialog.

Even if the user cancels, the next time the file input opens, the value is fresh and change will fire is if a file is selected.

This is the update code.

<template>
  <div>
    <button @click="triggerFileInput">Add document</button>
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleFileChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const fileInput = ref(null);

const triggerFileInput = (event) => {
  event.preventDefault();
  // Reset input value before opening file dialog
  fileInput.value.value = null;
  fileInput.value.click();
};

const handleFileChange = (event) => {
  const files = event.target.files;
  if (files.length > 0) {
    console.log(files[0]);
  }
  // Clear the input value after processing (optional)
  event.target.value = null;
};
</script>

answered Jun 2 at 21:19

Jeremy Griffin

1013 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Archon Jun 3 at 19:19

It didn't work(

Collectives™ on Stack Overflow

Problem with <input type=file> on mac in telegarm web app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related