Develop Reference

Dropzone disable upload

I wanna know how to disabled upload if i have 1 file has uploaded. But if i remove file, the ddropzone been enabled to upload.
here's my code on js:
Dropzone.options.attachmenacc = {
maxFiles: 1,
accept: function(file, done) {
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: host+'upload/bank/unfile',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
//console.log();
},
}
Well on my code now, if i add upload file more, it show alert, and these file (expected first file) wont uploaded, but it still show that file was uploaded.

Dropzone - max files not working

I have tried setting up the limit of uploading files to only one. I have tried all the suggestions from the previous questions here but nothing worked for me. Each time I was able to upload multiple files and as many as like.
This was one of my attempts:
var token = "{{ csrf_token() }}";
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: "/admin/upload",
params: {
_token: token
}
});
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
};
And this is how I call the scripts:
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/image-upload.js') }}"></script>

You are splitting the dropzone configuration into two different methods. And only the first one is being used the one that contains the url option, the second, that contains the maxFiles option is ignored.
You have to either include all the configuration inside the first method that creates dropzone programmatically like this:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: "/admin/upload",
params: {
_token: token
},
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
});
Or with second method that uses the dropzone autodiscover feature, if your dropzone element has the id #dropzoneFileUpload do it like this:
Dropzone.options.dropzoneFileUpload = {
url: "/admin/upload",
params: {
_token: token
},
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
};

jQuery : Dropzone.js not working inside bootstrap modal

In my bootstrap modal I have a div panel inside of that is my form of dropzone, in every time I tried to click the modal nothing is showing. It's working properly if outside of the modal. I also try the Dropzone.autoDiscover = false; not working either.
<div class="panel-body" id="id_dropzone">
<form action="UploadImages"
class="dropzone"
id="my-awesome-dropzone" enctype="multipart/form-data">
</form>
</div>
The JS
$(document).on('click','#add_newContestant', function(e){
e.preventDefault();
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#id_dropzone", { url: 'UploadImages'});
});

Try this way, here i didn't use Dropzone.autoDiscover = false;
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name == "anything.jpg") {
done("false");
}
else { done(); }
}
};
and
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 10,
url: 'UploadImages',
previewsContainer: "#dropzone-previews",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 20,
init: function () {
var cd;
this.on("success", function (file, response) {
$('.dz-progress').hide();
$('.dz-size').hide();
$('.dz-error-mark').hide();
console.log(response);
console.log(file);
cd = response;
});
.......
Please check this fiddle Dropzone in Modal . I think this will help you

Dropzone stops on the progress bar

This will be hard to explain, because I have no live demo. I use a simple dropzone.
HTML:
<form action="http://localhost/upload.php" class="dropzone" method="post" id="upload-widget"></form>
JavaScript:
Dropzone.options.uploadWidget = {
uploadMultiple: false,
maxFilesize: 2, // MB
maxFiles: 1,
acceptedFiles: 'image/*',
init: function() {
this.on('success', function() {
alert('OK);
});
}
};
upload.php file:
if(!empty($_FILES)){
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
}
}
When I pick or drop a file, it will upload, but stops at the progress:
I have no idea, why. When I upload any file, file appear in the /uploads/ folder, but seems like dropzone.js doesn't react on complete. Do I need to print some data? I used this website as tutorial http://www.codexworld.com/drag-and-drop-file-upload-using-dropzone-php/

I found the problem. I'm using this PHP debugger: https://github.com/JosephLenton/PHP-Error which for some unknown reasons disabled receiving XHTTP responses (funny that my website is almost whole in ajax and I haven't noticed any error). Anyway, I can't use dropzone.js with this debugger. I can live with that (also it is turned off when it will go to production).

Try to use the success event like that :
Dropzone.options.uploadWidget = {
uploadMultiple: false,
maxFilesize: 2, // MB
maxFiles: 1,
acceptedFiles: 'image/*',
success: function(file, res) {
console.log('Upload success.');
console.log(res);
},
error: function(file, res) {
console.log('Upload error.');
console.log(res);
}
};

Dropzone.js - How to add new property to file object after uploading file

I'm using dropzone and PHP to upload and delete files. When I load my upload page I create some mockfiles with the following params: name, size, thumbnail and id. This mock is set using pre uploaded data.
So when someone click on remove file button, I call the php method that delete the image.
My problem is when the user uploads an file and tries to delete it without loading the page. When it happens, dropzone file object just can't be altered.
I'm trying:
var dropZone3 = new Dropzone("#file3",{
init: function() {
this.on('success', function (file) {
console.log(file);
file['test'] = 'test';
file.test = 'test';
console.log(file);
})
},
paramName: 'file3',
autoProcessQueue:true,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 3,
maxFilesize: 5,
addRemoveLinks: true
My problem is that the first console.log and the second one inside init on success function shows me the same file.
Anyone knows how to fix it?
Thank you in advance.

It's possible to add properties directly to file object (dropzone v4.3.0)
var dropZone = new Dropzone(document.querySelector('.js-dropzone'), {
url: '/file/upload'
});
dropZone.on('success', function (file, response) {
var res = JSON.parse(response);
if (res.result == true) {
file.test = 'test';
file.id = res.id;
}
});

Don't think you can add a property to the file object when is already uploaded, but you can add it before on the accept property:
var dropZone3 = new Dropzone("#file3", {
url: "upload.php",
init: function () {
this.on('success', function (file) {
console.log(file);
})
},
accept: function(file, done) {
file.test = "test";
return done();
},
paramName: 'file3',
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 3,
maxFilesize: 5,
addRemoveLinks: true
});