I have struggled for long hours on this issue.
I've tried to upload directory as below on the chrome browser.
1. click the button named with 'Browse...'.
2. select a directory named with 'a'.
3. at this point, the directory hierarchy is ignored.
the directory has a structure as below.
ex) d:/test/a/b/c/1.txt
I want to keep directory structure as 'a/b/c'.
anyone else to know the resolution?
<f:form method="post" action="uploadFiles" name="uploadFiles" enctype="multipart/form-data">
Resource Id : <input type="text" name="resourceId" placeholder="ex) test or test_op"/><br/>
<input type="file" name="files" id="files" multiple="" webkitdirectory="" jsonware="true"/>
<f:submit value="submit" />
</f:form>
Well I am struggling for the same cause. This code really makes it happen but theres a bug or something with the transfering of the files/folder, out of 25 only 20 gets send, But anyway it may help you.
http://sapphion.com/2012/06/keep-directory-structure-when-uploading/
Let me know if you come up with something,
Related
I am trying to upload the two fields plus a file from react to backend express. But I don't know why if I put the value={statement} into the form, when I selected the file, after clicked "open" the file, nothing shows in the browser, but after I removed the value={statement}, "open" the file and the filename is showed.
The thing is how can I reference value after submitting the form?? If I removed the value, there is a network error showing 400.
<div className="control">
<input
type="file"
className="input"
value={statement}
onChange={changeHandler}
placeholder="Bank Name"
/>
Thanks,
Jo
It ends up that I placed the placeholder there when the input type ='file'
I have a very simple form in my react application to fetch the user credit card information as follows.
<form autocomplete="on">
<input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
<input name="cc-exp-month"/>
<input name="cc-exp-year"/>
<input name="cc-exp"/>
</form>
I also tested in a "react-way"
I want the browser (safari in this case) to show the credit card options like the image below.
Interesting fact:
I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above).
However, if I run npm run build and serve the ./build folder the credit card options don't show up.
That's what I still don't understand, why the same code works in one way but it doesn't work in another way?
PS1: I'm testing in both cases with HTTPS.
PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.
your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
https://greenido.github.io/Product-Site-101/form-cc-example.html
I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.
If both of them is working for you then you please compare them with your html.
As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>
An example of proper payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
just as a reminder i would like to add here
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
For example for CC
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
requestAutocomplete()
Read here:
https://developer.chrome.com/multidevice/requestautocomplete-faq
https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
https://blog.alexmaccaw.com/requestautocomplete
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
For Autofill to work on iOS safari, the page has to be served over HTTPS and the certificate should not be a self-signed one. It has to be one given a valid CA.
Hope this helps
Faced the same issue, check safari preferences
Make sure you are not using private mode or any other visitor account!
I'm building a simple form using AngularJS Messages.
Basically what I want to happen is:
User submits form, all appropriate errors show and prevents
submission
User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)
First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.
Any ideas?
<form name="orderForm"
ng-submit="orderForm.$valid && placeOrder()" novalidate>
<input type="text"
ng-model="orderParams.delivery_address.full_name"
name="fullName" required />
<p ng-message="orderForm.fullName.$error"
ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
This field is required</p>
<input type="submit" value="Submit" />
</form>
For me the problem was solved by adding ngMessgaes to my module dependencies.
I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.
you need to do three things:
1. add a boolean variable in your controller like: "showMessageBox" which is set to true.
2. when you submit you set "showMessageBox" to false.
3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable
I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.
Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/
i've been going from page to page all over the internet trying to find a simple and recommended way of uploading a single file in angularjs, so far i have found none, what i want is to be able to do something like this:
<input type="file" ng-model="file" id="form.file" />
<input type="text" ng-model="name" id="form.name" />
Then in my controller/service i have a function that posts all my form data:
SomeRandomService.save = function($scope.form) {
return $http
.post('/api/v1/some/random/url/', $scope.form)
};
Is this so difficult in angular? I am a newbie to angular so i can't even understand some of the solutions i have found online.
Is there something way more simpler? A plugin or service or directive that can do this for me?
I have already solved this problem, but it took me a while to realize what I did wrong. It's a very simple mistake, but I figured I'd post it here in hopes I can save someone else some work in case they run across the same mistake.
I was trying to use simple Angular validation to set a class on an input field based on whether it was valid. I failed to realize it wasn't working because I specified the name of my form with ng-form. So using $scope.form or the actual value of name attribute of the form did not work. Of course, the examples below are simplified and a much larger form could make this mistake much harder to recognize.
Here is a failed example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: myForm.myField.$invalid"/>
</form>
Here is a successful example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: form1.myField.$invalid"/>
</form>