I want to use 6 input file in one page, in a vue template
I want that user could upload six files in six different inputs. each input is like this:
<div class="form-group">
<label class="form__label font-size--15 font-w--400">
{{$t("تصویر جلو کارت ملی")}}
</label>
<div class="input-group mb-3">
<div class="custom-file ">
<input id="melliCardFront" type="file" class="custom-file-input" #change="processMelliCardFront($event)" />
<label class="custom-file-label" for="melliCardFront">انتخاب فایل</label>
</div>
</div>
<div class="file-listing">
{{ mellicard_front.name }}
<span class="remove-file" v-show="mellicard_front" v-on:click="removeMelliCardFront()">حذف</span>
</div>
</div>
but when I use this, the input files Are arranged from above of page. when I take the opacity of input file to 1, the page is like this
my problem is that when I click on top of the page, it opens an input file. or in some browsers, it opens instead of other input.how can I fix this problem?
Related
I am building a user form that using form-group and row. I wanted to see what options you guys are using when you want the user to understand that this is an or? The two questions are not require but they just need to under one of the question
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="text" value="">
</div>
Perhaps something like this could work. There are two inputs for files and text. This makes it obvious that the user needs to pick one or the other.
//optional display uploaded file into text input
function displayUpload() {
var file = document.getElementById("txtFile").value;
document.getElementById("txtLink").value = file;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mt-5 px-5">
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="" placeholder='Enter link'>
<div class="input-group-append">
<button class="btn btn-secondary rounded-right" type="button" onclick="document.getElementById('txtFile').click();">Or Choose file</button>
<div class="custom-file" hidden>
<input class="form-control" onchange='displayUpload();' id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
</div>
And as a final note, I noticed that you named your IDs txtFile and txtLink if you would like to limit your file input you could also add accept=".txt" so the user could only upload .txt files.
This may seem a bit simplistic, but have you considered a simple bit of text saying 'or'
<div class="container">
<div class="form-group row">
<label for="enteredLink">Enter Link</label>
<input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="row"><p>or</p></div>
<div class="form-group row">
<label for="enteredFile">Upload File</label>
<input class="form-control" id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
It's not quite the same, but this is what the Gov.UK Design system does for radio button groups that are mutually exclusive - https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider
Edit - To highlight alternative used by SO
When posting this question I realised StackOverflow themselves do something similar to what you want. They essentially use an all in one box with clear calls to action to either drag and drop, browse or paste a link in
Clicking 'paste' sticks the text box on screen for users to paste their link in
It'll slightly depend on who your audience is and how tech savvy they are, and also what people mostly will do as to what option is best.
I have the below code snippet of a text box where one enters a mobile number. How do I have a pre-set value that a user can edit from?
For example:
The country code is already set and visible to the user, the user starts by entering their network provider number.
<div class="row">
<div class="col-md-6">
<div th:class="transfer-label"> Mobile Number
</div>
</div>
<div class="col-md-6">
<div class="form-group transfer-field">
<input th:id="msdn"
class="custom-input-normal rounded-input hollow-input-light"
type="text" name="msdn"/>
</div>
</div>
</div>
you can populate input tag with value using th:value attribute.
<input th:value="${variable}"> will render <input value="variablecontent">
I would like to create three state button in Angular2 using css- yes/none/no without using jQuery. I found this link in some answer on stackoverflow. The point is, that I need to put a few buttons next to each other, and each of them should be independent- every chosen value should be send to component. I've tried to use label implicitly (remove inputs ids), but it doesn't work. Please see full code: fiddle.
<div class="wrapper">
<div class="toggle_radio">
<label for="first_toggle">First Button <input type="radio" class="first_toggle" name="toggle_option"></label>
<label for="second_toggle">Second Button<input type="radio" checked class="second_toggle" name="toggle_option"></label>
<label for="third_toggle">Third Button <input type="radio" class="third_toggle" name="toggle_option"></label>
<div class="toggle_option_slider">
</div>
</div>
</div>
I am working on a bootstrap datepicker which will show only month and year. To some extent I have succeeded. I feel there is an issue with the import files sequence that the datepicker input box size is not correct. I have attached the plunkr. Need to click on Report Details on the left panel to check the actual output I am getting.
I need help with Index.html import file re-sequencing. Somebody please check it.
I am just adding a small code snippet. For the whole code please check the plunkr
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date:</label>
<div class="col-sm-4">
<div>
<div id="date" class="input-append" datetimez ng-model="var1">
<input data-format="MM-yyyy" type="text" id="input1" name="input1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<input class = "form-control" data-format="MM-yyyy" id="input1" name="input1"></input>
add .form-control to input tag and remove type="text" seemed to have worked.
Okay, so the thing is, I have a camera connected localy. Every time I make a request for the static URL it will always provoid a new picture.
So basicly, the picture is a static input...
I would like to be able to click on a lable (My input is hidden (CSS)) to upload the picture. Futher more, it will go into a editor. I just don't know how to grab the picture from a url.
Snippet is a example, with a static picture (Not the one I will be using localy)
I just need to grap the picture from a input, within my form.
(This is to make ID badges, a localy network setup)
<form action="#" method="POST" role="form">
<input type="file" acccept="images/" class="form-control" id="uploaded-img" accept="image/*">
<div class="upload-button">
<label for="uploaded-img">
<span class="label-text">Velg Bilde</span><span class="upload-icon"><i class="fa fa-upload"></i></span>
</label>
</div>
<input type="text" value="http://nortek.media/1.jpg" class="form-control-2" id="uploaded-img-2">
<div class="upload-button">
<label for="uploaded-img-2">
<span class="label-text">Ta Bilde</span><span class="upload-icon"><i class="fa fa-camera-retro"></i></span>
</label>
</div>
</form>
Thanks for help in advanced!