Home Web Development JavaScript jQuery Drag and Drop File Upload | Bootstrap Image Upload and Preview

jQuery Drag and Drop File Upload | Bootstrap Image Upload and Preview

November 24, 2019

26857

How we can create a drag and drop upload field for uploading images? Solution: See this jQuery Drag and Drop File Upload, Bootstrap Image Upload, and Preview.

Previously I have a custom file upload input, but this is an image upload field with drag and drop feature. Basically, this type of upload field contains an area where you can upload files by click on mouse over the field or also you can drag and drop files to the field. After selecting the file you will show the file name, or if it is image then you will see the preview of image.

Today you will learn to create Bootstrap Image Upload and Preview. Basically there is a field for upload file, you have to click over the select field for select and upload the image. Also, you can drag and drop the image file for selecting and see the preview. This program is for uploading image because it will show the image’s preview, But you can use this program to upload any type of file after some modifications.

So, Today I am sharing jQuery Drag and Drop File Upload. There I have used bootstrap to create a responsive layout and pre-build styling & functions. And for the important functioning, I have used jQuery and as we know it is a JS library that’s why I am putting this in the JavaScript category.

If you are thinking now how this image upload field actually is, then see the preview given below.

Preview Of Bootstrap Image Upload and Preview Program

See this video preview to getting an idea of how this drag and drop upload program looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Drag and Drop File Upload Source Code

Before sharing source code, let’s talk about it. First I have created the layout using Bootstrap grid layout and pre-built class and ID names. In the form field, I have used a special attribute that is required for uploading a file. I have used enctype="multipart/form-data" command in the form tag (info). In the HTML file, I have created all the elements like upload field, button, and text, etc which are based on bootstrap. Also in the HTML file, I have linked other files like CSS, JS, and Bootstrap, Jquery’s CDN link.

Now using CSS I have a little bit styled the elements like dotted border on the field, placing text, etc as you can see in the preview. There is fewer lines of CSS codes because the program is based on bootstrap and it is a library of HTML CSS JS. Using CSS I have modified the color of the upload button and basic margin, padding.

jQuery handling here an important feature of the program. It shows a preview of the image with a 200px width after selecting the image. Also, there is a reset feature, after selecting the image you can reset the form for starting over again. The drag and drop is based on Bootstrap’s JS library, we just have to use some pre-built class/ID names like dropzone, dragover, etc

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop Image Upload | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<section>
  <form action="" method="POST" enctype="multipart/form-data">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label class="control-label">Upload File</label>
            <div class="preview-zone hidden">
              <div class="box box-solid">
                <div class="box-header with-border">
                  <div><b>Preview</b></div>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-danger btn-xs remove-preview">
                      <i class="fa fa-times"></i> Reset The Field
                    </button>
                  </div>
                </div>
                <div class="box-body"></div>
              </div>
            </div>
            <div class="dropzone-wrapper">
              <div class="dropzone-desc">
                <i class="glyphicon glyphicon-download-alt"></i>
                <p>Choose an image file or drag it here.</p>
              </div>
              <input type="file" name="img_logo" class="dropzone">
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <button type="submit" class="btn btn-primary pull-right">Upload</button>
        </div>
      </div>
    </div>
  </form>
</section>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Drag and Drop Image Upload | Webdevtrick.com</title>

</head>

<body>

<label class="control-label">Upload File</label>

<div><b>Preview</b></div>

<i class="fa fa-times"></i> Reset The Field

</button>

</div>

</div>

<p>Choose an image file or drag it here.</p>

</div>

</div>

<button type="submit" class="btn btn-primary pull-right">Upload</button>

</div>

</form>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
.container {
  padding: 50px 10%;
}

.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}

.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;
}

.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}

.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 50px;
  font-size: 16px;
}

.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  height: 150px;
  cursor: pointer;
  opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}

.preview-zone {
  text-align: center;
}

.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

