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 (7)
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
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
Your Support Matters!
Hi.. can you help me??
set url to "/" is not working for me.
My HTML:
<div class="form-group row">
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Thumbnail Image</label>
<div class="dropzone dropzone-default" name="thumbnail_image">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here or click to upload.
<span class="dropzone-msg-desc">This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.</span>
</div>
</div>
</div>
</div>My dropzone setting:
Dropzone.autoDiscover = false;
"use strict";
// Class definition
var KTDropzoneDemo = function () {
// Private functions
var demo1 = function () {
// single file upload
$("#image-upload").dropzone({
// url: "{{route("recipes.test")}}", =>not working
url: "/", => not working
// paramName: "thumbnail_image",
maxFiles: 1,
maxFilesize: 0.4,
addRemoveLinks: true,
autoProcessQueue: true,
uploadMultiple: false,
acceptedFiles: ".jpeg,.jpg,.png",
accept: function(file, done) {
// console.log(file);
},
success: function (file, response) {
console.log(response);
}
});
}
return {
// public functions
init: function() {
demo1();
}
};
}();
KTUtil.ready(function() {
KTDropzoneDemo.init();
});public function uploadImage(Request $request)
{
$image = $request->file("file");
$imageName = time().".".$image->extension();
$image->move(public_path("images"),$imageName);
return response()->json(["success"=>$imageName]);
}
Hi,
Please note that Metronic uses the Dropzone plugin as it is and all the requirements for the plugin's usage and its features can be learned from its official documentation here. Also this post can be related to your case.
Regards.
