IFormFile is null

Question

I'm using filepond for pretty input file, but facing an issue when submitting the form.

Before using filepond, in MyUpload, the parameter uploadedFile is not null meaning getting value.

<form asp-route="MyUpload" method="post" enctype="multipart/form-data">
    <input class="filepondinput" type="file" name="uploadedFile"/>
</form>
$(document).ready(function () {
    $('.filepondinput').filepond();
});

//C#
Task<IActionResult> MyUpload(IFormFile uploadedFile){

}

Below is the code I copied from devtools:

Before selected any file

It generates a new input call filepond--browser with the name uploadedFile

<div class="filepond--root filepondinput filepond--hopper" data-style-button-remove-item-position="left" data-style-button-process-item-position="right" data-style-load-indicator-position="right" data-style-progress-indicator-position="right" style="height: 67px;">
    <input class="filepond--browser" type="file" id="filepond--browser-qiu43sah3" name="uploadedFile" aria-controls="filepond--assistant-qiu43sah3" aria-labelledby="filepond--drop-label-qiu43sah3">
    <div class="filepond--drop-label" style="transform: translate3d(0px, 0px, 0px); opacity: 1;">
        <label for="filepond--browser-qiu43sah3" id="filepond--drop-label-qiu43sah3" aria-hidden="true">Drag &amp; Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span></label>
    </div>
    <div class="filepond--list-scroller" style="transform: translate3d(0px, 0px, 0px);">
        <ul class="filepond--list" role="list"></ul>
    </div>
    <div class="filepond--panel filepond--panel-root" data-scalable="true">
        <div class="filepond--panel-top filepond--panel-root"></div>
        <div class="filepond--panel-center filepond--panel-root" style="transform: translate3d(0px, 7px, 0px) scale3d(1, 0.53, 1);"></div>
        <div class="filepond--panel-bottom filepond--panel-root" style="transform: translate3d(0px, 60px, 0px);"></div>
    </div><span class="filepond--assistant" id="filepond--assistant-qiu43sah3" role="status" aria-live="polite" aria-relevant="additions"></span>
    <div class="filepond--drip"></div>
</div>

Below is after selecting a file

filepond--browser's name uploadedFile is gone, and a hidden input file with name uploadedFile appears.

