We Keep Coding

Prevent file upload from starting in filepond

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)?

How to manually trigger a upload file event on Dropzone

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!

Button to show choose a file to upload dialog box

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.

IE9 file input triggering using Javascript

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

start file upload upon selection

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.