Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Image Upload and Dropzone


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-->


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


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 ?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(