Notes on everything: Drag and drop by jQuery UI and Dropzone.js

Saturday, September 16, 2017

Drag and drop by jQuery UI and Dropzone.js

<head>
<link rel="stylesheet" type="text/css" href="./script/dropzone.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></link>
<style type="text/css">
.dropzone {border: none ! important;}
</style>
</head>
<body ondragover="open_dialog()">
<div id="dialog" title="Dialog" style="display:none;">
<form>
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"><span>Faites glisser et déposez ici.</span></div>
</div>
</form>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="./script/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("body").dropzone({
url: "http://192.168.1.1/upload.php", //Your URL to upload
addRemoveLinks: true,
previewsContainer: '#dZUpload',
clickable: '#dZUpload',
//If you are using cakephp 3, you need this token.
/*headers: {
'X-CSRFToken': $('meta[name="token"]').attr('content')
},*/
success: function (file, response) {
var imgName = response;
//For animation
file.previewElement.classList.add("dz-success");
//To add id
//file.previewElement.id = response.id;
console.log("Successfully uploaded :" + imgName);
}
});
});
dialog = $("#dialog").dialog({
autoOpen: false,
//open:function(event,ui){$(".ui-dialog-titlebar-close").hide();},
modal: true,
draggable: false,
closeOnEscape: true,
width: "50%",
show: "fade",
hide: "fade",
buttons:{
"Do something":function(){
$(this).dialog('close');
},
"Close":function(){
$(this).dialog('close');
}
}
});
function open_dialog(){
dialog.dialog('open');
}
</script>