<div class="filepond--root filepondinput filepond--hopper" data-style-button-remove-item-position="left" data-style-button-process-item-position="right" data-style-load-indicator-position="right" data-style-progress-indicator-position="right" style="height: 69px;">
    <input class="filepond--browser" type="file" id="filepond--browser-qiu43sah3" aria-controls="filepond--assistant-qiu43sah3" aria-labelledby="filepond--drop-label-qiu43sah3">
    <div class="filepond--drop-label" style="transform: translate3d(0px, 40px, 0px); opacity: 0; visibility: hidden; pointer-events: none;">
        <label for="filepond--browser-qiu43sah3" id="filepond--drop-label-qiu43sah3" aria-hidden="true">Drag &amp; Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span></label>
    </div>
    <div class="filepond--list-scroller" style="transform: translate3d(0px, -3px, 0px);">
        <ul class="filepond--list" role="list">
            <li class="filepond--item" id="filepond--item-xabj3x4o1" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1; height: 41px;" data-filepond-item-state="idle">
                <fieldset class="filepond--file-wrapper">
                    <legend>fake.pdf</legend>
                    <input type="hidden" name="uploadedFile" value="">
                    <div class="filepond--file">
                        <button class="filepond--file-action-button filepond--action-abort-item-load" type="button" data-align="right" disabled="disabled" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 0; visibility: hidden; pointer-events: none;"><span>Abort</span></button>
                        <button class="filepond--file-action-button filepond--action-retry-item-load" type="button" data-align="right" disabled="disabled" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 0; visibility: hidden; pointer-events: none;">
                            <svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.81 9.185l-.038.02A4.997 4.997 0 0 0 8 13.683a5 5 0 0 0 5 5 5 5 0 0 0 5-5 1 1 0 0 1 2 0A7 7 0 1 1 9.722 7.496l-.842-.21a.999.999 0 1 1 .484-1.94l3.23.806c.535.133.86.675.73 1.21l-.804 3.233a.997.997 0 0 1-1.21.73.997.997 0 0 1-.73-1.21l.23-.928v-.002z" fill="currentColor" fill-rule="nonzero"></path>
                            </svg><span>Retry</span></button>
                        <button class="filepond--file-action-button filepond--action-remove-item" type="button" data-align="left" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
                            <svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.586 13l-2.293 2.293a1 1 0 0 0 1.414 1.414L13 14.414l2.293 2.293a1 1 0 0 0 1.414-1.414L14.414 13l2.293-2.293a1 1 0 0 0-1.414-1.414L13 11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414L11.586 13z" fill="currentColor" fill-rule="nonzero"></path>
                            </svg><span>Remove</span></button>
                        <div class="filepond--file-info" style="transform: translate3d(31px, 0px, 0px);"><span class="filepond--file-info-main" aria-hidden="true">fake.pdf</span><span class="filepond--file-info-sub">8 KB</span></div>
                        <div class="filepond--file-status" style="transform: translate3d(31px, 0px, 0px); opacity: 0; visibility: hidden; pointer-events: none;"><span class="filepond--file-status-main"></span><span class="filepond--file-status-sub"></span></div>
                        <div class="filepond--processing-complete-indicator" data-align="right" style="transform: scale3d(0.75, 0.75, 1); opacity: 0; visibility: hidden; pointer-events: none;">
                            <svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.293 9.293a1 1 0 0 1 1.414 1.414l-7.002 7a1 1 0 0 1-1.414 0l-3.998-4a1 1 0 1 1 1.414-1.414L12 15.586l6.294-6.293z" fill="currentColor" fill-rule="nonzero"></path>
                            </svg>
                        </div>
                        <div class="filepond--progress-indicator filepond--load-indicator" style="opacity: 0; visibility: hidden; pointer-events: none;">
                            <svg>
                                <path stroke-width="2" stroke-linecap="round"></path>
                            </svg>
                        </div>
                        <div class="filepond--progress-indicator filepond--process-indicator" style="opacity: 0; visibility: hidden; pointer-events: none;">
                            <svg>
                                <path stroke-width="2" stroke-linecap="round"></path>
                            </svg>
                        </div>
                    </div>
                </fieldset>
                <div class="filepond--panel filepond--item-panel" data-scalable="true">
                    <div class="filepond--panel-top filepond--item-panel"></div>
                    <div class="filepond--panel-center filepond--item-panel" style="transform: translate3d(0px, 7px, 0px) scale3d(1, 0.27, 1);"></div>
                    <div class="filepond--panel-bottom filepond--item-panel" style="transform: translate3d(0px, 34px, 0px);"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="filepond--panel filepond--panel-root" data-scalable="true">
        <div class="filepond--panel-top filepond--panel-root"></div>
        <div class="filepond--panel-center filepond--panel-root" style="transform: translate3d(0px, 7px, 0px) scale3d(1, 0.55, 1);"></div>
        <div class="filepond--panel-bottom filepond--panel-root" style="transform: translate3d(0px, 62px, 0px);"></div>
    </div><span class="filepond--assistant" id="filepond--assistant-qiu43sah3" role="status" aria-live="polite" aria-relevant="additions"></span>
    <div class="filepond--drip"></div>
</div>

This is the reason I think my C# controller can't receive the parameter uploadedFile, how to solve the input name?

Possible duplicate of [Using Filepond with Asp .net MVC](https://stackoverflow.com/q/57984458/11683) — GSerg, Feb 03 '20 at 07:27
Try using the `[FromForm]` attribute: `Task MyUpload([FromForm]IFormFile uploadedFile)` — Rahul Sharma, Feb 03 '20 at 07:29
@GSerg my problem is not in c# , is the filepond takeout the input name , so controller can't receive — FeelRightz, Feb 03 '20 at 07:29
@GSerg ya, visited but we both are different requirement, and the link answer doesn't help — FeelRightz, Feb 03 '20 at 07:38
Have you looked at the [picture](https://i.stack.imgur.com/tfp8Q.png) in the question that explains how filepond actually works and why it replaces the file input with a hidden input? Do you have server-side code to support all this? — GSerg, Feb 03 '20 at 07:45
@GSerg but my purpose is to pretty the input file only , i dont need real time upload — FeelRightz, Feb 03 '20 at 07:55

score 0 · Answer 1 · answered Feb 04 '20 at 07:51

As it's impossible in most browsers to update the value of a file input field FilePond can't store the dropped file to the field. Therefor the field is empty. The file is stored internally for either uploading asynchronously or encoding.

If you want to upload the file along with a form submit you need to install the file encode plugin, this will encode the file and submit the file as base64 data. You'll then have to decode the file on the server.

IFormFile is null

1 Answers1