Develop Reference

Dropzone is uploading all files to server for each file drop/selection

I'm trying to integrate dropzone in a laravel 8 application. Whenever I drop any image in dropzone, it is uploading all the files of dropzone, not skipping already uploaded file. For example, if I drop "image-1.jpg" in dropzone, it uploads the file instantly (which is desired). But after that, if I select "image-2.jpg", it re-uploads "image-1.jpg" first (which isn't desired, I want to prevent this re-upload), then it uploads "image-2.jpg". Also, I want to prevent folder(containing multiple image) upload and have tried to prevent it by setting maxFiles to 1, but it's not preventing it.
Javascript
var refType = $('#reference-type');
electronic = $('.electronic'),
image = $('.image'),
description = $('.description'),
url = "{{ route('user.bank.files') }}",
submitRef = $('#submit-ref');
Dropzone.autoDiscover=false;
var imageDropzone;
var config = {
url: url, headers: {'X-CSRF-TOKEN':'{{ csrf_token() }}'},
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 1,
paramName: 'reference_image',
addRemoveLinks: true,
acceptedFiles: 'image/jpeg, image/png , image/jpg, image/svg',
init: function() {
imageDropzone = this;
},
removedfile: function (file) {
if (file.accepted) {
data = {
action: 'delete',
tnx_id: "{{ the_tnx(data_get($order, 'tnx')) }}"
};
NioApp.Form.toPost(url, data);
}
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
sending: function(data, xhr, formData) {
formData.append('action', 'store');
formData.append('tnx_id', "{{ the_tnx(data_get($order, 'tnx')) }}");
},
addedfiles: function () {
if (this.files.length > 1) {
this.removeFile(this.files[1]);
NioApp.Toast("{{ __('You can upload only one :file.', ['file' => 'image']) }}", 'warning');
}
},
error: function(file, errorMessage) {
$.each(imageDropzone.files, function(i, file) {
file.status = Dropzone.QUEUED
});
}
};
$("#reference-image").dropzone({...config});

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.

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

How do you upload a single image with Dropzone.js?

Dropzone.js seems to be uploading images as multi-part form data. How do I get it to upload images in the same way an image upload would work with cURL or a binary image upload with Postman?
I'm getting a pre-signed URL for S3 from a server. The pre-singed URL allows an image upload, but not form fields:
var myDropzone = new Dropzone("#photo-dropzone");
myDropzone.options.autoProcessQueue = false;
myDropzone.options.autoDiscover = false;
myDropzone.options.method = "PUT";
myDropzone.on("addedfile", function ( file) {
console.log("Photo dropped: " + file.name );
console.log("Do presign URL: " + doPresignUrl);
$.post( doPresignUrl, { photoName: file.name, description: "Image of something" })
.done(function( data ) {
myDropzone.options.url = data.url
console.log(data.url);
myDropzone.processQueue();
});
});
If I use the returned URL with Postman and set the body to binary and attach the image, then the upload works fine. However, if the Dropzone library uses the same URL to upload the image to S3 then I get a 403 because S3 does not expect form fields.
Update:
An Ajax alternative works as below with a S3 signed url, but Dropzone.js does not seem willing to put the raw image data in the PUT message body.
$.ajax( {
url: data.url,
type: 'PUT',
data: file,
processData: false,
contentType: false,
headers: {'Content-Type': 'multipart/form-data'},
success: function(){
console.log( "File was uploaded" );
}
});

Set maxFiles to 1.
Dropzone.autoDiscover = false;
dzAllocationFiles = new Dropzone("div#file-container", {
url: "api.php?do=uploadFiles"
, autoDiscover: false
, maxFiles: 1
, autoQueue: true
, addRemoveLinks: true
, acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
dzAllocationFiles.on("success", function (file, response) {
// Success Operations
});
dzAllocationFiles.on("maxfilesexceeded", function (file, response) {
allocationFileNames = [];
this.removeAllFiles();
this.addFile(file);
});

Add below options, then working.
myDropzone.options.sending = function(file, xhr) {
var _send = xhr.send;
xhr.send = function() {
_send.call(xhr, file);
}
}

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