Detect when user has selected a file for upload (without timers) - javascript

I would like to to create a 2-step file uploader:
Open dialog.
Select one file from computer.
I would like to eliminate the step where the user must submit the form, and instead do it automatically with JavaScript. Is there anyway to achieve it?
Thanks.

Setting an onChange event and checking for whether the ".value" of the upload field is "!= null" does the trick for me. However, accessing file upload fields programmatically is always a shaky issue, and things can change with future browser security updates.
If you want to be sure, use a flash based upload component like SWFUpload.

Related

Redirect file drop event into file input

I'm working on a basic jQuery plugin that attaches itself to a file input and allows the user to choose an image, with which the plugin will then generate a preview.
Note: The plugin doesn't immediately try to upload the file (That will happen when a form is submitted and is beyond the scope of the plugin).
What want to do is accept a drop event on another element (In this case the window), which would ideally set the value of the file input to be the dropped file, and update the preview.
Now I know from researching and looking at other questions similar to this, that it's not possible to programmatically set the value of a file input for security reasons, which makes perfect sense. User action is required to set the value of the file input.
Is there some way to perhaps take something from the drop event (Which is user input) and use it to fill the file input's value? Or is it just simply not possible whatsoever to programmatically set it's value?
Alternatively, if the above isn't possible - is there perhaps a way to redirect the drop event from my other element, onto the file input and let the browser handle setting the file input's value?
The only other way I could conceive this working would be to have the file input (Which in my case is positioned off-screen) follow the mouse around while it's dragging so that the drop event eventuallylands in the file input.
Any other techniques or tips welcome.
Thanks

Is there a way to type in a File Upload box with Protractor?

When the File Upload window pops up with the cursor already focused on the field, is there a way to make Protractor sendKeys to that, instead of going through the whole absolute path file select stuff?
I'm using AngularJS/Jasmine framework. Thanks!
Nope, the upload dialog you see is not under selenium's control. You have to avoid this popup being opened in the first place.
A common approach is to send keys containing an absolute path to a file to upload to a specific input with type="file".

Keeping the original behavior of a file input in Fine-Uploader

My problem is this: i have a form with a file input. This file input has a onchange event attached. How can i add Fineuploader to handle things like validation (fize size, format,), thumbnail previews, but not the upload of the files and keep the original behavior of the file input?
If you want to take advantage of many of Fine Uploader's features (chunking, progress, etc.) you're going to need to make sure your upload endpoint is set up the correct way. PHPFox's source is not open so I cannot see how their upload endpoint(s) work. One idea is to contribute your own. We have PHP examples.
Another theoretical idea is to turn autoUpload off in Fine Uploader. Use addFiles or addBlobs to add files to Fine Uploader from the input element's onchange, then use drawThumbnail, validate, etc. on Fine Uploader's files, but then have the actual file/form submission occur via the PHPFox addon form (i.e., Fine Uploader's upload button does nothing). FU's API methods and Core Options are going to be essential for this.

HTML5 File Upload Input - onChange

When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.

Trigger a file input to open via javascript

So I have an input, something like this:
<input type="file" id="file" />
I want to get the file open dialog to popup via javascript. I have tried things like this:
$('file').click();
(that's assuming I'm using something like prototype/mootools/jquery). However, this doesn't seem to do anything. Is there anyway I can trigger the click event for the file input without the user being forced to interact with the input directly?
I recall this is not possible due to it being a security feature. In fact, I'm pretty sure the button for the file browsing dialog does not even show up in the DOM (the field shows up, but not the button, which the browser renders automatically)
$('file').click()
This works (in Chrome 8). You just need to make sure it's not set to display: none;
An easy solution is to position it absolute and then set left to something like -1000px.
IIRC browsers don't allow this as a precaution mechanism. A script shouldn't be able to automatically upload a file in some way and tinkering with the File Open-dialog would be one of those ways.
Obviously this is bad in some situations...
As far as I know opening the file open dialog from javascript is blocked for security reasons.

Categories

Resources