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.
Related
I have a form where users can upload a file. The uploading and validation afterwards (filesize, filetype...) is done with php by submitting.
But I wonder how I could give the user a "visual feedback" that his file was "picked" immediately. So I don't need validation nor anything complex. I just want to either color the label green or rename the label of the upload field when the user has selected a file and clicked "Choose" in his browser.
How would I do that most easily?
On success assign one variable then use that variable to add class to the element.
I am having some trouble with disabling Submit button in a HTML form in AngularJS.
Scenario:
I am selecting a certain process from a HTML Select Box ie. Drop
Down List
Once I select some entry from that, the lower portion is
automatically populated with the required form which again has a set
of inputs
Once you fill in these value, you can either Submit or Cancel the request
Condition:
There is a process in the list where I need to upload 1 or more files along with other input parameters. To do this, I am using a two step approach where I first Choose a File using a button and then I use another button to Upload the file. Clicking on this button makes a REST call and the file is sent to the required target.
I am using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload to accomplish this.
Problem:
I was initially using ng-disabledto disable submit button on the condition that All mandatory input elements are filled and all input validations are passed. Now the problem occurs when I am in the use cases which need files to be uploaded. When I choose a file and upload it, HTML treats that element as empty as the file is already sent to its target and hence fails the validation All mandatory input elements are filled! If I remove this validation, my form expectedly get submitted even if Mandatory fields are empty.
So what can I do in this case to disable my submit button?
Create a boolean variable as what #ShashankVivek said.
if file uploaded $scope.uploaded = true.
so your button should look like this
<button data-ng-disabled="!form.valid && !uploaded">Submit</button>
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.
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.
I've got a form that uploads files (post), with a few <input type='file'/> tags, and I want users to be able to drag and drop files onto the web page, eg, from their desktop. When they do this, the files should be added to the form as file input tags
It shouldn't matter where they drop it on the page (and I am already handling this drop event on the page)
When I have the File object for the file they dragged, how can I add it to the form as an <input type='file'/>? Or, is there another way to add it to the form so it'll be sent when the form is submitted, as if it was selected using the file input itself?
Thanks
You could try Uploadify > http://www.uploadify.com/documentation/
It has an API that you can call with javascript.