search

adrianhajdin / social_media_app

Build a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using React JS, Appwrite, TypeScript, and more.
https://jsmastery.pro
1.21k stars 365 forks source link

Rotation values lost? Postform to Posted #47

Open TAXI4L opened 6 months ago

TAXI4L commented 6 months ago

Hello

Problem solving something with image rotation. When a user creates a post with a photo the preview window that shows the photo is working great. ondrop / dropzone. FileUplaoder. However if the photo has rotation / uploaded from mobile it will loose whatever is working in the preview. PostForm onSubmit. The images are correct in the Appwrite DB preview. Something is ignoring their rotation or loosing that rotation when it pulls them back down and draws them in the social media app (doesn't matter if it's a grid or a profile picture, etc). I've been working on it for days, BlueImp / EXIF / etc and haven't been able to make a change to the rotation that carries over to the saved / posted file.

Any hints or tips to help me look at how to solve this would be greatly appreciated. And thank you. Your tutorial and source code really helped me a lot. Feel free to check out what you help me build.

Nupperson.com

and.... help! :)

TAXI4L commented 6 months ago

I think I solved it! Finally!!! Yay. Went through the appwrite info and found some details on images are stored which then brought me back to 'getFilePreview' - just needed to include the rotation value there. Solved.

in api.ts update getFilePreview.

Here is my updated function:

export function getFilePreview(fileId: string) { try { const fileUrl = storage.getFilePreview( appwriteConfig.storageId, fileId, 1800, // width, will be resized using this value. 0, // height, ignored when 0 'center', // crop center 60, // some compression 5, // border width 'CDCA30', // border color 15, // border radius 1, // full opacity 0, // no rotation 'FFFFFF', // background color 'jpg' // output jpg format );

Help closed. I guess this can be left here in if you want it.... in case others run into mobile upload image rotation issues :)

anantiikenna commented 2 months ago

if your file is GIF image or any. First make it acceptable by appwrite and Second there is a section in File Upload function ask for acceptable file in your shared Folder locate this code

 accept: {
      'imgae/*': ['.png', '.jpeg', '.jpg', '.svg']
    }

and add your image format.