I have a Vue application which need to upload images on server like FormData. As I found out if image is too big Javascipt accidentally rotate the image by 90°. I dont understand it. There is not command to make any changes on image. This is the code:
uploadFiles(files) {
this.validateUploadFiles(files);
if( this.uploadErrors?.length ) return;
this.loading = true;
const timestamp = Date.now();
files.forEach( (file, index) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
const image = new Image();
image.src = fileReader.result;
image.onload = async () => {
const formData = new FormData();
formData.append("file", file);
formData.append("index", index);
formData.append("timestamp", timestamp); // This is cause we need to delete prev old remaining files.
try {
const result = await this.$api.media.uploadCampaignPdfExportMedia( this.campaignId, formData );
this.uploadSuccess.push(result.data.fileName);
} catch ( error ) {
console.log(error);
this.uploadErrors.push( this.$t("campaign.upload.error.upload_failed", {name: file.name}) );
}
};
};
});
this.loading = false;
},
I dont understand what happened there. Can somebody tell me please what is going on?