Making thumbnail displayed by input type=file following browse larger

JavaScript
1

Once a user has selected a file using the browse button in an <input type=“file” /> tag, a thumbnail of the file is displayed in the form along with the file name.

Is there any way to make that thumbnail larger?

I am creating an admin page where users will be uploading image files. For older users, the thumbnail displayed is a bit small to really see effectively.

I want the user to be able to see the thumbnail to make sure they are uploading the correct image before they submit the form.

–Kenoli

2

That entirely depends on how the thumbnail is being created.

3

As far as I know, in the default the thumbnail is created by the browser.

Once posted, I can, of course, create and display a thumbnail of any size from the uploaded image using a server side script.

I was curious how the default thumbnail which is displayed before a post is submitted is created and if there is any way to affect its size.

–Kenoli

4

You haven’t told us what kind of posting system are you working with? Squarespace? Wordpress? Blogger? Or something else?

5

Just a simple html post. i.e.:

<form name=“selectAction” action=“<?=$_SERVER[‘PHP_SELF’] ?>” method=“post” enctype=“multipart/form-data” >
<input type=“file” />
<input type=“submit” name=“submit” value=“Upload Image” />
</form>

The post data is picked up by a php script.

What I am interested in, however is the thumbnail that is shown in the browser after the user has selected a file and before he/she has submitted it by clicking on “Upload Image”.

–Kenoli

6

I don’t see a thumbnail being generated before uploading in Google Chrome, Mozilla Firefox or Internet Explorer - just the name of the image file itself in the file field.
This must be something specific to a certain type of web browser - which web browser are you seeing a thumbnail in?

If anything is capable of being done to that thumbnail, keep in mind that it will only affect people using the particular type of web browser that shows a thumbnail before uploading.

7

Well, that kind of solves my problem. I have been previewing it in a preview engine that uses webkit. Thanks for the heads up that everyone doesn’t use webkit.

I’ve got another solution for my issue that should work in all browsers (though I will test it!), and I appreciate your taking the time to respond to my poorly researched question.

–Kenoli