Hi,
I am trying to upload multiple files using file input. And I am able to do that using "multiple" attribute of input type file. I can not use file API as I am using python on server side. So after user has selected the files, I want to access those file names in file input to let user cancel any file before uploading and upload rest of the files. The "value" attribute of input file does not work as it doesn't let me write.
Any help is appreciated.
If you are using IE (and IE only), you may be able to access local storage to do what you want with JavaScript; otherwise, you cannot due to security... What would you want to do with the file using python?
I am using mozilla. I am using Python for server side scripting and to store the files on server. One way is to send the file object to the server from browser, but I cannot implement that as python does not recognize this file object, so i need to use file input only.
I see. I believe you use a form tag to accept files upload. If so, the confirmation is already at the form tag before clicking the submit button. If users still want to remove it, you could provide the remove file page instead. I am not sure if I am on the right track???
By the way, a sample upload file using python is here. You may already know how to do and use it though...
What you have told is right, but I want to remove the file from fileinput on the same page then upload rest of them on the server.
Is there any way to remove some of the selected files from fileinput?
Ryoonnet,
I'm afraid there's no complete solution because the browser security gets in the way. As Taywin indicated, some browsers (including the one you use) don't allow input fields of type="file" to be given a value by any means other than clicking "browse..." and selecting file(s).
However, there is a partial workaround, in which we place a "shadow" input field (textbox) over the type="file" field and use javascript to populate it with the names of the selected files.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
</style>
<script>
onload = function(){
var f = document.getElementById('files');
var f2 = document.getElementById('_files_');
f.onchange = function(){
var msg = document.getElementById('msg')
var a = [];
for(var i=0; i<this.files.length; i++) {//here we build the editable list of file names
try { a.push(this.files.item(i).fileName); }
catch(e) { a.push('error reading file name'); }
}
f2.value = a.join('^');//use this delimiter server-side to separate out the individual file names
};
};
</script>
</head>
<body>
<fieldset style="padding:10px;">
<legend>Legend</legend>
<div style="padding:15px 0; position:relative;">
<input id="files" type="file" size="90" name="files[]" style="position:absolute;top:5px;font-size:8pt;" multiple>
<input id="_files_" type="text" size="90" name="fileNames" style="position:absolute;top:5px;font-size:8pt;">
</div>
</fieldset>
</body>
</html>This works (at least in Firefox) because the browser security doesn't inhibit selected files' names from being read, concatenated, and written back to the shadow field.
Here comes the tricky bit.
Because the real "files" field can't changed (except by doing another "browse..."), you can't affect which files get uploaded and all the files in "files" will be sent on form submission. However, the shadow field, "_files_", is also sent and can (in most languages) be read/interpreted server-side such that any files manually edited out of "_files_" are not processed further.
You have to live with the waste of bandwidth involved in uploading files that are then discarded.
As it stands, the user interface is pretty unfriendly but may be ok for personal use (depending on how many files you intend to select).
Possible improvements might be:
Hope this helps.
Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.