how the drag and drop to upload files on pc’s work
In: 5
Drag and drop is just a pretty user interface, behind the scenes you’re still passing a directory path + file name. The upload proceeds from there the same way it would as if you navigated to the file itself in a pop-up explorer window.
E: spelling
Think of it like a “hot key” command for copy and paste. When you click, hold, and drag the computer memorizes the file location and path to access it. Then when you release the file the computer uploads it to wherever you released it. The PC does this naturally within its file explorer. So programming a box in a webpage to do that isn’t much of a stretch.
It is slightly different between different systems (Windows, OSX, X11, Wayland, JavaScript, etc.). But the basic principle of it is that when you start to drag something an event is issued to the application controling that area of the screen that a drag have started. It is then possible for this application to return an object idendifying what you dragged with a unique referance as well as things like its icon and name. When you drop the object a simliar event is sent to the receiving application as well as the sending application. These will then negotiate between themselves what to do. Some applications might only expect a text element in which case the path to the file is used, some expect an image which can be done by having the sending application open the file as an image and then transfer this image to the receiving application. But if they negotiate to send the file then the applications will end up sending the files from one to the other.
As you might expect not all applications are able to properly negotiate with each other. Things are even more complex when one of the applications is a JavaScript application running on a web page inside the browser which requires the interfaces to be translated through the browers and such. But when it works it is quite cool.
The Windows APIs present a means for the windows on your desktop to send messages to each other.
The window you drag the files from sends a message to the window you drop the files into, telling it what you did and what the files were. Then the receiving window does the dirty work. And it might send a message back to the sending window telling it what it did.
Windows Explorer (the GUI) mediates this and makes it look pretty with icons and stuff.
That’s it.
Under Windows, source application (explorer in your case) creates a stream which is a standard way to access a content as bytes, and registers it with drag drop system using the functions provided by the OS. It can also provide extra details but it is not mandatory since OS figures out the mandatory parts.
Then the drag operation starts and OS itself asks every window or control if they allow dropping any content, support content type (image, text, etc, support the operation (copy, move, etc). OS itself acts as a broker and handles messaging between the target and the source. If target accepts the content, it was given access to the stream which it can read from.
Nice part is a stream can be anything; a file, text on clipboard, output of a console application, random number generator, anything that can read as bytes can be expressed as streams so you can drag a file from browser and drop to the explorer too and it works exactly like this
Latest Answers