I finally found the solution to this problem which as turns out plagues many wordpress installations. Right after uploading an image through the "add media" button in an editor, the upload would fail with a "an error occurred in the upload error". However after refreshing the image would appear in the media browser window but when inserted into the editor it would show up with width and height both set to 1px.
After searching a lot without any success I solved the problem. Many people reported solving it by disabling all plugins one by one to find which was causing the problem. In my case it was a fresh wordpress installation without anything else, not even custom themes. So I decided to post it here in case anyone else is search and stumbles upon this post.
Please see this link for more details - it helped me https://sebastian.expert/fix-wordpress-an-error-occurred-in-the-upload-please-try-again-later/
Basically what it says is to use Developer tools in Chrome or Firefox to see the response from async_upload.php file after uploading files (when error message appears). It returns error details in JSON format. Having details it will be easier and a lot faster to resolve the problem.