.btn-primary {
  background-color: crimson;
  border: 1px solid #212121;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

.container {

padding: 50px 10%;

}

.box {

position: relative;

background: #ffffff;

width: 100%;

}

.box-header {

color: #444;

display: block;

padding: 10px;

position: relative;

border-bottom: 1px solid #f4f4f4;

margin-bottom: 10px;

}

.box-tools {

position: absolute;

right: 10px;

top: 5px;

}

.dropzone-wrapper {

border: 2px dashed #91b0b3;

color: #92b0b3;

position: relative;

height: 150px;

}

.dropzone-desc {

position: absolute;

margin: 0 auto;

left: 0;

right: 0;

text-align: center;

width: 40%;

top: 50px;

font-size: 16px;

}

.dropzone,

.dropzone:focus {

position: absolute;

outline: none !important;

width: 100%;

height: 150px;

cursor: pointer;

opacity: 0;

}

.dropzone-wrapper:hover,

.dropzone-wrapper.dragover {

background: #ecf0f5;

}

.preview-zone {

text-align: center;

}

.preview-zone .box {

box-shadow: none;

border-radius: 0;

margin-bottom: 0;

}

.btn-primary {

background-color: crimson;

border: 1px solid #212121;

}

function.js

The last step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var htmlPreview =
        '<img width="200" src="' + e.target.result + '" />' +
        '<p>' + input.files[0].name + '</p>';
      var wrapperZone = $(input).parent();
      var previewZone = $(input).parent().parent().find('.preview-zone');
      var boxZone = $(input).parent().parent().find('.preview-zone').find('.box').find('.box-body');

      wrapperZone.removeClass('dragover');
      previewZone.removeClass('hidden');
      boxZone.empty();
      boxZone.append(htmlPreview);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

$(".dropzone").change(function() {
  readFile(this);
});

$('.dropzone-wrapper').on('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass('dragover');
});

$('.dropzone-wrapper').on('dragleave', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).removeClass('dragover');
});

$('.remove-preview').on('click', function() {
  var boxZone = $(this).parents('.preview-zone').find('.box-body');
  var previewZone = $(this).parents('.preview-zone');
  var dropzone = $(this).parents('.form-group').find('.dropzone');
  boxZone.empty();
  previewZone.addClass('hidden');
  reset(dropzone);
});

// Code By Webdevtrick ( https://webdevtrick.com )

function readFile(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {

var htmlPreview =

'<img width="200" src="' + e.target.result + '" />' +

'<p>' + input.files[0].name + '</p>';

var wrapperZone = $(input).parent();

var previewZone = $(input).parent().parent().find('.preview-zone');

var boxZone = $(input).parent().parent().find('.preview-zone').find('.box').find('.box-body');

wrapperZone.removeClass('dragover');

previewZone.removeClass('hidden');

boxZone.empty();

boxZone.append(htmlPreview);

};

reader.readAsDataURL(input.files[0]);

}

function reset(e) {

e.wrap('<form>').closest('form').get(0).reset();

e.unwrap();

}

$(".dropzone").change(function() {

readFile(this);

});

$('.dropzone-wrapper').on('dragover', function(e) {

e.preventDefault();

e.stopPropagation();

$(this).addClass('dragover');

});

$('.dropzone-wrapper').on('dragleave', function(e) {

e.preventDefault();

e.stopPropagation();

$(this).removeClass('dragover');

});

$('.remove-preview').on('click', function() {

var boxZone = $(this).parents('.preview-zone').find('.box-body');

var previewZone = $(this).parents('.preview-zone');

var dropzone = $(this).parents('.form-group').find('.dropzone');

boxZone.empty();

previewZone.addClass('hidden');

reset(dropzone);

});

That’s It. Now you have successfully created jQuery Drag and Drop File Upload, Bootstrap Image Upload, and Preview Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

6 COMMENTS

Yogendra November 26, 2019 At 1:54 am

I want a website html /css and no fremwork in source code.

Reply
Abhishek April 14, 2020 At 10:27 am

how to remove the file upload after once upload a file

Reply
Alberto July 30, 2020 At 8:58 pm

Thanks you, your solution worked 100% for my requirements, its very simple and clean.

Reply
compressjpg March 8, 2021 At 2:57 pm

nice drag and drop tutorial, can you also provide for multiple images?

Reply
toot27 April 23, 2021 At 8:03 am

how to use it for multiple files?

Reply
- fathur May 5, 2021 At 10:25 pm
  
  have you found the solution??
  
  Reply