How is twitter able to add images to a page without using the <input type='file>.
For example
I try to see their source code to get a better understanding on how they are able to do that but no luck yet on understanding how it is done it seems like they are able to do this without using the <input type='file'> if you guys can give me a link to a article or a code example on how this can be done. I will really appreciate that.
I just see that Twitter is using <div contenteditable="true"></div> with some style and script. Adding contenteditable attribute on element, allows you to edit directly inside the element and inserting an image from your computer too.
Read more about contenteditable change events and the rest is up to you. There are several ways to send data to the server without using <input> and <form> elements like using Ajax.
Here is the example https://jsfiddle.net/sxanyar/9zdjq4rv/
It's more complicated than just using an input instead. However, for the uploading part, you can use https://www.dropzonejs.com/.
DropzoneJS is an open source library that provides drag&drop file uploads with image previews.
You can search for more example drag n drop attachment. Below is 2 familiar component is use for drag n drop.
