Cannot Delete file if file renamed on Laravel - laravel

Question

I have renamed my uploaded file on server, when i try to delete my image through dropzone.js the file does not get deleted because it is renamed.
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
addRemoveLinks: true,
url: baseUrl+"/img/upload/store",
params: {
_token: token,
},
success: function (data, textStatus, XmlHttpRequest){
},
removedfile: function(file) {
var name = file.upload.filename;
jQuery.ajax({
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("delete") }}',
data: {filename: name},
success: function (data){
console.log("File has been successfully removed!!");
},
error: function(e) {
console.log(e);
}});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
});

Answer 1

I propose the following:
In the success method, you should be getting the uploaded file back as the first argument (what you currently have as data) and the second argument would be the new name you send back (what you currently have as textStatus).
With this, you could loop the current files in the Dropzone, finding the the correct file out of the list based on the file you get back as a first argument in the response, and then change its name accordingly. So that when you press delete, it will have the right name
Please consider the following modified pseudo code which assumes you're sending back the new file name from the server.
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
addRemoveLinks: true,
url: baseUrl+"/img/upload/store",
params: {
_token: token,
},
success: function (fileSentToServer, newFileName){
// Access the current files in the list/dropzone
var fileList = myDropzone.files;
// Loop over
fileList.forEach(file => {
//Find the corresponding file in the list you just uploaded
if(file.name == fileSentToServer.name) {
//Rename it
file.name = newFileName
}
})
},
removedfile: function(file) {
// This name should now be the renamed version
var name = file.upload.filename;
jQuery.ajax({...
},
});
It's also possible you may not even need the loop if the file param returned in the success method is a direct reference to the file in the file list.