Posting for someone else looking for a simpler solution as I found a solution;

Add the following to inside the <q-input>

@focus="(input) => input.target.select()"

Found it at https://github.com/quasarframework/quasar/issues/8402

The following code works for me - but it is not tidy - I am still getting my head around some js concepts and realise that someone will be able to provide a more concise solution, but seeing as this is unanswered for a couple of years I’ve posted my code. It lets a user upload a single picture upto 5mb, and updates the displayed profile picture from the uploaded image. I have also included the code I use to update the Cognito attributes.

I also encountered a s3 bucket issue when using amplify solved by https://github.com/aws-amplify/amplify-js/issues/960#issuecomment-421843145

Below is the code that works for me - Hope this if helpful

In template:

<q-uploader ref="uploadedImage" max-file-size="5242880" auto-upload :factory="updatePicture" label="Upload profile picture" accept="image/*"  />

In script:

function updatePicture(files) {
      pictureURL.value = onFileChange(files).resolve;
    }
    async function onFileChange(files) {
      console.log("uploading")
      const file = files[0];
      //console.dir(files);
      try {

   let response = await Storage.put(uid.value + file.name, file, {
       //acl: "public-read",
      contentType: file.type, // contentType is optional
   });
        console.log("uploaded");
        console.log(response);
        response  = getURL(response.key).then((url) => {
          console.log("url " + url);
          return url;
        });

   console.log("Uploaded with URL" + response);
            return response;
      } catch (error) {
    console.log("Error uploading file: ", error);
  }
    };

async function getURL(key) {
      try {
        const url = await Storage.get(key);
        console.log("url from getURL" + url.substring(0,url.lastIndexOf('?')));
        pictureURL.value = url.substring(0,url.lastIndexOf('?'));
      } catch (error) {
        console.log("Error getting url: ", error);
      }

As a bonus - here is the function I use to update the cognito attributes

async function  updateProfile() {
      const  user  = await Auth.currentAuthenticatedUser();
      console.log("updating profile " + firstname.value + " " + lastname.value);
      Auth.updateUserAttributes(user, {
        given_name: firstname.value,
        family_name: lastname.value,
        picture: pictureURL.value,
        name: firstname.value + " " + lastname.value,
      })
        .then(() => {
          console.log("updated profile");
        })
        .catch((err) => {
          console.log("error updating profile");
          console.log(err);
        });
    };

Same issue, just curious if there is a better solution in the current quasar version?

Posting for someone else looking for a simpler solution as I found a solution;

Add the following to inside the <q-input>

@focus="(input) => input.target.select()"

Found it at https://github.com/quasarframework/quasar/issues/8402