How to handle input file validation using html form - file

I have try to form validation with input type file . When i try to validate attached files missing. I need to again and again upload the files in form. Anyone can share how to avoid this issues

Related

File type input field found empty when come back to the previous step in formik wizard

I have created multi-step form using formik-wizard, I added file type input field in first step but if I go to 2nd step and come back to 1st step then file input field found empty.
How can I solve this issue ?
Here is my code example on codesandbox.
Formik doesn't support file upload by default, but you can try the solution by following the link:
ReactJS: How to handle Image / File upload with Formik?
You can store the file value in a state variable and use it during form submission.

Why is the file object empty inside formik's values object on file upload form?

I'm trying to upload a file using formik but the file object is always empty and I cannot quite figure it out. Here is a link to the codesandbox - https://codesandbox.io/s/formik-file-input-with-validation-forked-r5jqg?file=/src/App.js
I got this implementation from this issue filed on github - https://github.com/formium/formik/issues/926.
Your help would be greatly appreciated.
You were setting an object which was e.target.files[0] to a file which was initially undefined. you need to set e.taregt.files[0] to reader.readAsDataURL(file). not to your state object file too. you need to set name and size as that is what you need for validation schema and display. I've commented the supported formats from validation schema as for input type=file you can directly mention the accepted formats by accept key.
Here is my working modified sandbox.

Koa-better-body file uploading not working

I'm using Koa-better-body with Koa2, and I want to handle single file uploads in a POST form submission (input type=file).
While all the other fields show up properly under ctx.request.fields, i.e. ctx.request.fields.title, my file input's contents simply aren't available!
Interestingly,under ctx.request.fields, I still get a value for my file input (ctx.request.fields.coverimage), but that only gives me a file-name string, not the actual file (a cover image in this case).
What am I missing!
I bet that you forgot to add to your form:
enctype="multipart/form-data"

How to upload multiple files on single statement in selenium?

I am not getting any warning or error message while executing the program.
wd.findElement(By.xpath("XPATH")).sendKeys("ABC.jpg","XYZ.jpg");
But no file is uploading.
wd.findElement(By.xpath("XPATH")).sendKeys("can we make CTRL+A operation" );
Thanks in advance.
I think you may be going about this while "file upload in Selenium" thing wrong, so that's what I'm going to address.
This article by SauceLabs covers the basic steps to handle a file upload through Selenium in both Java and Ruby. Assuming you're using Java, there are a few steps you'd need:
Set the FileDetector method for your WebDriver
Get a WebElement pointing to a valid HTML input tag of type file
Have Selenium type in the file's path (Not sure if this requires absolute paths, but it's probably a good idea)
Submit the form
The following code listing demonstrates how to perform each of these steps:
wd.setFileDetector(new LocalFileDetector());
// point your webdriver to the page containing the upload form.
WebElement upload = wd.findElement(By.xpath("XPATH")); // TODO replace xpath!
upload.sendKeys("/path/to/ABC.jpg");
upload.submit(); // NOTE: Submits the form *containing* the upload field!
Because you've set the file detection method to LocalFileDetection, Selenium will be able to find the appropriate file. If this is not set, then Selenium defaults to the UselessFileDetection implementation, which fails every time to avoid accidental file uploads.
Caveat: If you're using a Javascript or Flash-based multiple file upload system, then this probably won't work, since those typically bypass the original input field or handle upload independently from the form's submission.
You are not getting an error because sendKeys() accepts an array of CharSequence objects. and you are conforming to that method contract
But no file is uploading
That is because the way your code is written now, will actually send the text: ABC.jpgXYZ.jpg.

angular.js custom validation with invalid input values

I put the project here :
but beacuse it need in directive to read from useremail.html file it not work at all. if anybody can put it in inline template and make it work would be great. I try it but I failed !
if you download and put all files in a server it will work.
my problem is that I dynamically add some validation to a field but when the field is invalid it remove the content.
www.plnkr.co/edit/f91dJlloO364w8ERLI5V?p=preview

Resources