Я использую filepond для красивого входного файла, но при отправке формы возникает проблема.
Перед использованием filepond в MyUpload
параметр uploadedFile
не является null означает получение значения.
<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){
}
Ниже приведен код, который я скопировал с devtools:
Перед выбором любого файла
Он генерирует новый входящий вызов filepond--browser
с именем 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 & 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>
Ниже после выбора файла
filepond--browser
имя uploadedFile
is пропал, и появляется скрытый входной файл с именем 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: 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 & 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>
По этой причине я думаю, что мой C# контроллер не может получить параметр uploadedFile
, как определить имя входа