File Upload With Preview Without Ajax



0- layouts

  <a href="http://assets/js/vendor/plugins/purify.min.js">http://assets/js/vendor/plugins/purify.min.js</a>
  <a href="http://assets/js/vendor/fileinput.min.js">http://assets/js/vendor/fileinput.min.js</a>
  <a href="http://assets/js/vendor/fa/theme.js">http://assets/js/vendor/fa/theme.js</a>

1- form

  <input id="photo" name="photo[]" type="file" multiple class="file-loading">

2- scss

.file-drag-handle {
  display: none;
.file-drop-zone {
  margin: 0;
.file-preview {
  padding: 0;
  border: 0;
.fileinput-upload {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  cursor: default;
  opacity: 0;
  span {
    display: none;
.fileinput-remove {
  margin-right: 5px;
  display: none;
  font-size: 25px;
.file-preview-frame {
  box-shadow: none !important;

3- js

  theme: "fa", // remove if no need
  showClose: true,
  showCaption: false,
  showUpload: true,
  showRemove: false,
  showBrowse: false,
  browseOnZoneClick: true,
  allowedFileExtensions: ["jpg", "png", 'jpeg'], // change to what u want
  maxFilePreviewSize:3072, // change to what u want
  maxFileSize: 3072, // change to what u want
  dropZoneTitle: 'Drag & drop Photos here …', // change to what u want

  // we need this or the delete btn wont show up
  // this is = to the form route, we cant make it = null or it wont work
  uploadUrl: "form-store-route"

// to show the x icon on the top right when files are added & hide when clicked
$('#photo').on('fileloaded', function(event, file, previewId, index, reader) {
  $('.fileinput-remove').show(function() {
    $(this).click(function() {

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.