I’m happy to say that I am one of the many developers have found their way to Jasny Bootstrap. Especially the file upload component, is very popular. It can replace any normal <input type="file"> element to display a nice widget that is consistent across browsers and can show a preview for images.

I added this cool and light, "4kb. js file' and '3kb .css file", Bootstrap styled File Upload Input in my Orchard OForm Email Contact Form.

I Used Vandelay Industries Classy for script reference ~/Themes/PJS.Bootstrap/scripts/fileinput.js in Oforms and this page.

Added the script to my theme scripts folder.  Themes/PJS.Bootstrap/scripts/fileinput.js

The .css is included in my main Theme.

You can use it on My Email Page, sent me a comment.

Try it below.

 
Select fileChange Remove
 

At the bottom of my OForm Email contact form added the file input as so. For Bootstrap 2 not 3

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" class="file-input-size"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span>
    <span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>
<script type="text/javascript">
    $('.fileinput').fileinput()
</script>
<div class="clearfix:after"></div>

For Bootstrap 3

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
    <div>
<span class="btn btn-default btn-file"><span class="fileupload-new">Select image</span>
        <span
        class="fileupload-exists">Change</span>
            <input type="file">
            </span>
<a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
 
    </div>
</div>

Bootstrap 3 .css see this snippet at: http://www.bootply.com/72995

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn-file {
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  font-size: 23px;
  direction: ltr;
  cursor: pointer;
}
.fileupload {
  margin-bottom: 9px;
}
.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}
.fileupload .thumbnail {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
}
.fileupload .thumbnail > img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
}
.fileupload .btn {
  vertical-align: middle;
}
.fileupload-exists .fileupload-new,
.fileupload-new .fileupload-exists {
  display: none;
}
.fileupload-inline .fileupload-controls {
  display: inline;
}
.fileupload-new .input-group .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.thumbnail-borderless .thumbnail {
  border: none;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.fileupload-new.thumbnail-borderless .thumbnail {
  border: 1px solid #ddd;
}
.control-group.warning .fileupload .uneditable-input {
  color: #a47e3c;
  border-color: #a47e3c;
}
.control-group.warning .fileupload .fileupload-preview {
  color: #a47e3c;
}
.control-group.warning .fileupload .thumbnail {
  border-color: #a47e3c;
}
.control-group.error .fileupload .uneditable-input {
  color: #b94a48;
  border-color: #b94a48;
}
.control-group.error .fileupload .fileupload-preview {
  color: #b94a48;
}
.control-group.error .fileupload .thumbnail {
  border-color: #b94a48;
}
.control-group.success .fileupload .uneditable-input {
  color: #468847;
  border-color: #468847;
}
.control-group.success .fileupload .fileupload-preview {
  color: #468847;
}
.control-group.success .fileupload .thumbnail {
  border-color: #468847;
}

 

I added the normal global variables for the email body form response field.

Date: {oforms.createdDate} Name: {Name} Email: {Email} Topic: {Topic} Message: {Message} IP: {oforms.ip}

In my response mail I get the image included and uploaded with the form.

No needing a upload handler like a lot of upload file inputs need. I used to dream about something like this.

Nice addition to Orchard 's OForm module.

 

No Comments

Comments are Moderated, from, "(Spam-bots)", before they are posted.

 12995 Views