There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here:
https://i.sstatic.net/aLAbo.png
When images of different sizes are uploaded, the buttons do not align horizontally. I now want to move the buttons above the preview, with the preview placed below the button. I have attempted using jQuery like this:
$('.file-preview').insertAfter('.btn .btn-primary .btn-block .btn-file');
$('.file-preview').detach().insertAfter('.btn .btn-primary .btn-block .btn-file');
However, these methods did not work as expected. If you have any alternative suggestions, please feel free to share them in the comments or answer. Thank you.
EDIT: Below is the code snippet for the widget:
<div class="col-sm-6"><input type="hidden" name="Contact[attachment_1]" value="">
<span class="file-input">
<div class="file-preview">
<div class="close fileinput-remove">×</div>
<div class="">
<div class="file-preview-thumbnails">
<div class="file-preview-frame" id="preview-1447035353917-0" data-fileindex="0">
<img src="blob:http%3A//localhost/0bc1d4fc-c8f8-4b7c-a963-0d3090193832" class="file-preview-image" title="Business-card-template-design.jpg" alt="Business-card-template-design.jpg" style="width:auto;height:160px;">
<div class="file-thumbnail-footer">
<div class="file-caption-name" title="Business-card-template-design.jpg" style="width: 238px;">Business-card-template-design.jpg</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
<div class="kv-upload-progress hide">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
0%
</div>
</div>
</div>
<button type="button" title="Abort ongoing upload" class="hide btn btn-default fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button>
<div class="btn btn-primary btn-block btn-file"> <i class="glyphicon glyphicon-camera"></i> Attach Business Card 1 <input type="file" id="contact-attachment_1" class="" name="Contact[attachment_1]" accept="image/*" data-krajee-fileinput="fileinput_a052254a"></div>
</span>
<!--[if lt IE 10]><br><div class="alert alert-warning"><strong>Note:</strong> Your browser does not support file preview and multiple file upload. Try an alternative or more recent browser to access these features.</div><script>jQuery("#contact-attachment_1").removeClass('file-loading');</script><![endif]-->
</div>