Example of uploading images to server with React.js

[amirhhashemi]

Uploading images to the server is one of the most challenging things I've done with. I nearly spend one week finding a good way to upload images to the server and show a nice placeholder while it's uploading. It shouldn't be like that. I understand that there are dozens of ways to upload an image to the server and the core team can't promote just one way as the right way, but at least, they should provide some kind of advice, best practices, and examples to do that so people like me don't spend one week to do such a common thing.

Anyway, I created such an example for you :) it's mostly based on the ProseMirror's image upload example. The hard part was that I needed to dive into ProseMirror to understand that, you might too. It is what it is. I think after #2919 merged things will get simpler.

codesandbox: https://codesandbox.io/s/react-typescript-forked-c4inxv

Demo

2022-07-04.12-42-25.mp4

For now, you can just select an image from your filesystem. I'm working on adding drag and drop support. Then a placeholder will be shown based on the image's data-url and when the uploading got completed, the placeholder will be
replaced with the actual image.

Known issues

1. Do you see that layout shift when the placeholder gets replaces with the actual image? I don't know why that happens.
2. The image gets inserted after the cursor. it should be inserted before the cursor.

I hope the people that are reading this help me to resolve these issues. I've actually asked for help previously but no one answered.

[ikorason]

hey @amirhhashemi did you figure out how to do the drag and drop and with placeholder?