Dropzonejs html only works in form not in div
why dropzonejs only works in form not div
This code is ok:
<form id="demo-upload" asp-area="User" asp-controller="Image" autocomplete="off" asp-antiforgery="true" class="form dropzone"
enctype="multipart/form-data" asp-action="UploadImage" method="post">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
</form>I have to include other fields so I need to move the dropzone class in div I think.
This code is not ok:
<form asp-area="User" asp-controller="Image" autocomplete="off" asp-antiforgery="true" class="form"
enctype="multipart/form-data" asp-action="UploadImage" method="post">
<div class="row">
<input asp-for="Description" />
</div>
<div id="demo-upload" class="dropzone">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
</div>
</form>Error:
plugins.bundle.js:4059 Uncaught Error: No URL provided.
at new Dropzone (plugins.bundle.js:43155:13)
Replies (6)
Hi,
I think you can try to set Dropzone.autoDiscover = false; . You can read more about this error here.
Also, check out our Dropzone documentation.
https://preview.keenthemes.com/html/metronic/docs/forms/dropzonejs
If this will not help, then could you please provide your dropzone instance configuration? We will test it on our end.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris this is the dropzone config in js.
"use strict";
// On document ready
KTUtil.onDOMContentLoaded(function () {
Dropzone.autoDiscover = false;
$(function () {
var dz = null;
$("#demo-upload").dropzone({
autoProcessQueue: false,
paramName: "File Upload",
maxFilesize: 5, //mb
maxThumbnailFilesize: 1, //mb
maxFiles: 10,
parallelUploads: 10,
acceptedFiles: ".jpeg,.png,.jpg",
uploadMultiple: true,
addRemoveLinks: true,
init: function () {
dz = this;
$("#btnupload").click(function () {
dz.processQueue();
$(this).attr("disabled", "disabled");
});
},
success: function (file) {
var preview = $(file.previewElement);
preview.addClass("dz-success text-success");
setTimeout(function () {
dz.removeFile(file);
}, 2000);
},
queuecomplete: function () {
alert("Files Uploaded Successfully!");
},
dictDefaultMessage: "You can drag and drop your images here.",
dictRemoveFile: "File Remove"
});
});
});Hi,
I think to fix this you can set url property to "/", as long as url is not empty it won't throw this error.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Amazing! it works! Thank you!
Hi,
Glad to hear that. Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
