Is it possible to prevent the upload of a file from starting in filepond from client-side Js? (E.g. if a text input is not filled).
Even if the upload was started manually by clicking on a button (included in filepond input), I still don't have control on whether the upload should carry on.
I know there's a way to implement that by creating a validation plugin (returning a promise), but I thought there was an easier way to do it (I can't find any relevant method/function in the docs).
Edit:
I found a way to do it by creating a plugin (very similar to filepond-plugin-file-validate-size), but the LOAD_FILE event isn't the one I'm looking for. Is there another event that's triggered after the file has been added and the user has clicked on the submit button (on the right)?
Related
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 Dropzonejs nicely integrated into my frontend (VueJS).
I have problem with Acceptance Testing Dropzone using Webdriver / Codeception. Bottom line is Webdriver NEEDS a file input so it can attach files too.
<input id="file_upload" type="file" name="file"/>
Any way to manually trigger a upload inside the dropzone instance? I can put a button on the page and trigger the upload inside dropzone but keep its functionality. This input would only render when my frontend configuration is set to <> PRODUCTION.
Thanks in advance!
Edit:
I just found out Dropzonejs appends a hidden input (.dz-hidden-input) to the body by default or werever you want using de hiddenInputContainer option.
That input is directly hooked into Dropzone, if you edit the source and make it not hidden and use it to pick files the queue process runs automatically. Thats what I need!
Problem is the input is Hidden and my test suite + selenium webdriver cannot interact with the input if its hidden. Any way to make it visible without altering default behavior?
Thanks!
this works for me
put in your test
$I->attachFile('input.dz-hidden-input', 'your_file.txt');
Selenium can only work with file input via the $I->attachFile method. I dropped dropzonejs in favor of another solution (custom made) that implements a and its all good now!
I had a post here:
.change acting weird in IE9
However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.
My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.
I have a file input
<input type="file" name="abc"/>
now I've done 2 things.
I've hidden the input and created a button (for better styling control) that activates the input.
<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>
and then the JS for the interaction between the two:
$("#mybutton").click(function() {
$("Input[type=file]").click()
};
and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).
$("input[type=file]").change(function() {
$(this).parent().submit();
});
When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()
anyone know how to fix this?
As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.
The good news is that there is a way to bypass the security restriction from IE using a label :
Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
Disguise the label as a button using CSS.
The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.
If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.
make sure your code is in $("document").ready(function(){... here..});
seems file inputs when wired up with .live("change", function(){}); dont quite work well
the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload
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.