Image Preview of File Upload in Firefox

[EvilDog]

Hi -

(Note - This question applies to Mac OS-X both FireFox & Safari)

I have a webpage where users can select files for uploading to my web server and when they select the file to upload, I present them with a small scaled down image preview of the file that they are about to upload. Okay, this works great on all flavors of Windows running all the major browsers. I know about the modification that a user has to make to their user.js file in FireFox in order to get around their built in security restriction on this issue.

My problem is that a buddy of mine has a Mac Pro running OS-X (Leopard) and he is unable to view the preview images that the webpage is supposed to render. He has modified the correct user.js file (we also tried the prefs.js file as well) and it still doesn't work. I do not think that this is a FireFox issue because when I have him run the Error Console and try using the page, he gets no messages regarding this. If FireFox was not configured correctly he would be getting a message that says "Security Error, Content at http://www. blah blah blah may not load or link to file: (file path here)" Again, he is not getting this message so I am assuming that the problem is not in FireFox but somehow is related to how he has the security of his Mac setup.

Okay, now for the 64 million dollar question. Has anyone run into this issue or does anyone know if there is some sort of security setting in a Mac Pro running OS-X (Leopard) that would disable the ability for a web browser to show a preview image for a file that is selected for uploading to a web server. I also want to add that he is able to actually complete the upload just fine. It is only the ability for the page to display the preview image is where the issue lies.

Possible places other than a basic security setting, is it possible that he needs to move the image files to another directory such as a file sharing directory or some such place where permissions might be different. Currently he is trying to upload the images from root (Macintosh HD).

One more thing just so people don't jump to conclusions and the javascripting used to accomplish this is well tested, works in all browsers under Windows and returns no errors at all on my friends computer. Also, he has tried to perform the same task running his copy of Safari with the same problem.

I hope that I have provided enough information for someone out there to help me in this issue.

 

[angelwatt]

When you're showing the preview, what path are you using to the image? Mac and Windows use different slashes in the path, so maybe something is getting confused there. An example of the path would be good enough, and possibly the HTML that is generated when you create the preview.

As a possible solution, this may be something that can be done with PHP and AJAX, which would keep you from having to hack Firefox in order to bypass security, which is never a good idea.

 

[EvilDog]

When you're showing the preview, what path are you using to the image? Mac and Windows use different slashes in the path, so maybe something is getting confused there. An example of the path would be good enough, and possibly the HTML that is generated when you create the preview.

As a possible solution, this may be something that can be done with PHP and AJAX, which would keep you from having to hack Firefox in order to bypass security, which is never a good idea.

I appreciate the input. FireFox is "supposed" to mitigate the proper path to whatever the local OS requires when one uses "file:///" prior to using javascript to append it with the value from the file upload box. In other words, when you use "file:///", Firefox is supposed to interpret this correctly and make the proper adjustments on an as needed basis. (This according to FireFox's own documentation).

That said, it is possible that on a Mac this functionality may not work correctly. What I am going to try is to implement a Mac native file calling prefix in my codes and see if that works. If I have success with this, then I will simply use a sniffer code to create the proper file handling prefix based on the OS that is being used at the time.

Regarding your suggestion for Ajax, this would be impossible as Ajax cannot initiate or manage anything to do with file uploading other than triggering a form to submit itself. Besides, this would completely defeat the purpose of having an image preview that is there for the user's benefit so he can be sure that the proper image has been selected for uploading. The image preview that I am using does not involve any html at all in that I have a simple place holder image whose path is replaced using javascript upon the selection of a valid image in the file upload box.

In my particular case, when the user does complete the uploading of the form in question, he is presented with a resulting webpage that does show all his images properly resized and properly positioned in a preview of the page that results from his input. The main thing is that I am allowing up to 25 images to be uploaded at once and I wanted him to be able to preview them upon selection so as to avoid wasting time by having to "guess" which photos should go into which position.

This is a real estate system that I am working on, just in case you were wondering. The system is just about complete and the image preview function works great under most circumstances with the exception of my buddy's computer which is a Mac. I know that a lot of webmasters view Mac's as not being critical when it comes to proper functioning of their sites but I am trying hard to be sure that everything I am working on is completely cross browser and cross OS compatible.