|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
File inputs are form-controls which can be used to allow users to browse through local files and select one (or more). Halfmoon comes with a custom file input design which works across browsers. The multiple="..." attribute is supported, which can be used to create multi-file inputs.
<!-- File input -->
<div class="custom-file">
<input type="file" id="file-input-1">
<label for="file-input-1">Choose a file</label>
</div>
<!-- Multi-file input -->
<div class="custom-file">
<input type="file" id="multi-file-input-1" multiple="multiple" accept=".jpg,.png,.gif">
<label for="multi-file-input-1">Choose images</label>
</div>
<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>The following things should be kept in mind when using custom file inputs in Halfmoon:
By default, the string "No file chosen" is appended to the container with the class .custom-file. However, this can be easily overridden by adding the data-default-value="..." attribute on the file input. The contents of this attribute can also be HTML as string, and Halfmoon will render that underneath the file input button.
<div class="custom-file">
<input type="file" id="file-input-2" data-default-value="No CV chosen">
<label for="file-input-2">Choose CV</label>
</div>
<div class="custom-file">
<input type="file" id="file-input-3" data-default-value="<a href='...' class='hyperlink' target='_blank' rel='noopener'>cute-cat.jpg</a>" accept=".jpg,.png,.gif">
<label for="file-input-3">Choose picture</label>
</div>
<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>The last example illustrates how files coming in from storage sites (such as S3, Cloudinary, etc.) can be set as default values on forms for the file inputs.
File inputs can be disabled by adding the disabled="..." attribute to them.
<!-- Disabled file input -->
<div class="custom-file">
<input type="file" id="file-input-4" disabled="disabled">
<label for="file-input-4">Choose a file</label>
</div>
<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>Adding the class .is-invalid to a file input provides a visual cue to the users that the chosen file (or the lack of one) is invalid. This can also be achieved by adding the .is-invalid class to a parent container with the .form-group class.
<!-- Invalid file input -->
<div class="custom-file">
<input type="file" id="file-input-5" class="is-invalid">
<label for="file-input-5">Choose a file</label>
</div>
<!-- Invalid file input through parent container -->
<div class="form-group is-invalid">
<div class="invalid-feedback">
The file is corrupted.
</div>
<div class="custom-file">
<input type="file" id="file-input-6" data-default-value="spreadsheet.xls">
<label for="file-input-6">Choose a file</label>
</div>
</div>
<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .
