How to use q-uploader to upload a file to Amazon S3

[Mickey58]

After realizing that Heroku as the deployment environment for my Quasar app has restrictions with uploading/downloading of files, I’m now looking for some sample code how to use q-uploader to upload files to Amazon S3..

I’m not familiar with S3 yet and have used q-uploader so far only in a simple way, to upload files to the file system of the Quasar frontend app.

All I found so far as a boilerplate to start from is a tiny code snippet on the old Quasar site (https://forum.quasar-framework.org/topic/5382/how-to-use-q-uploader-in-quasar-app-deployed-on-heroku ) that uses q-uploader with so called signed S3 URLs.. It uses a q-uploader prop :url-factory=“getSignedUrl”, but I can’t find that prop in the API documentation of the current version of q-uploader on https://quasar.dev/vue-components/uploader#QUploader-API.

Is there another sample or Codepen how to use q-uploader to upload a file to Amazon S3?

Would greatly appreciate some advise.

[morgler]

I’m also trying to use QUploader directly to S3 and found the old forum entry. Note that the entry is pretty old and the API of QUploader has changed since. The property is now called :factory (not :factory-url). Still I haven’t managed to get this to work with the current version of Quasar - it would be awesome, if someone could provide an up-to-date code snippet of how to upload to S3 directly using QUploader.

[jubalj]

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);
        });
    };