Develop Reference

When using angular-file-uploader module, how to disable the upload button until a file has been selected?

I'm using the angular-file-uploader module from this link: https://www.npmjs.com/package/angular-file-uploader Video demo: https://www.youtube.com/watch?v=EpJRGmEDOJ0
On the demo of this module, the upload button is disabled until the file has been selected and ready to be uploaded. But upon trying, the upload button is active and gives the message "Successfully Uploaded !" even when no file has been selected.
I would like to disable it initially and only activate it once a file has been selected.
Within the config, there is no setting to disable the the upload button which is causing some problems.
afuConfig = { multiple: false, formatsAllowed: ".jpg,.png", maxSize: "1", uploadAPI: { url:"https://example-file-upload-api", method:"POST", headers: { "Content-Type" : "text/plain;charset=UTF-8", "Authorization" :Bearer ${token} }, params: { 'page': '1' }, responseType: 'blob', withCredentials: false, }, theme: "dragNDrop", hideProgressBar: true, hideResetBtn: true, hideSelectBtn: true, hideSelectBtn: true, fileNameIndex: true, autoUpload: false, replaceTexts: { selectFileBtn: 'Select Files', resetBtn: 'Reset', uploadBtn: 'Upload', dragNDropBox: 'Drag N Drop', attachPinBtn: 'Attach Files...', afterUploadMsg_success: 'Successfully Uploaded !', afterUploadMsg_error: 'Upload Failed !', sizeLimit: 'Size Limit' } };
But while going through their code on github(github.com/kzrfaisal/angular-file-uploader), it looks like this has been already built and should be working straight away but I can't seem to get it to work. Would really appreciate any help!

Dropzone is not working on server. Working fine on localhost

I would like to upload images by using dropzone. It is working fine on localhost. I am able to upload files. But when I uploaded my code server it is not initializing. I am triggering event on click of button.
My code -
//other fields
<div class="dropzone" id="addProductDropzoneNew"></div>
//other fields
Js -
Dropzone.options.addProductDropzoneNew= {
url: '/admin/product/store',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.jpeg,.jpg,.png,.PNG',
addRemoveLinks: true,
init: function() {
dzClosure = this;
document.getElementById("new-product-btn").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': dzClosure.defaultOptions.chunking };
dzClosure.uploadFile(blob);
} else {
dzClosure.processQueue();
}
});
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("_token", jQuery("#token").val());
formData.append("id", jQuery("#productId").val());
formData.append("name", jQuery("#name").val());
formData.append("sku", jQuery("#sku").val());
formData.append("menuId", jQuery("#menuId").val());
formData.append("categoryId", jQuery("#category").val());
formData.append("subCategory", jQuery("#sub").val());
formData.append("price", jQuery("#price").val());
formData.append("discount", jQuery("#discount").val());
formData.append("stock", jQuery("#stock").val());
formData.append("color", jQuery("#color").val());
formData.append("size", jQuery("#size").val());
formData.append("height", jQuery("#height").val());
formData.append("width", jQuery("#width").val());
formData.append("weight", jQuery("#weight").val());
formData.append("description", jQuery("#description").val());
formData.append("isPublish", jQuery("#isPublish").val());
formData.append("isB2B", jQuery("#isB2B").val());
formData.append("title", jQuery("#title").val());
formData.append("keyword", jQuery("#keyword").val());
formData.append("metaDescription", jQuery("#metaDescription").val());
formData.append("brandId", jQuery("#brandId").val());
formData.append("isFreeShipping", jQuery("#shipping").val());
});
},
success: function(data)
{
clearError();
if(data.status=='success'){
location.href='/admin/product';
} else {
displayError(data.xhr.response);
}
}
}
I am not sure but it is working fine on local. But i guess it is not initializing on server.
Here is screenshot of local -
This is a screenshot of dropzone div on server -
Also, in developer console log not getting any error. Please check image -
Thank you for your help in advance.

send data with dropzone

I work with dropzone:
<form action="#" class="dropzone" ></form>
In the code js, the dropzone upload images only if a button with id=startUpload
is clicked.
Dropzone.autoDiscover = false;
$(function() {
var myDropzone = new Dropzone(".dropzone", {
url: "upload_hotel_image.php",
paramName: "file",
maxFilesize: 20,
maxFiles: 20,
acceptedFiles: "image/*,
autoProcessQueue: false,
});
$(document).ready(function(){
$('#startUpload').click(function(){
myDropzone.processQueue();
});
});
});
Now, how can i add more data to send with dropzone when images are uploaded, for exapmle,i need send description with every image uploaded.

//do this in your init function
this.on("sending", function(file, xhr, formData) {
$("form").find("input").each(function(){
formData.append($(this).attr("name"), $(this).val());
});

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
});