I am building a project in which a user needs to upload a primary image and secondary image. I am using DropzoneJS to accomplish this. Here is my code:
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: $("#formtemplate").html(),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>I would like to label the files in the upload queue as "Primary" and "Secondary" next to the respective file and thumbnail. I am having trouble finding documentation on how this can be done in DropZoneJS. How can I do this? Thanks.
You definitively need 2 templates. One with "primary template", another with "secondary template". But in order to avoid creating 2 HTML templates you can use a template generator like this:
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
That way you can easily choose the template string for each one without rewriting the HTML.
genTemplate = (tmpName) => {
let tmp = $("#formtemplate").clone()
tmp.find(".template-number").html(tmpName)
return tmp.html()
}
Dropzone.autoDiscover = false;
var image_width = 380,
image_height = 507;
var photo_upload_primary = new Dropzone("#photo_upload_primary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Primary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a primary product image.",
dictDefaultMessage: "Click or drop primary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'primary.' + ext;
return newName;
},
});
var photo_upload_secondary = new Dropzone("#photo_upload_secondary", {
maxFilesize: 1,
maxFiles: 1,
acceptedFiles: "image/*",
autoProcessQueue: false,
url: "upload.php",
previewsContainer: "#formfiles",
previewTemplate: genTemplate("Secondary template"),
dictFileTooBig: "Image is too large ({{filesize}}MiB). Max file size is {{maxFilesize}}MiB.",
dictInvalidFileType: "This file is not an image.",
dictMaxFilesExceeded: "You have already uploaded a secondary product image.",
dictDefaultMessage: "Click or drop secondary product image here",
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
/*$.notify({
message: response
}, {
type: "danger"
});
this.removeFile(file);*/
},
init: function() {
//this.on("addedfile", function(file) {
// file.mycustomname = "my-new-name" + file.name;
//console.log(file);
//});
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id', responseText[0].id);
$(".dz-id:last-child").html("hi!");
file.previewElement.html = "hh";
});
this.on("thumbnail", function(file) {
if (file.width !== image_width || file.height !== image_height) {
file.rejectDimensions();
} else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() {
done("Product image resolution outside of specifications. Resolution must be " + image_width + "px x " + image_height + "px");
};
},
renameFile: function(file) {
var ext = file.name.substring(file.name.lastIndexOf('.') + 1);
var newName = 'secondary.' + ext;
return newName;
}
});.card {
padding: 5px;
border: 1px solid whitesmoke;
background: #eee;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<h4>Image Upload</h4>
<form>
<div id="photo_upload_primary" action="/file-upload" class="dropzone m-b-15"></div>
<div id="photo_upload_secondary" action="/file-upload" class="dropzone"></div>
<!-- Preview -->
<div class="mt-3" id="formfiles"></div>
<!-- File preview template -->
<div class="d-none" id="formtemplate">
<div class="card mb-3">
<div class="p-2">
<div class="row align-items-start">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar border rounded">
</div>
<div class="col pl-0">
<h2 class="template-number"></h2>
<a href="#" class="text-muted font-weight-bold" data-dz-name></a>
<a href="#" class="text-muted font-weight-bold dz-id" data-dz-id></a>
<p class="mb-0"><small data-dz-size></small>
<small class="d-block text-danger" data-dz-errormessage></small></p>
</div>
<div class="col-auto pt-2">
<a class="btn-lg text-danger" href="#" data-dz-remove><i class="icon-trash-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</form>
<small id="dropzoneHelp" class="form-text text-muted">Required image resolution is 380px x 507px with a maximum file size of 1MB</small>
<!-- end: File preview template -->
<button type="button" class="btn btn-light btn-shadow" onclick="upload()">Add Product</button>