Topic: File upload specification of Bootstrap 5 File upload plugin
There was a difference between the file displayed on the screen and the file sent when using the File upload of the Bootstrap 5 File upload plugin with the following html.
<div id="dnd-custom-height" class="file-upload-wrapper">
<input
type="file"
class="file-upload-input"
data-mdb-multiple="true"
data-mdb-height="200"
data-mdb-multiple="true"
data-mdb-disabled-remove-btn="true"
data-mdb-file-upload-init
/>
</div>
The contents are summarized below. I would like to know if this is a specification or not.
・Without multiple, with remove button The file displayed on the screen and the data sent are the same even when the file is selected by deleting or clicking again.
・Without multiple, without remove button The data on the screen and the data to be sent match even when you click again to select it.
・With multiple, with remove button If only one file is selected, The data on the screen and the data to be sent are the same. If multiple files are selected, -When there is no additional operation, it is matched. -When a file is selected again, it is added on the screen, but the sent data is misaligned because only the file is selected again. -When a file is deleted, only the deleted file disappears on the screen, but all the sent data disappears, so there will be a discrepancy. -When there are drag-and-drop and selected files at the same time, only the selected file is always sent regardless of whether it is first or second, so there is a discrepancy.
・With multiple, without remove button It is the same as “With multiple, with remove button” except in the case of deletion.
2025/06/24
Since it was difficult to display the image capture, the URL is appended.
https://usercontent.mdbootstrap.com/mdb-images/support/f6d9c2d4-cc04-4325-87b9-47ded4fbff8b-image.jpg
What do you mean by data send? Data you retrieve from the form or data you get from the events?
Data retrieved from the form. The following is a summary of how to check.
Set id="file_names" to the input written in the first question. Get the selected files with “getElementById(‘file_names’).files”, output them to the console and check them with the developer tool.
Two files were displayed in the console when two files were selected on the screen. I used the REMOVE button to delete one file on the screen. One file remained on the screen, but the console showed 0 files.
As you can see, the on-screen display differs from the files passed to the console.
I would like to know if this process is a specification or not.
Could you check this, please?
If you need to access the current list of files please listen to events fileAdd.mdb.fileUpload and fileRemove.mdb.fileUpload. You will get the list in the files property.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: Computer
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes