Trigger an action when a user has browsed for a file using <input type="file" />

JavaScript
1

I am using an <input type=“file” /> and want to trigger an AJAX action once a user has clicked on browse, browsed for an image and clicked open.

The reason for this, is that I want to trigger an upload of the image and return a thumbnail of the image so that it will be present on the form as the user fills out more information about the image in the form.

I would like to do this with an AJAX action rather than a post submit as the user won’t have entered the additional information yet at the point the select the file.

Of course, I could do this with two actions, having them select and submit the image for upload and then enter the rest of the information after a page refresh that adds the image, but I think it would be much more elegant to use an AJAX action here.

Is there a trigger related to the browse/open action that I can make use of? Any other thoughts.

–Kenoli

2 
 <input type='file' onchange="if( /\\S/.test( this.value ) ){ alert( 'Do something here' ); }">
3

There may be security issues with this on web browsers such as Opera and Firefox though.

4

What issues? The only restriction of which I’m aware is the unavailability of the full path data, none regarding accessing the file name, which is all that’s required here.

5

So far as I’m aware , no browser events fire after selecting a chosen file. That seems to be what the OP is asking for.

The OP might instead though use setInterval to poll the file value, and when one occurs to post the form via ajax to the server, and wait for a response that gives a path to the image on the server.

Do any other ways come to mind?

6

This seems to work, as far as triggering the alert. I don’t see why it wouldn’t similarly trigger an AJAX request. I’ll give it a try.

Thanks,

–Kenoli

7

To prevent user-errors I would recommend the inclusion of some sort of confirmation.

8

Can you explain this phrase:

( /\S/.test( this.value ) )

I’m really a php programmer and get a bit twisted sometimes making sense of javascript. I presume there is a regular expression here or some escapes.

Thanks,

–Kenoli

9

You mean like:

“Do you really want to upload a file?”

“Do you really intend to upload image 3456.jpg?”

Regardless, what I will be doing here is uploading the image into a tmp directory until all of the image info is posted. With that post, I will create 3 images of various sizes to use on the site storing each in appropriate directories. If the final post is not made, the image will be deleted from the tmp directory.

I am thinking after inserting a thumbnail of the file selected into the form via AJAX, that I will provide a button for them to use if they have inadvertently chosen the wrong file. The button will start the whole process over. This might remove the need for a confirmation.

–Kenoli

10

It’s a regular expression that tests for the presence of a non-whitespace character.

11

Brilliant. So if the user starts to browse, but stops and nothing is entered in the field the conditional prevents the alert (or any other javascript function) from being triggered.

Thanks,

–Kenoli

12

The onchange of the file input does let you access the filename, it’s just a different format in different browsers so you need to do some string manipulation.
The security is around setting the value.