CODEWITHSUNDEEP
asp.net-mvcfile-uploadfilepond
luke
luke

Reputation: 21

FilePond how to pass the name or id of the deleted file as a parameter to the controller?

I am using the filepond plugin to upload files in bulk. The uploaded files are saved to the cache. Now I want to click the delete button to delete the corresponding file on my cache. I want to know how the name or id of the front file should be transferred to the controller? Or how the controller can get the filepond file when the form is submitted, it can also solve my current problem.

This is the code of the c#I use:

    [HttpPost]
    public ActionResult SaveFiles()
    {
        if (Request.Files.Count > 0)
        {
            var file = Request.Files[0];
            if (file != null && file.ContentLength > 0)
            {
                UploadedFiles uploadedFiles = new UploadedFiles()
                {
                    UserName = UserSession.CurrentUser.UserName,
                    PostedFile = file
                };
                uploadedFilesList.Add(uploadedFiles);
            }
        }
        return Json(true);
    }

    [HttpDelete]
    public ActionResult RemoveFile()
    {
       // How to put the id or name of the deleted file into this action?
        return Json(true);
    }

This is code of html and javascript I use 

<div class="controls">
    <input type="file" class="filepond" name="filepond" multiple
           data-max-file-size="50MB" data-max-files="10">
    <p class="help-block">Optional.</p>
</div>

<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css" rel="stylesheet">
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script>
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageExifOrientation,
  FilePondPluginFileValidateSize
);
    // Select the file input and use create() to turn it into a pond
   FilePond.create(document.querySelector('.filepond'));

FilePond.setOptions({
    server: {
        process: '/List/SaveFiles',
        revert: '/List/RemoveFile',
        
    }
});
</script>

Upvotes: 2

Views: 1830

Answers (2)

Tolbxela
Tolbxela

Reputation: 5181

Normally, if you don't change anything in the Filepond revert settings, the file id will be sent as simple text in the request body. To get this id you will need to do something like this:

public async Task<IActionResult> OnDelete()
{
    var fileId = "";
    using (StreamReader reader = new StreamReader(Request.Body, Encoding.UTF8))
    {
        fileId = await reader.ReadToEndAsync();
    }

    bool isDeleted = false;

    // Do delete your file

    if (isDeleted)
        return new ContentResult() { Content = "deleted" };
    else
        return new ContentResult() { Content = "error", StatusCode = 500 };
}

This is an ASP.NET Core version from a RazorPage

Upvotes: 2

Indrit Kello
Indrit Kello

Reputation: 1313

You should not use ActionResult.

    [HttpDelete]
    public string RemoveFile(int id)
    {
       return "Deleted!";
    }

Upvotes: 1

Related Questions