Normally, to upload a file, it would be two-steps process - select a file and then confirm upload. I am working on uploading profile picture. Since profile pic is usually small, I want to reduce mouse-clicks for my users by making the file upload to start upon file selection. Please suggest good, and perhaps common, ways to achieve this (I would also like to learn their pitfalls, if any). Thanks.
The change event will fire when a file is selected from a file upload field. The value of the field will be '' if no file is selected (field is cleared).
<form method="post" action="upload.script">
<input type="file" id="formfile"/>
<input type="submit" id="formsubmit"/>
</form>
<script type="text/javascript">
var file= document.getElementById('formfile');
var submit= document.getElementById('formsubmit');
// If scripting is available, can auto-submit the form, so no submit
// button needed.
//
submit.parentNode.removeChild(submit);
// When field is filled in with a filename, submit form
//
file.onchange= function() {
if (this.value!=='')
this.form.submit();
};
</script>
Is this a good idea? Questionable. Automatically submitting a form if the user doesn't expect it may have a negative impact.
You could use JQuery to automatically post the file to the sever upon selection...
Problems:
What if the user doesnt want to choose that file but the file has already be uploaded to the server?
What if the previous takes place before the file has finished uploading?
How about when the user doesn't do anything and closes the page? How long will you keep the file
If you use GMail, you'll notice they have a drag-drop solution for attaching files to an e-mail. Drag from your desktop onto a predefined region and wallah.
If you have HTML5 support for the people using this (most should if they're keeping up to date) then you could use the drag-drop built in to HTML5.
Try looking at this: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
You could also give something like Plupload a try (http://www.plupload.com/) but that might be overkill for this. Plupload is more will suited for larger files that need progress animations and chunking. However, I know you would be able to script it such that the upload starts immediately and you redirect as soon as it completes. It also might need server-side work that you aren't set up for.
Related
So, I am on a 'competitive coding' website which requires me to manually select a file ("choose file") to submit to the online testing grader. I was wondering, since there are a multitude of extensions on chrome that allow me to auto-fill a form option, is there a way to automatically fill the "choose file" button when submitting a code file based on the last file I chose when clicking that same "choose file" button webpage?
Unfortunately JS can't help here. For security reasons, it is not possible to manually add and upload a file in a file input control with JavaScript.
The reason behind this is that webpages would be able to upload files from someone's computer, so long as they knew the path.
What you could do as a last resort would be using a third party software that would register mouse clicks for you and emulate a real user acting on the interface.
You cannot do that since this input type cannot be prefilled, here is a trick though :
What you can do is having an hiden collection of text inputs containing the base64 of the files you load using your form.
When a user selects a file, just use btoa() and atob() methods to base64-it and store it in this hidden form input
If you want to 'preset' some files, just fill your list of base64 and simply display a kind of placeholder to show that you have a file 'already appended'
Then in your script when form is submitted, work with the list of base64 instead of the actual values from the input type file
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.
I have a problem to retain attached files in file input <input type="file"> after cancelled choose file again. Anyone have idea to solve this?
Thank you
This is the built-in behaviour of the browser when dealing with the <file> element. If you select a document, then click "Browse" again, but then click "Cancel" it clears the field.
Nothing you can do about it, other than maybe using a plugin for uploading files, (such as https://blueimp.github.io/jQuery-File-Upload/ for example) which allows the user to upload files using a different UI.
I have a file input element like this:
<input name="fileupload[]" id="fileupload" type="file" multiple="" />
A user browses for their files and selects them, the files then appear in a list.
Now say a user wants to not add a particular file they hit a cancel button and it is deleted. That works but how do I remove the value from the fileupload input so that when they do upload the file that is meant to be deleted isn't added?
You could use javascript to place a hidden input with each separate file instead of holding them in an array initially, then attach an event handler onSubmit which could collect all the separate files and upload them.
When you need to delete a file from the 'queue' you could just use your javascript to remove the hidden input the same way you are removing it from the list.
If you'd like some code examples, please post some of your code to get us started - it is hard to post code for you if there is no indication of such things like which server side language you are using to handle the files and what javascript you are using to handle the client side code.
You cannot set the value(or clear the value) of a file-input, but you can replace the input with a new input, the effect would be the same.
Instead of using an input type="file" html tag, is it possible to bring up a choose a file to upload dialog box by clicking a input type="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.com dialog box. When a file is clicked, the file name is shown on the screen.
How are they doing that?
<input type="file" style="display:none;" id="inputfile"/>
try this
Try this one. I think it is useful.. :)
I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!
By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html
Check this fiddle: http://jsfiddle.net/A4BS7/1/
NOTE:
a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.
b) For the upload to work as expected, you'll need to include the <input type="file"> element in your form. The text element can be used for displaying the selected file at best.
It is not possible to alter an input[type=file] as you like, it is a purely native form element.
Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.
There are though some methods to style:
Styling File Upload / Select Input Control
Styling an input type="file"
Styling file inputs with CSS and the DOM
Have a look at plupload, I've used it many times to handle file uploading.