"Bootstrap Drag and Drop Upload"
Bootstrap 3.2.0 Snippet by MohamedAlaa

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"><strong>Upload Files</strong> <small>Bootstrap files upload</small></div> <div class="panel-body"> <!-- Standar Form --> <h4>Select files from your computer</h4> <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> <div class="form-inline"> <div class="form-group"> <input type="file" name="files[]" id="js-upload-files" multiple> </div> <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button> </div> </form> <!-- Drop Zone --> <h4>Or drag and drop files below</h4> <div class="upload-drop-zone" id="drop-zone"> Just drag and drop files here </div> <!-- Progress Bar --> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> <!-- Upload Finished --> <div class="js-upload-finished"> <h3>Processed files</h3> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a> </div> </div> </div> </div> </div> <!-- /container -->
/* layout.css Style */ .upload-drop-zone { height: 200px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 200px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; }
+ function($) { 'use strict'; // UPLOAD CLASS DEFINITION // ====================== var dropZone = document.getElementById('drop-zone'); var uploadForm = document.getElementById('js-upload-form'); var startUpload = function(files) { console.log(files) } uploadForm.addEventListener('submit', function(e) { var uploadFiles = document.getElementById('js-upload-files').files; e.preventDefault() startUpload(uploadFiles) }) dropZone.ondrop = function(e) { e.preventDefault(); this.className = 'upload-drop-zone'; startUpload(e.dataTransfer.files) } dropZone.ondragover = function() { this.className = 'upload-drop-zone drop'; return false; } dropZone.ondragleave = function() { this.className = 'upload-drop-zone'; return false; } }(jQuery);

Related: See More

Material Kit Pro

Questions / Comments:

Hi. I want to upload images from this form via ajax call like this:
var startUpload = function(files) {
$.ajax({
url : $(uploadForm).attr('action'),
data : {images:files},
type : 'POST',
success : function(data) {
alert(data);
}
});
};

but i have error because files is wrong serialized. Can someone help me.

Igor () - 9 years ago - Reply 0

Does someone know any tutorial or video that teachs how to use this snippet on my website and make it send those files to an email? I dont know much about backend, serverside language, etc.. Thank you in advance

Fernando Monteiro () - 9 years ago - Reply 0

Can't seem to get it to run in plunker. Am I missing something here? http://plnkr.co/edit/xykfGR...

William Olson () - 9 years ago - Reply 0

Hi max , i got the front end working , am currently using asp.net webforms , and also MVC for server side stack , am not getting both to sync up and call my serverside function

Deric () - 9 years ago - Reply 0

Hello, I entered the drag and drop in my form working perfectly, the only one that does not work is the drag and drop, drag an image if not the preleva..come do?

Marco () - 9 years ago - Reply 0

I just found a good solution to upload multiple files Hope it will be helpful. http://blog.toufika.com/fil...

Khalid Ahmed Sojib () - 9 years ago - Reply 0

I'm so new to this, where do the files get stored?

Erik Thiart () - 10 years ago - Reply 0

You would store them on your server or on S3. What server side technology are you using?

maxsurguy () - 9 years ago - Reply 0

I have dreamhost cloud server, how do i get uploads to show on my page? at the moment its all there but when i drag and drop nothing happens. Thanks in advance

Abdel H Djeebet () - 9 years ago - Reply 0

Sweet I never actually thought that far... ( Noobly moment)

Erik Thiart () - 9 years ago - Reply 0

I just wanted to know how to set the upload server/folder? I always get the error "POST" method

Mahmoud Nabeel () - 10 years ago - Reply 0

I would actually suggest you use something like http://rubaxa.github.io/jqu... to get that part figured out in most cross-browser way possible. If you want you can also get my book that has a whole chapter devoted to AJAX file uploads: http://maxoffsky.com/frontend/

maxsurguy () - 10 years ago - Reply 0

max, your links seem to not work

kevin () - 10 years ago - Reply 0

Hello! Sorry, my blog was down for a couple days, please try checking it out again at http://maxoffsky.com/frontend !

maxsurguy () - 10 years ago - Reply 0