No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QFile behavior when canceling the Open File Dialog

    Framework
    2
    2
    349
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tdumitr last edited by

      I have noticed a strange (incorrect?) behavior with QFile when canceling the Open File Dialog in Windows. Here is the scenario:

      1. Click on the QFile control
      2. Select a file “file.ext” in the Open File Dialog and press OK.
      3. The QFile now displays “file.ext”
      4. Open the Open File Dialog and press Cancel
      5. The QFile is now empty (the “file.ext” has disappeared)

      My expectation is that Cancel closes the Open File Dialog without changing the content of the QFile. In other words, canceling the Open File Dialog would leave the content of the QFile to “file.ext”.

      Is there a way to change the QFile behavior? If not would you consider either changing it or having a property based on which the behavior switches from discard to keep?

      T 1 Reply Last reply Reply Quote 0
      • T
        tof06 @tdumitr last edited by

        Hi @tdumitr,

        Not sure this is possible out of the box. This behavior is the same with a classic <input type="file">

        What you can do, but it’s more a hack than a solution, is to listen to @input event, and if the picked file is undefined, restore the previous picked:

        <q-file
              v-model="file"
              label="Pick one file"
              filled
              style="max-width: 300px"
              @input="filepicked"
              clearable
            ></q-file>
        
        ...
        data () {
            return {
              file: null,
              oldPickedFile: null
            }
          },
          methods: {
            filepicked(file) {
              if (file !== void 0) {
                this.oldPickedFile = file
              } else {
                this.file = this.oldPickedFile
              }
            }
          }
        ...
        

        In action :
        https://codepen.io/cp-tof06/pen/KKpbKeL

        I suggest to add clearable prop to q-file, allowing the user to clear the field, since cancel won’t do it anymore

        1 Reply Last reply Reply Quote 0
        • First post
          Last post