We Keep Coding

How to detect if a site lets you upload files?

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?

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

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.

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.

Upload Image and stay on page

I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!

I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.

Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.

Is it possible to manage multiple sessions with tinymce

I am using TinyMCE 4 for my project and I'm trying use it for editing multiple files in the same time. I'm using setContent when I'm loading files. But I want each file to have it's own undo history.
I'm not sure if I'm able to explain. Let's say I have 3 files
a.html
b.html
c.html
I'm loading each files content when user click on their name using setContent to TinyMCE. But I want them to jump back and forward in between files while each one having it's own undo history. I also want it to remember where was selected and where was the keyboard pointer last time.
Thank you.

I had to start seperate tinymce editors. And after showing and hiding active one using
tinymce.get(inactiveid).hide();
tinymce.get(activeid).show();

Scraping an xls file from javascript (web page) in R

I am attempting to create an R script that specifically details how to acquire the data I am using for analysis in R for reproducability reasons. Usually the first step is as simple as assigning a url for the xls file to a variable in R and proceeding from there, but the website I am scraping from seems to produce its xls files via javascript (A language I have no knowledge of).
Follow these steps to get to an example XLS:
Go to http://hcupnet.ahrq.gov/HCUPnet.jsp?Id=B08F84A071883804&Form=SelDXPR&JS=Y&Action=%3E%3ENext%3E%3E&_DXPR=DX1
Click "Principal Diagnosis"
Type "599.0" in the text box (without the quotation marks) and leave the radio button for "Each code separately" checked
Click "Next"
On this page check all of the radio buttons
Click "Next"
On this page check all of the radio buttons
Click "Next"
On this page you should see all of the data, as well as some links. One of these links is titled "Save results as an Excel spreadsheet". Clicking on this link will download an XLS file with the data to your computer.
I've inspected the element and can clearly see that it is querying a database, I'm just not entirely sure how to get that query into my R script to pull the xls file down.
Any help is much appreciated.

(not technically a full-on answer, perhaps, but the comment box doesn't allow real formatting)
RSelenium can perform all those actions. However, will there be many different selections/combinations of options? If not, you could just build a list of URLs like this one:
http://hcupnet.ahrq.gov/HCUPnet.jsp?Parms=H4sIAAAAAAAAACWJPQ.CMBgG_5KYMDACHSTGBgUT16fvtcrXoos_nybc5ab766evfDcU52vnonsVmlVWVfCnFIcQw9rXo0wEDIgsrGwk3ppkNQ0tTnb72BNPP7YX7jzyy6YDzbkdSuxNr2gAAAA6D4E19A7096C3AE9FD48005A5B0802A684BBBEB8
which goes right to that page for each download. You can capture that url by hitting Esc instead of actually downloading the XLS file and then copying the URL from the location bar.
On that page you can use the XML library or rvest to ingest and extract the onclick attribute following tag:
<a href="Javascript:void(0)"
onclick="window.open('HCUPnet.xls?Id=0A8C3E07CD01B562&Form=DispTab&JS=&Action=%3E%3ENext%3E%3E&__InDispTab=Yes&_Results=Save&_Results3=&SortOpt=');">
<img height="19" src="arrow_off3.gif" alt="" align="absMiddle" width="15" border="0">
Email a link to this page</a>
(I included the full anchor reference as you'll need to use that in the XPath or CSS selector to find that tag, but you might be able to get away with just doing an XPath or CSS "contains" for HCUPnet.xls in the onclick attribute, too).
Then, just extract the HCUP… string from there and prepend http://hcupnet.ahrq.gov/ to it in a download.file call.

Swapping file input elements with jQuery

I'm building a website where users can upload images. I don't want to use a flash plugin like SWFUpload or Uploadify, but I would like them to be able to upload multiple images at once. This would lead me to use a file input with the multiple="" attribute set. Problem with that is, the user can only select multiple images from the same directory on their computer.
To counter this, I had an idea that involves Javascript. I have a file input on my page with the multiple attribute set, and when the user selects some files with that file input, I then hide it with CSS. After that, I use Javascript to place a new file input in its place, which the user can use to upload more files from different directories. That way, when the user has all the images they want to upload, I have a form with multiple file inputs being sent which I can handle using PHP as my backend.
This is my relevant markup:
<div id="select_images">
<input type="file" name="files[]" multiple="multiple" />
</div>
And my Javascript (using the jQuery library):
$('#select_images input:first').change(function(){
// User selected some images to upload, hide this file input
$(this).css('right', '-10000px');
// Place a new file input to take its place
$(this).before('<input type="file" name="files[]" multiple="multiple" />');
});
At the moment, if I select some images to upload, jQuery correctly hides the current file input and places a new one where the old one was. So the markup is now this:
<div id="select_images">
<input type="file" multiple="multiple" name="files[]">
<input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>
This is where the problems are. If I select more files to upload using the new file input that was placed with jQuery, nothing happens. The new file input inserted using jQuery doesn't seem to accept the file, as Firebug isn't showing any file data relating to the input. Is there some sort of security in place stopping me from putting files in an input inserting into the DOM using Javascript?
Thanks!

This method works fine, BUT. Every time you create a new file input, you can actually start submitting that field right away. If you create a hidden iFrame on the page, the form can use the iFrame as a target and thus start the upload process immediately.
Meanwhile, you can create a new form element with a new file field inside it. Rinse and repeat!
As for your particular trouble, there isn't any security restriction. Are you basing the issue strictly off Firebug, or have you tried to POST the form to the server? There ARE security restrictions regarding javascript's ability to look at the value of a file input, and this can affect Firebug.