I have such an input file tag:
<input type="file"
#fileInput formControlName="browseDocument"
id="uploadFile"
(change)="uploadFileEvt($event)"
name="uploadFile"
accept=".pdf,.xml"
/>
I want to test the upload file, but I need that uploadFileEvt function will be executed.
How could I cause it to happen in the test?
Thanks!
I think you just need to use .trigger('change') after the .attachFile() or .selectFile(),
cy.get('input[type=file]')
.selectFile({...})
.trigger('change')
Related
I am trying to upload a file but getting error "The specified selector does not match a file input element", I know testcafe requires input type="file" for uploading files, But as we are reusing our custom component for file uploads where we are giving input type="url" It's not working with testcafe.
Here is the java script/HTML code
<input name="images" accept="image/*" type="url" class="form-control col-11 false" value="">
And I am trying to access the css selector like this
const click_add_image=Selector('input[name="images"]')
const add_image=Selector('input[name="images"],input[inputtype="url"]')
test
('add images', async t=>{
await t
.click(click_add_image)
.wait(2000)
.setFilesToUpload(add_image,[
'./_uploads_/Share_Knowledge.png'
])
I am getting error The specified selector does not match a file input element
I only find the file reading API on the server side. How should I read a file on the client side, with a filter dialog?
Thanks!
You can use an HTML file input with an accept attribute to restrict the type of file:
<input id="fileSelect" type="file" name="file" accept="image/*">
Then you can listen for the user selecting the file with a change event:
Element fileSelect = query("#fileSelect");
fileSelect.onChange.listen( (event) => print('${event.target.files[0].name}'));
event.target.files is a FileList object.
I want to upload multiple files into my website onclick of submit.
I was able to achieve this partially. Multiple files are being uploaded in my website. But the problem is that i want different file uploads to upload files in different location using the same Controller
For eg
<form name="upload" id="upload" action="~/Home/MultiUpload" method="post" enctype="multipart/form-data">
<label>Filename: <input type="file" name="file1" /></label>
<label>Filename: <input type="file" name="file2" /></label>
<label>Filename: <input type="file" name="file3" /></label>
<input type="submit" value="Submit" />
</form>
From the above code, I want file1 to upload file to ~/App_Data/Uploads1, file2 to ~/App_Data/Uploads2 and file3 to ~/App_Data/Uploads3
Here is my code of the controller trying to save the files
Function MultiUpload(file As List(Of HttpPostedFileBase)) As ActionResult
If (Not IsNothing(file)) Then
For Each item As HttpPostedFileBase In file
Dim filePath = IO.Path.Combine(Server.MapPath("~/App_Data/Uploads"), IO.Path.GetFileName(item.FileName))
item.SaveAs(filePath)
Next
End If
Return RedirectToAction("Index")
End Function
As mentioned earlier, all the files are uploading files to the same location.
If uploading to different locations is somehow not possible, i would atleast want to track which filename is coming from which FileUpload
Thanks for your help
Very much appreciated
I'm running a login form, which - in case of success - forwards the user to a specific page via JS location.href. The browsers correctly recognize the form as a login form and offer to save the password. Now only in Google Chrome, the prompt disappears once the location changes. So the prompt is visible for just a split second, making it impossible to save the password.Is there any solution for this? Refreshing after login success is a common thing, so there should be a way to fix this..
Edit:
This is what the form looks like:
<form id="loginform" action="process.php" target="processframe" method="POST">
<input id="login_name" name="name" type="text" placeholder="Username"><br>
<input id="login_password" name="password" type="password" placeholder="Password"><br>
<button>Submit</button>
</form>
<iframe src="" id="processframe" name="processframe" style="display:none;"></iframe>
So the request is processed in an iframe. process.php then calls a javascript function:
window.setTimeout("parent.loginsuccess()", 1000);
The loginsuccess() function:
function loginsuccess()
{
location.href="/home.php";
}
My server side code is the following (just for the sake of testing it):
def upload = Action(parse.maxLength(maxLength = 10*1024, parser.multipartFormData)) {
implicit request =>
Logger.info("data: " + request.body.dataParts)
Logger.info("file: " + request.body.file("picture"))
Logger.info("req: " + request.contentType)
Logger.info("req body: " + request.body)
Ok("File has been uploaded")
}
My client side code is a simple form that has an input of type file.
#helper.form(action = routes.Application.upload, 'enctype -> "multipart/form-data") {
<p>
<input type="text" name="name" />
</p>
<p>
<input id="imageFile" type="file" name="picture" accept="image/*" />
</p>
<p>
<input type="submit" value="Save" />
</p>
}
The problem is that if you try to upload files that are bigger than 10KB the browser will hang waiting for the server to finish even though it appears that the server has finished consuming the request. How to solve it?
Unfortunately, there seems to be a problem related to this in Play 2.0.4 and the browser will hang waiting for the file to finish uploading even though the request body has been consumed in the server side. A discussion regarding the issue can be found here and it was reported here (play doesn't finish consuming request if maxlength is reached).
Fortunately, this has been resolved in Play 2.1 and the first release candidate is already available. So, the best thing to do would be to migrate your app to Play 2.1.