Bootstrap drag and drop file upload with preview

Today, We want to share with you drag and drop file upload bootstrap.In this post we will show you dragdrop multiple file upload, bootstrap, hear for Custom drag file upload in Bootstrap 4 we will give you demo and example for implement.In this post, we will learn about
5 Ways to bootstrap file upload with an example.

Bootstrap 4 Image And Files Drag and Drop With Upload

Step 1: HTML Code

    
    
    
    


    

        

            

                
File Input Example


                

                    

                        

                            
                        
                    
                
            
            
        
    
    
    
    
    
    

CSS Code

Step 2:

.main-section{
	margin:0 auto;
	padding: 20px;
	margin-top: 100px;
	background-color: #fff;
	box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove,
.fileinput-upload{
	display: none;
}

JavaScript code

Step 3:

$("#file-1").fileinput({
    theme: 'fa',
    uploadUrl: '#',
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    maxFileSize:2000,
    maxFilesNum: 10,
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
});

I hope you get an idea about Bootstrap 4 file upload form with dragdrop Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.