`itemLimit` count is off after deleting images with scaled versions - fine-uploader

Question

I am using the following and having an issue you delete an image that was uploaded.
The itemLimit is set to 6 since there are "3" image per uploaded item.
hideScaled: true
so it is only showing the one thumbnail with a single delete button.
How can I get the system to delete the three images form the internal object.
This happens if up upload images and delete a couple of times.
Thanks
$("#fine-uploader").fineUploader({
session: {
endpoint: 'imageStatus.cfm',
params : {transaction_id : 11205}
},
debug: true,
request: {
endpoint: 'upload.cfm',
params : {details : "2_250/786_05072014|4483|786|11205|2"}
},
validation: {
itemLimit: 6,
allowedExtensions: ["jpeg", "jpg", "gif" , "png"],
sizeLimit: 8000000 // 8 MiB
},
messages : {
tooManyItemsError : "Sorry but you are only able to upload 2 images"
},
deleteFile: {
enabled: true, // defaults to false
endpoint: 'upload_delete.cfm',
method: 'post',
params : {wallid : "786"}
},
retry: {
enableAuto: false
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{name: "THUMB_XX", maxSize: 113},
{name: "FULLIMAGE", maxSize: 450}
]
}
})

Answer 1

You can use the onDelete callback to manually delete the scaled images. When you hide the scaled images, the Id of the original image will be the highest id. So for instance, if you upload a single file, the original file will have an id=2, and the scaled images will have an id=1 and id=0. If you upload a 2nd image, the original id would be 5, and the scaled images would be 3 and 4.
You just need to detect which id is being delete, and then use the callback to also delete the previous 2 id's.
The following example should do the trick:
$('#fine-uploader').fineUploader({
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
sizeLimit: 5000000,
itemLimit: 6
},
deleteFile: {
enabled: true,
endpoint: "/MyEndPoint/DeleteImage",
method: 'POST',
},
scaling: {
sendOriginal: true,
hideScaled: true,
sizes: [
{ name: "small", maxSize: 350 },
{ name: "large", maxSize: 800 },
]
},
callbacks: {
onDelete: function (id) {
if (id == 2)
{
$("#fine-uploader").fineUploader("deleteFile", 0);
$("#fine-uploader").fineUploader("deleteFile", 1);
}
else if (id = 5)
{
$("#fine-uploader").fineUploader("deleteFile", 3);
$("#fine-uploader").fineUploader("deleteFile", 4);
}
},
},
});

Answer 2

The documentation is serious when it says that the hideScaled option literally only hides the scaled file items in the UI. If you elect to hide these items AND you are using a strict itemLimit, you'll need to listen for delete status changes for the original files and trigger code that deletes the scaled items as well through the API.