I have following problem. I have input field in form, type of file:
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
I am setting using JavaScript also files property of this input and I want this input on submit of form send the file property instead of his value. Is it possible to do so?
var data = e.dataTransfer;
var input = dojo.byId(inputName);
var file = data.files[i];
input.files[0] = file;
data is a datatransfer object, I am getting files from there.
I know, it will be possible only in few browsers, I dont care. I just need to get it working at least in FF.
So if I understand you correctly you drop some files and you want to populate a file input object
I see a drop example here http://help.dottoro.com/ljslrhdh.php
but to populate the file field you will need a pretty heavy privilege change using a signed script - UniversalFileRead is probably the one you need
Related
I have an image as a file
var file = new File(...);
and I want to "upload" it to an input field (in order to send it to the server later when submitting my form)
<input type="hidden" id="hiddenInput" name="Files[0]"/>
Is it possible to do something like that?
Set error message when user forgets to upload image. i have not found anything most of the errors are uploading errors i want one that lets the user know that they forgot to upload image also i don't want to let the user go tho the next page until the image is uploaded. i have tried using my old code for forgot first and last name but that doesn't seem to work. that is just an example to show you what i use for errors please help
function formValidator() {
var names = document.getElementById('names');
if (isAlphanumeric(names, "Please enter first and last name")) {
<input type="file" name="file3" id="file3" />
I think you're over-engineering a bit here. You can actually rely on attributes of input in HTML5 that can validate or invalidate form submission for you. For example, denoting an input as required and using formvalidate can trigger this automatically.
<form action="" method="post" id="myform">
<input type="file" name="file3" id="file3" required formvalidate>
<input type="submit" novalidate>
</form>
The browser will insure the input is supplied before allowing the submission. You can also hook into the form's onsubmit handler via javascript if you need to do further validation...
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
I'm looking for a possibility to input several files in a row in an HTML form. It strikes me that there seems to be no easy solution for this (or at least I haven't been able to find it despite several hours of searching). If I use the multiple attribute in an <input type="file" name="myFiles[]" multiple />, I can choose several files at a time holding Ctrl, but if I choose one file at first, then click the input field again and choose another one, the second file seems to overwrite the first one.
So I thought I might try to use javascript to add more <input type="file" name="myFiles[]" /> fields (with the same name), since I have seen something similar somewhere. I tried the following:
JavaScript:
function addInputFileEle() {
var field = document.getElementById("filesField");
var row = '<input type="file" name="myFiles[]" onchange="addInputFileEle();" />';
field.innerHTML += row; // add one more <input type="file" .../> element
}
HTML:
<form method="post" action="#" enctype="multipart/form-data">
<fieldset id="filesField"> <!--for adding more file-input rows-->
<input type="file" multiple name="myFiles[]" class="multi" onchange="addInputFileEle();" />
</fieldset>
<input type="submit"/>
</form>
The document indeed does create additional file-input elements whenever I click on one of them and select a file, BUT: The file does not get uploaded! I mean, after I select the file, the file name does not get displayed, instead, it still says "Choose a file" (or "Select a file", not sure about English). So apparently my onchange="addInputFileEle()" overwrites the normal reaction (the file getting 'loaded' into the input element)? Even though this does not seem logical to me. Can anyone help? Why does the file not get selected in the end? Or maybe there is a simpler solution than mine, which would of course be very welcome. Thanks in advance!
Ok I will just post my solution in case anyone else is searching for a way to select several files for upload one by one. As #CodingWithClass pointed out, I was resetting the input field by using something like parentElement.innerHTML += additionalInputElement;. Instead, I should have used appendChild as #JoshuaK suggested:
<html>
<head>
<meta charset="UTF-8">
<script>
function addFileInput(fieldsetName, firstInputId) {
var fs = document.getElementById(fieldsetName);
// only add one if the last file-input field is not empty
if(fs.lastElementChild.value != '') {
var firstInputFile = document.getElementById(firstInputId);
var newInputFile = document.createElement("input");
newInputFile.type = firstInputFile.type;
newInputFile.name=firstInputFile.name;
newInputFile.multiple=firstInputFile.multiple;
newInputFile.class = firstInputFile.class;
newInputFile.onchange=firstInputFile.onchange;
fs.appendChild(newInputFile);
}
}
</script>
<title>MultiFile-Testing</title>
</head>
<body>
<?php print_r($_FILES); // see if files were uploaded in the previous round ?>
<form method="post" action="#" enctype="multipart/form-data">
<fieldset id="filesFS">
<input type="file" multiple name="myFiles[] id="firstInputFile" onchange="addFileInput('filesFS', 'firstInputFile');" />
</fieldset>
<input type="submit"/>
</form>
</body>
</html>
I'm looking to write a test to upload a file using Fluentlenium and DropZone.js (http://www.dropzonejs.com/). Dropzone.js works in a modal and then you can drag and drop or upload the normal way.
As soon as you click to upload the test crashes because your no longer in the browser.
I've found many posts getting this to work in Selenium using things like:
WebElement fileInput = driver.findElement(By.xpath("//input[#type='file']"));
fileInput.sendKeys("C:/path/to/file.jpg");
I however cannot sendKeys to anything because their isn't even an input type="file" when using DropZone.js.
The only input types I'm seeing are all type hidden.
<input type="hidden" name="key" value="temp/${filename}">
<input type="hidden" name="AWSAccessKeyId" value="secret">
<input type="hidden" name="acl" value="private">
<input type="hidden" name="success_action_redirect" value="">
<input type="hidden" name="policy" value="secret=">
<input type="hidden" name="signature" value="secret">
<input type="hidden" name="Content-Type" value="application">
We're also using Amazon Web Server to upload the documents too, it seems like everything is working off the below script:
<script id="hiddenKeyPairs" type="text/javascript">
var hiddenKeyPairs = {
key: 'temp/${filename}',
AWSAccessKeyId: 'secret',
acl: 'private',
"success_action_redirect": '',
policy: 'secret',
signature: 'secret/secret',
"Content-Type": 'application'
};
var formAction = 'https://secret.com/';
</script>
Which is located on my page.
I'm not seeing anything helpful on https://github.com/FluentLenium/FluentLenium#driver for this.
Do I need to somehow send the file to the key hash in the above script?
Any thoughts?
I'm not sure about the AWS part but I've a similar question about file upload (Programmatically upload / add file via Dropzone e.g. by Selenium), and some potential solutions. I feel they are not very robust, but basically:
Approach 1: Use Java Robot to simulate the GUI actions -
// this opens the file browser window
driver.findElement(By.id("uploadDropzone")).click();
// put the file path in clipboard, paste (C-V) to the window, enter.
StringSelection ss = new StringSelection("some file path");
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);
Robot robot = new Robot();
Thread.sleep(2000);
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(5000); // need some wait for GUI action to work...
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER)
Approach 2: Do all in code (hacky...) - yes there is a file input element, but only defined in Dropzone.js itself, which can be selected with $(".dz-hidden-input"). But you also have to make it visible (as Selenium can only act on visible elements), then can call sendKeys on it. And after that, again in Javascript, retrieve the File object from that element, then pass to addFile(file) on the Dropzone object.
i have a form which has a file input element and when the user selects the file i want to set the selected file to another file input which is in hidden iframe,
this is what is my form:
<form name="uploadForm" >
<input type="file" id="fileone" name="fileone" value="" />
<button type="button" id="attachement_upload" onclick="addFile()" >Upload</button>
</form>
<iframe id="FileUploadFrame" name="FileUploadFrame" src="" style="display: none; border: 0; width: 0; height: 0;">
<form id="FileUploadForm" name="FileUploadForm" accept-charset="utf-8" target="FileUploadFrame" enctype="multipart/form-data" encoding="multipart/form-data" method="POST" action="CIMtrek_Regional_WhseForm_FileUpload">
<input type="file" id="filetwo" name="filetwo" value="" />
</form>
</iframe>
and my java script :
function addFile(){
//this is where i want to clone the fileone to filetwo and submit the form which is in iframe
}
I have seen some thing like this but really don't know how to do :
$(".inputfield1").change(function(){
var $this = $(this), $clone = $this.clone();
$this.after(clone).appendTo(hiddenform);
});
Please help me to get this done.
You can't (or shouldn't) be able to do this. The file input type, given that it has direct access to the user's file system, has special security restrictions. Most notably you cannot set the value of a file input in JavaScript, as this would allow you to do things like set it to something like ~/.ssh/id_rsa and steal important data without the user being aware. As a consequence, jQuery shouldn't be able to clone the file input because it can't set the value.
To get this to work you'll have to let the user click on the file input that is in the iframe, perhaps using some CSS positioning tricks to make it seem part of the page. Alternatively, if your users typically have more modern browsers, you could use the File API and upload the file with Ajax.