I’m making a browser add-on that finds all input elements and watches for changes. It works great everywhere except on docs.google.com when I click the upload button.
At first I thought they might be creating inputs with JavaScript, but I couldn’t find that in their code. Then I noticed a hidden input that’s not in the DOM when I use breakpoints.
I’m really curious how they’re doing this. Does anyone know the trick Google Docs is using for file uploads without a regular input element? It seems like they have some special method that’s different from normal file upload processes.
If you’ve dealt with something like this before, I’d love to hear your thoughts. Maybe there’s a clever way to handle file uploads that I’m not aware of?
From my experience working on similar projects, Google Docs likely uses a technique that leverages both modern web APIs and dynamic element manipulation. It seems they may be employing the File System Access API along with dynamically created hidden input elements that only exist temporarily during the upload process. This combination allows the app to trigger file dialogs and handle files without having a persistent input element in the DOM. Observing their event listeners and dynamic element management might give you further clues to how they’re accomplishing this.
Having encountered similar challenges, I suspect Google Docs is utilizing a combination of the Drag and Drop API and custom event handling. They likely intercept the drag event, prevent the default behavior, and then process the file data directly. This approach bypasses traditional file inputs entirely.
Another possibility is that they’re using the Clipboard API to handle paste events for files. This would allow them to capture file data when users paste from their system clipboard.
Both methods would explain why you’re not seeing typical input elements. To detect these uploads, you might need to monitor for drag, drop, and paste events instead of focusing solely on input changes.
hey, i think google docs might be using some fancy javascript trickery. maybe they’re creating temporary input elements on the fly and removing them right after? or could be using the File API to handle uploads directly. it’s probly some combo of techniques to make it smooth and invisible. have u tried watching network traffic during an upload?