dropzone.js

How to create a dropzone in my div element?

Notes : I tired all questions and answers related this topic.

I use form tag then work completely fine. See Code Here .

I want to "place" a drop zone in my div tag, but somehow it doesn't work. See the code here.

Snippet Example Below.

Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
    //url: "/file/post",
	addRemoveLinks: true,
	maxFilesize: 0.5,
	dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',
	dictResponseError: 'Error uploading file!'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>

<div class="clsbox-1" runat="server">
    <div class="dropzone clsbox" id="mydropzone">

    </div>
</div>

Solution

  • After a long research I have finally got the best solution.

    HTML

    <div class="clsbox-1" runat="server">
    <div class="dropzone clsbox" id="mydropzone"></div>
</div>

    JavaScript

    Dropzone.autoDiscover = false;
    
// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", { url: "/file/post"});
    
// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

    JSFiddle Demo Here