0

I am learning MERN stack by building a blog application. Everything has gone well so far. I would like to add a feature that allow users to upload a file such as video but they should be able to decide where that file should appear in their blog post using the pointer focus. For instance, if a user has written a blog post and in the middle of the post, the user wants to upload a file like an image, the user should be able to upload the file and the file would display in the middle of the blog post. If the user wants the image to display at the beginning, the user simply needs to focus the pointer at the beginning of the post. Currently, user can upload image but it will strictly appear at the top of the post because that is where I placed the input file html code.

I don't know if this explains what I'm looking for. I tried searching online but couldn't find anything related. Maybe I do not know the exact words to use for the search. You can help me with link or search terms or explanation on how I can get this done. Thank you so much.

  • This is possible by inserting some tag in your text, for example `[image: uploaded-image.jpg]` . This way you can upload the image from your file input and place it anywhere. During rendering parse the filename in squar bracket and insert an `img` tag. For inserting text at a position check this [How to insert text into the textarea at the current cursor position?](https://stackoverflow.com/questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position) – kiranvj Jun 12 '22 at 15:03
  • Thank you very much, would check out the link. –  Jun 12 '22 at 15:19

0 Answers0