Image uploader needs local filesize

mixed php and java

[john_pinx]

Yo - I'm using a PHP script on my server to allow image files to be uploaded on to a webpage, but I'd like to stop browsers trying toupload files over a certain size *before* the submit button is pressed. Any Javascript way of doing this?

[Alternative Future]

Welcome to WebmasterWorld john_pinx,

This cannot be done on the client you have to do the check server-side, since you are using PHP (not my field) i am sure you can do it within your PHP on the server.

There are some free tutorials online that will assist you further with doing this validation using PHP.

HTH,

-George

[john_pinx]

Ta George - I thought Javascript could read a local filesize when the file is selected. The PHP I can do, no problem, but I wanted to save bandwidth and time by eliminating big files *before* they were uploaded.

[Alternative Future]

No problem john_pinx,

Am not totally sure on the technical issues that lie behind this but I think the security level on JavaScript plays an active part.

-George

[Alternative Future]

I found this article:

Checking a selected file's size requires local file system access which
is usually for web pages not possible due to security considerations.
If security settings are low enough NN4 can call into Java to read the
file's size, IE4+ can use the FileSystemObject to check the file's size.

Looks like it can be done on NS due to lack of security but with IE having a higher security level it prevents this from being done...

>> FileSystemObject seems to use ASP also I have seen another article on using ActiveX so perhaps between the two you could do this validation.

Am open to be corrected on this though, and i am sure someone in the forum shall point this out.

-George

[john_pinx]

Yep - from some other sources I've found the same. But when the Browser allows the user to browse through the local filesystem, the filename is returned to the window in the uploader. Is there not a way to get javascript to read that filename, open the file locally, read the filesize and immediately close it? Then I could use a little bit more javascript to say whether the file was too big or not, and accept it into the uploader if not.

john

[Alternative Future]

>> read that filename, open the file locally, read the filesize

I think this is where the security steps in when you try to do anything with the image locally.

Would it not be simpler to do the validation server-side using PHP? Or must it be done client-side?

-George

[john_pinx]

I wanted to save the wasted time a dial-up user would spend uploading a big file only to find that it's too big :-)

[Alternative Future]

I am not totally sure but does it not stop the upload during the procedure when the file has exceeded the specified size.

I.e. when the server-side class has met and exceeded the allowed size it returns back to the client. As said am not totally sure but I am sure someone else might have a definite answer to this.

-George

[john_pinx]

Yes it does - but only *after* the file is uploaded - or partially uploaded if it's too big. Plus - I need different size restrictions on different websites.

This has to be client-side I'm afraid - PHP can't see what's going on till everything arrives at the server, and that's what potentially wastes so much time.

john_pinx

[Alternative Future]

Off the top of my head the only way I can see this be done client-side is to have separate functions for NS/Mozilla etc & IE.

