Hi!! when I try to use Dropzone with the Image Upload (data-kt-image-input), the image browser closes after choosing an image and it opens again.
// Init dropzone
var myDropzone = new Dropzone("#avatar", {
url: "assets/ajax/apps/contatos/uploadContatoPerfil.php", // Set the url for your upload script location
paramName: "avatar", // The name that will be used to transfer the file
maxFiles: 1,
uploadMultiple: false,
autoProcessQueue: true,
maxFilesize: 10
});
myDropzone.on("complete", function (progress) {
console.log("Upload Completo");
});
myDropzone.on("success", function(file, responseText) {
console.log(responseText);
});
<div class="col-md-4 fv-row">
<!--begin::Label-->
<label class="d-block fw-semibold fs-6 mb-5">
<span class="required">Foto do Contato</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Escolha uma foto que represente o contato."></i>
</label>
<!--end::Label-->
<!--begin::Image input placeholder-->
<style>.image-input-placeholder { background-image: url("assets/media/svg/files/blank-image.svg"); } [data-theme="dark"] .image-input-placeholder { background-image: url("assets/media/svg/files/blank-image-dark.svg"); }</style>
<!--end::Image input placeholder-->
<!--begin::Image input-->
<div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true" id="avatarUploader">
<!--begin::Preview existing avatar-->
<div class="image-input-wrapper w-125px h-125px"></div>
<!--end::Preview existing avatar-->
<!--begin::Label-->
<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change">
<i class="bi bi-pencil-fill fs-7"></i>
<!--begin::Inputs-->
<input type="file" name="avatar" id="avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="avatar_remove" />
<!--end::Inputs-->
</label>
<!--end::Label-->
<!--begin::Cancel-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Cancel-->
<!--begin::Remove-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Remove-->
</div>
<!--end::Image input-->
<!--begin::Hint-->
<div class="form-text">Formatos Permitidos: png, jpg, jpeg.</div>
</div>
<!--end::Hint-->
Hi,
Please note that Dropdown and KTImage do not work together. The dropzone plugin uses it's own image input control to properly function. The KTImage control is used to submit a single image with an attachment. For available Dropzone options please check this documentation page.
Regards.
Hi Marcos,
It's not gonna work, You need to implement it on your Backend though...
What backend framework do you use ?