How to detect if a site lets you upload files?

Question

I would like to be able to tell if a site lets you upload files. I can think of two main ways sites do it and ideally I'd like to be able to detect both:

• Button
• Drag & Drop

PhantomJS documentation has this example snippet:

var webPage = require('webpage');
var page = webPage.create();

page.uploadFile('input[name=image]', '/path/to/some/photo.jpg');

but it's not clear how I could figure out that input[name=image] actually supports uploading.

Currently, my crawlers are following all links and buttons on sites but I am not sure how to detect that "a file upload pop-up has been opened". The D&D case is even less clear to me. I need a solution for a single page and obviously I can then go and apply it to every page I pass.

UPDATE Turns out most of the time this does the trick:

document.querySelector('input[type=file]').click()

However, D&D areas aren't always clickable and you can't always assume [ondrop] will be present. Sometimes, the drop listener is added in code:

object.addEventListener("drop", myScript);

How can I check for presence of such elements then?

Answer 1

You can check if a form has enctype="multipart/form-data" or not. or search for input with type=file in html page.

Answer 2

AFAIK the best approach to upload files with selenium is to send the file to be uploaded directly to element located by this CSS Selector input[type=file].
So in order to check if some web page supports file uploading you can by checking if that page contains input[type=file] element.
This element is normally not visible and not interactable by GUI so you can only check it's existence, not visibility etc.

Answer 3

Nothing can get you 100%, but i think 99% it works with input[type=file] unless user wasn't creating it at runtime using javascript.

Or you can check for form's enctype but also it isn't always works as there's a good chance that user compress and changes the file into base64, then there will be no need for enctype to be multipart/form-data. So input[type=file] is the best way.

Answer 4

So selecting the file input type works most of the time:

document.querySelector('input[type=file]')

Sometimes it catches the drag & drop fields too because it is still the same element, just with a different "setup".

Sophisticated setups that use an event on an arbitrary element and do the rest in js would still be missed. I'll update when I discover the right way of doing this.