I am working laravel 5.6 with dropzone js box to upload images in my form. I am using dropzone box in programmatically. http://www.dropzonejs.com/#create-dropzones-programmatically
<form method="post" action="" enctype="multipart/form-data">
<div class="form-group">
<label for="formGroupExampleInput">Email</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" name="email">
</div>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" name="name">
</div>
<!-- start dropzone image upload-->
<div class="dropzone" id="my-dropzone">
<div class="dz-message">
<div class="col-xs-8">
<div class="message">
<p>Drop files here or Click to Upload</p>
</div>
</div>
</div>
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</div>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Submit</button>
</form>
Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/form"});
dropzone.config.js
var total_photos_counter = 0;
Dropzone.options.myDropzone = {
uploadMultiple: true,
parallelUploads: 2,
maxFilesize: 5,
previewTemplate: document.querySelector('#preview').innerHTML,
addRemoveLinks: true,
dictRemoveFile: 'Remove file',
dictFileTooBig: 'Image is larger than 16MB',
timeout: 10000,
init: function () {
this.on("removedfile", function (file) {
$.post({
url: '/images-delete',
data: {id: file.name, csrf_token: $('[name="csrf_token"]').val()},
dataType: 'json',
headers: {
'X-CSRF-TOKEN': ''
},
success: function (data) {
total_photos_counter--;
$("#counter").text("# " + total_photos_counter);
}
});
});
},
success: function (file, done) {
total_photos_counter++;
$("#counter").text("# " + total_photos_counter);
},
sending: function(file, xhr, formData){
formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
}
};
but when I drag and drop images to the dropzone box images are not uploading to the box. image preview showing with cross mark (not success uploads). then how can fix this problem
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire