Menu
The following problem occured using Firefox v73 on Window 7:
In my code i use a multi-file-picker in html to upload up to 100-files parallal:
<input type="file" id="files" name="files" multiple>
The files will be sent to a REST-API which process them afterwards. When i select a single file (in the file-explorer) which is currently in use, i get a error-message (probably by window) which tells me, that the file cannot be picked because it is in use. If i try to pick multiple-files which contain one or more files in use, i have no error occuring but the upload seems to stop when the file-in-use is reached and waiting for the file to be released. This leads to request to wait for a timeout (which is 1 minute in my case).
Is there any option to catch the problem (in use file) before trying to upload the files?
PS: I've tried the same in Chrome and it returns a error before sending the request to the REST-API.
508
Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting.
Use two <input type=file> elements instead, without the multiple attribute. If the requirement is really just "have two different single inputs", then this is actually the best answer @Diego.
You could add a new <input type="file"> whenever you finished uploading the previous files and hide the previous input. This way you keep adding a new input every time you want to add more files and prevent the previous input from being overwritten.
With the IFilePicker interface, you can prompt the user to pick one or more files from the device. The IFilePicker interface is exposed through the FilePicker.Default property. The FilePicker and IFilePicker types are available in the Microsoft.Maui.Storage namespace.
The FilePicker and IFilePicker types are available in the Microsoft.Maui.Storage namespace. To access the FilePicker functionality, the following platform specific setup is required. No setup is required. All methods must be called on the UI thread because permission checks and requests are automatically handled by .NET MAUI.
Definition and Usage The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
Well, it is very simple. HTML 5 has a property for input tag which is ‘multiple’. Example: Using this property, you can input multiple files. For selecting files, you must use either CTRL or SHIFT and select the number of files to be uploaded.
That sounds like an OS issue.
Something is locking your file from being accessed and this needs a fix on your side.
I doubt it will be a common issue, and it's quite hard to build a solution without being able to experience the same issue but one thing you can try is to read your Files before you send them. This can be done quite conveniently with Blob.prototype.arrayBuffer method, which can be polyfilled.
To avoid a lot I/O, you can even try to read only a small part of it, thanks to Blob.prototype.slice() method.
const input = document.getElementById('inp');
const btn = document.getElementById('btn');
btn.onclick = async(evt) => {
testAllFilesAvailability(input.files)
.then(() => console.log('all good'))
.catch(() => console.log('some are unavailable'));
}
function testAllFilesAvailability(files) {
return Promise.all(
[...files].map(file =>
file.slice(0, Math.min(file.size, 4)) // don't load the whole file
.arrayBuffer() // Blob.prototype.arrayBuffer may require a polyfill
)
);
}<pre>
1. Select some files from the input
2. Change one of this files name on your hard-drive or even delete it
3. Press the button
</pre>
<input type="file" multiple id="inp">
<button id="btn">Test Availability</button>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