IE.
<script language="VBScript">
Call on FileSystemObject to do the validation
</script>
NS.
<script language="JavaScript>
Use the NS function for checking file size (basically javascript that NS allows you to access the image and bypass the security
</script>

And have some server-side code checking which browser client is using and display appropriate scripting language.

I know it looks messy and there is more likely a better way to do it, but I cannot think of one at this time.

Hopefully someone else can post another and better solution.

-George

[john_k]

This has to be client-side I'm afraid

Unless this is for an intranet or other circumstance where you have control over the users' browser settings, then this is not practical. As has been stated, browsers (by default) do not permit scripted access to the file system because that would be an insane security risk.

Your best solution is to clearly indicate what the maximum filesize is.

You might think that it is "not practical" because a lot of users won't read the note. Well, the alternatives involve creating a page (or block of text) to describe to your site visitors what they need to do to lower their security settings. The solutions will be very different depending upon their platform, browser, and browser version. If they can't read a simple "Max filesize is 2 megabytes" note, how are they ever going to follow a set of instructions? And if they could, who would, considering it requires them to lower their security settings?

[john_pinx]

At [idimo.com...] I've put an inactive uploader, where you can see the actions of the browser. The client is able to browse his local filesystem and select a file. The browser form puts the full/path/to/file.name in the box. This is where I need javascript to look at the filesize and accept or deny the file.

I know you'll solve this ;-)

john_pinx

[john_k]

I know you'll solve this

Yup - everyone was holding out on you.

All you need to do is add this meta-tag to your page header and you will have full access to the user's file system:

<meta name="trust-this-site" content="absolutely"/>

Seriously though, are you listenting? Under normal circumstances (a public website where you cannot control the user's browser settings), the file attributes are not available to the browser. There is no secret trick.

It is a security risk for browsers to permit access to the file system.

[john_pinx]

Shame it ends with sarcasm - but there ya go........

When I solve the problem I won't be posting it here.

[john_k]

I'm sorry you took offense to the method - but five previous posts in the thread had already stated that it can't be done because of security issues - and they weren't seeming to get through to you.

Sometimes humor (even light-hearted sarcasm) can cut through that.

[john_pinx]

Okay - so you caught me on a bad day.

I know nothing about javascript, but I have seen this problem solved in the past - in spite of what you say.

Of course there are security issues.

If the "browse" button called by the form can allow the surfer to view his filesystem and then place the filename into the form window in the browser, it looks to me like the browser can access the local filesystem. I only need the size of the file as well as the name.

I'm trying to save surfers time and bandwidth to the general good of the internet, hence the query.

I also don't believe in "it's not possible" - that shows a restricted mind. ;-)

john_pinx

[Robert Thivierge]

I *think* this *might* work in IE much of the time:
1) Don't bother with the FileSystemObject, since (as said) it violates security.
2) Create an image tag who's source is the local image file.
3) Check the filesize attribute of the image object. Also check the width/height, since the filesize will sometimes not be present; but you can instead impose limits of width*height instead.
4) Show this image information to the user. The client (not server) will have access to the information, and be able to take appropriate action.
5) On the server-side, make no assumptions about the client, and implement appropriate controls for filesize, and data-validation.

Try a Google search for examples of photo-finishing service that allow image uploading, and view the source code. URL's can't be posted here, but you should be able to find examples.

[john_k]

One of the fundamental aspects of javascript, when implemented in a browser, is that it has a security "sandbox" that limits its access to local resources. It always has been, and still is a basic requirement of any browser implementation of javascript.

Here is a quote from an old article by Marc Andreesen. (full article is at [wp.netscape.com...]

JavaScript was designed to run safely over the Internet, so by default it runs only in a protective "sandbox" where it cannot access local resources such as individual hard drives.

When you click the "Browse" button on the input type=file tag, the browser asks the OS to provide the file selection service and return the path of the selected file. There is no opportunity for javascript to find out about the file (or any other aspects of the file system).

Another aspect of the File input type is that the value is always read-only (to javascript). Try and prepopulate the value or change it with javascript. Even though the text portion of the File control looks like a standard Text input type, it is not. If this were not the case, then stealing registry databases or password files would be common place.

The only way to circumvent these limitations and reliably get at the filesize is to use something other than javascript and html. A Java applet or ActiveX control could do it. In this case, the user would need to agree to install the applet or component. In fact, there are many 3rd party components on the market (some free ones too I would guess) to expand on the standard HTML file upload.

The post describing a means of using the IMG tag might "work" if all files that are going to be uploaded are images in a standard image format (as opposed to .doc, pdf, psd, mdb, xls, txt, etc.) AND users with intrusion detection software let the requests go through AND the swapping of the image causes the filesize attribute to update (it doesn't cause other attributes to update) AND the browser even allows the attempt.

Note, as this article points out
[faqts.com...]
that the bit about working in NN4 was due to a security hole. So it should not be expected to work in later versions.

btw - When it comes to finding solutions to programming problems, I am never close minded. I have made my living for many years by having a reputation quite the opposite. I don't ever say that something can't be done simply because I don't know how it could be done. My experience is that almost anything can be done if you keep working at it. However, in this case, the browsers are purposely built to prohibit the task you want to achieve.

[Rambo Tribble]

While JavaScript is specifically and very intentionally prevented from accessing the kind of information you wish to uncover, I believe it would be possible to achieve what you want through a Java Web Start application. You can learn more at: [java.sun.com...]

Learning to program in Java, however, is not a trivial task.