I'm using this git repo BlueImp/jQuery-File-Upload to upload files in a Razor Pages Web app. I'm having an issue being able to hit the DeleteFile method when delete button is clicked.
When a file is uploaded a Json response is sent to the form containing the delete URL for DeleteFiles Method which is picked up by an x-tmpl script
public async Task<ActionResult> OnPostUploadProfileImage()
{
var httpPostedFiles = HttpContext.Request.Form.Files;
var webRootPath = _hostingEnviroment.WebRootPath;
var fileUploadProfile = httpPostedFiles[0];
List<ViewDataUploadFilesResult> fileResults = new List<ViewDataUploadFilesResult>();
UploadResult uploadResult = new UploadResult()
{
files = fileResults
};
if (fileUploadProfile != null)
{
var newProfileImageFileName = Guid.NewGuid().ToString();
var profileImageFolder = Path.Combine(webRootPath, @"images\profileImages");
var profileImageExtenstion = Path.GetExtension(fileUploadProfile.FileName);
using (var fileStream = new FileStream(Path.Combine(profileImageFolder, newProfileImageFileName + profileImageExtenstion), FileMode.Create))
{
fileUploadProfile.CopyTo(fileStream);
}
string profileImageUrl = @"images\profileImages\" + newProfileImageFileName + profileImageExtenstion;
var result = new ViewDataUploadFilesResult()
{
Name = fileUploadProfile.FileName,
Size = fileUploadProfile.Length,
ThumbnailUrl = "https://localhost:7062/" + profileImageUrl,
Url = "https://localhost:7062/" + profileImageUrl,
DeleteUrl = "https://localhost:7062/" + "Donations/DonationPageSettings/DeleteFile?file=" + newProfileImageFileName + profileImageExtenstion,
DeleteType = "GET",
Error = null
};
fileResults.Add(result);
}
return new JsonResult(uploadResult);
}
public async Task<IActionResult> OnGetDeleteFile()
{
var Blegh = "";
return Page();
}
On the cshtml file there is a x-tmpl that handles the upload form.
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download">
<td>
<span class="preview d-flex justify-content-center flex-align-center" style="height: 80px">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}" style="width: 80px; height: 80px;"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td nowrap>
{% if (file.deleteUrl) { %}
<button class="btn btn-outline-danger btn-sm btn-block delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<span>Delete</span>
</button>
{% } else { %}
<button class="btn btn-outline-default btn-sm d-block w-100 cancel">
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
I've tried wrapping the button in a form with asp-page-handler="DeleteFiles" but this cant work as the button is already contained inside the upload form so it never hits the OnGetDeleteFiles method.
How can I make the Delete button call the OnGetDeleteFiles from within the x-tmpl using the URL that's passed to it.
Ok I figured it out, I was passing the Delete URL wrong, it needs to have the handler passed in URL itself. I guess its because I was trying to use asp helpers within x-tmpl script
Changed
DeleteUrl = "https://localhost:7062/" + "Donations/DonationPageSettings/DeleteFile?file=" + newProfileImageFileName + profileImageExtenstion,
To
DeleteUrl = "https://localhost:7062/Donations/DonationPageSettings?file=" + newProfileImageFileName + profileImageExtenstion +"&handler=DeleteFile",