HTML input type="file" tag question

**LRE** · 07-05-2009, 03:06 AM

Hi all
I am busy building a HTML form to enter text data and upload pictures to insert properties in a database.
I have some question about the input type="file" tag.
When you submit the form and you entered some wrong information in the form I want to show an error and then show the previous entered values using the value= argument.
This works for the text fields but not for the input type=fyle fields.

Is there any way to solve this or accomplish this ?
Thanks
LRE

**scout** · 07-26-2009, 07:33 AM

Here is your problem:

Code:

<html>
<body>

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

just add this red code to the form tag, and that's it.

If there are some problems feel free to ask.

Cheers

**LRE** · 07-26-2009, 08:16 AM

Thanks but I don't think you understood my question.
The form I have is working.

Please read this part of my question

When you submit the form and you entered some wrong information in the form I want to show an error and then show the previous entered values using the value= argument.
This works for the text fields but not for the input type=file fields.

**scout** · 07-26-2009, 11:35 AM

Sorry, now I understand. As far I know, browser finds the file based on the path you specified on web page, and then send only file without path on user computer. Maybe I am wrong, but i think it cannot be done. If it is possible then you should refer to your server side scripts. In PHP only stores file name, and path to the temporary folder on the server which is no use in this case. Only way which maybe could be possible is to write AJAX function which will pick up local path, and then submit it to your script, and then you coud reuse that info.

I hope I was helpful

Cheers

**Greg** · 07-27-2009, 07:45 AM

I don't know much about it but the forms I have on an ecommerce site that do what you are asking about use ajax.

Please don't go clicking on the forms in the links below because this is not the site i am referring to.

**scout** · 07-27-2009, 07:53 AM

Originally Posted by Greg

I don't know much about it but the forms I have on an ecommerce site that do what you are asking about use ajax.

Maybe my English is poor, but I haven't understood a single word...

**home-values** · 07-30-2009, 08:45 AM

Input fields of type "file" are protected elements and are largely inaccessible to javascript. Allowing access to this element's value attribute would represent a huge security problem, since you could easily target files on a user's computer, containing sensitive information to be uploaded to your server.

To get around this restriction and still provide an intuitive UI to the end user, you can use a workaround to upload the file immediately upon selection to get a preview on the page instantly and eliminate the need to populate the input tag when doing server side validation.

There is a javascript library called ajaxfileupload.js that works as an extension to jQuery that uses ajax to upload a file and return information from the server that allows you to set a preview image.

Assuming you have the ajaxfileupload.js and jQuery library files included, here is some sample code that illustrates usage of ajaxfileupload.js:

<script type="text/javascript">
function ajaxFileUpload() {
$("#loading").ajaxStart(function() { $(this).show(); }).ajaxComplete(function() { $(this).hide(); });
$.ajaxFileUpload({
url: '/MyImageUpload.ashx',
secureuri: false,
fileElementId: 'image',
dataType: 'json',
success: function(data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
$('#previewImage').attr('src', '/myimagehandler.ashx?imageID=' + data.imageid);
$('#imageId').val(data.imageid);
}
}
},
error: function(data, status, e) {
alert(e);
}
});
return false;
}
</script>

<img id="previewImage" src="/images/default-image.gif" />

<input type="hidden" name="imageId" id="imageId" value="0" />
<input type="file" name="image" id="image" /><br />
<img src="/images/upload-button.gif" onclick="ajaxFileUpload();" />

Basically, when the user selects a file and clicks upload, the onclick will trigger the ajaxFileUpload function, which upload the file and returns an image ID. The script then replaces the default image source with a reference to your image handler and passes the imageID to load the image. It also copies the image ID to the imageId field. Since the user will see the image and can edit it until it's correct, you have no need to validate this field when it's passed to the server. You would just populate the previewImage with a reference to the uploaded image if validation fails.

**scout** · 07-30-2009, 10:16 AM

I intentionally haven't recommended AJAX File Upload Script because I had pretty bad experience with it, especially when uploading multiple files. But again that is just me.

**LRE** · 07-30-2009, 10:37 AM

@home-values
Your explanation sounds logic, i did not think about the security issue.
I like the workaround.
I don't know about AJAX but I will try to achive the same in PHP.
Thanks a lot.
Regards,
LRE