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