Living in 2012 I did not think a image upload using PHP would cause so many difficulties.
My requirements are:
multiple file upload
cross-browser functional
considering security issues
depending on the least possible add ons or extensions
supporting drag&drop (would be nice, at least)
The options to be available seem to be to me:
simple single file upload (or several single file inputs, but you still have to select each image manually) using PHP (and e.g. GD library) only
(+) Pros: fully cross-browser functional, not depending on neither flash, nor javascript, nor html5, nor any add ons etc., maximum of customizability
(-) Cons: bad user experience as no support of multiple files, no drag & drop etc
a compromise, using e.g. jquery
as promoted on many posts and other sites, seen this link, e.g.: http://blueimp.github.com/jQuery-File-Upload/
(+) Pros: supporting multiple file uploads and even drag and drop besides other nice features for mostly only FireFox, Chrome, Safari (see link for details)
(-) Cons: only single selecting files and no drag & drop for IE (tested on IE6-IE8 by myself)
HTML5: browser market shares don't seem to allow to depend on HTML5 only, still...
Flash: I found many different uploaders based on flash, but when testing, many did not fulfill what they claimed (e.g. select multiple files and cross-browser functionality). Two examples I found useful:
http://www.uploadify.com/demos/
http://code.google.com/p/swfupload/ (see http://demo.swfupload.org/v220/ for Demos)
(+) Pros: those mentioned supporting multiple file uploads
(-) Cons: no drag and drop, depending on Flash add on, and I am not a security expert nor very familiar with flash, but the documentation of swfupload e.g. states they cannot/do not check the Mime-Type of uploads and totally rely on checking the file extension)
However, I found statements that e.g. google docs uses multiple file upload not based on flash but still working in IE too. Has anybody an idea how they do that?
My other questions were: did I oversee an opportunity? Are those all of the better options available? Is there any non flash-based way for at least multiple file upload working in IE (at least v8) too? How do you guys do it? Or is it really waiting and hoping for the breakthrough of HTML5 and now having 5 different uploaders, each optimized for a special browser/add on availability?
Thank you very much in advance!
It looks like you did your research pretty thoroughly. I discovered a similar conundrum back a few weeks ago. As for the Google Docs ref, I would really like to see that because I have never found anything like that. Personally if your dealing with a younger audience for your site I would recommend using the jQuery option and displaying a browser recommendation of Firefox or Chrome to IE users. Go Flash for the older crowd that will be more likely to be on IE.
Unfortunately there is no winner here really that I have found. But at least with the jQuery option you avoid Flash AND have the potential that IE will work with it in future versions. With HTML5 Flash is quickly disappearing (and good riddance). Now if that would only happen with IE. I mean come on, how is it that even in IE9 they don't even come close to their competitors at being standards complaint??? Its just ridiculous.
Related
I need to select multiple files and I found one way to do this. But that way only works on newest browsers, using attribute "multiple" on input.
I didnt found any solution on internet.
Can anyone help me to find a solution?
I'm able to use HTML, PHP, JavaScript (jQuery).
Thanks for attention.
There is no native solution to multiple file selection uploading in older browsers. This requires some kind of plugin technology, typically Flash or Java.
I personally use Plupload. It will seamlessly switch between HTML5 and Flash (among others) based on the user's browser. There are plenty of other Flash or Java multi-file upload solutions out there as well.
I think the traditional solution to this is to allow multiple file input elements; like this.
File 1: [_____] (Browse...)
File 2: [_____] (Browse...)
Upload more files...
If the user needs more, just have them click a button at the bottom to create them. At some points, YouTube would allow you to use a Java applet-based upload dialog as well; but since then the opinion of Java applet security has faded quite a lot and most people avoid it entirely.
Having multi-selection is a real benefit to modern browsers, and one that's not really so easy to emulate in the older ones.
Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).
I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -
Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).
Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).
The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).
What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).
I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?
Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.
Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!
I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.
UPDATE. It now claims to support IE 6.0+.
I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now).
They can be 1px small, but you'll need them if you want to create thumbnail previews.
A good starting point would be here: http://www.zurb.com/playground/ajax_upload
As for creating the actual preview images (smaller versions) you can use CI's image library.
Let me know how it works out.
I'm considering creating all the reports of a series of desktop business apps directly to html. Most of the reports are tables (maybe compound reports), headers, footers, etc. (no images, vector graphics, etc.).
After a search in SO, I've read lots of post regarding problems with page breaks and things like that (I don't need pixel positioning at all, but yes control at page breaks).
For example, let's say I have a big table with currency values and I need the last row of the table per page to display the running totals at that point.. it is something feasible to do easily or I will run in lots of trouble?
What technologies can help me here?
HTML5
Javascript
CSS
PHP Librarys
JQuery
Some notes:
The html will be displayed with the chrome or firefox engine embeded, so the diferences between browsers it's not a problem for me.
I can have the php preprocessor embedded if that helps to generate more easily the reports, I'm just looking fot the best technology at hand to make the work well..
I'm tired of report generators with "WYSIWYG" designers (Crystal Report, FastReport, ReportBuilder, etc.)
Thanks!
We made the exact move you're thinking about almost a year ago and haven't looked back. Most communication with our client is over the web, so it's been a perfect fit. They can view html outputs easily on our website, and can generate pdf's of the page (server side) whenever necessary. The program we use for pdf conversion is a free, easy-to-use, open-source project called wkhtmltopdf.
Where we are is great, but getting here was difficult.
Deciding which pdf engine to use was a long, painful process. The short of it is that HTML is for viewing pages on the internet, not for viewing pages on paper. Page-breaks will be the bane of your existence in this game -- you literally have to measure each page and create your own clean-looking breaks for every single report (otherwise, all html-to-pdf converters out there will just keep rendering the document onto the next page as it if encountered no page-break at all). Further complicating the matter is that every html-to-pdf engine out there handles this sh*t differently and you'll have to write a tailored solution to test each one to see if it meets your individual needs.
Now, the good news:
You can save yourself a lot of trouble by heeding my advice and going with wkhtmltopdf for your finalized reporting outputs. This little program is simply amazing -- it uses a webkit engine, renders CSS/javascript accurately, has header/footer control, optionally creates a table-of-contents page, and (most importantly) consistently produces excellent looking pdf's without having to customize your code base. It also has a variety of great command line switches, and it is very, very fast. I say again: it is very, very fast.
Best of all, it's a command line tool that can be used in batch processing. And did I mention that it's really, really fast?
Browser support for printing is generally terrible. However, there are other tools, notably Prince (which is not free) and Flying Saucer (which is free) that can generate PDF output from XML/HTML plus CSS. Prince even supports JavaScript though I don't have any experience with it.
I've got a Java back end in my current application, so for me Flying Saucer works fine for simple reports. I pre-process an HTML template with FreeMarker and then run the result through Flying Saucer. It's got a surprisingly smart rendering engine.
The CSS3 Paged Media spec (well, proposed spec) has all sorts of cool stuff in it but they're almost totally unimplemented in the browsers. Even the CSS2 paged media stuff is only supported half-heartedly.
Speaking of Prince, you might look into DocRaptor. DocRaptor is another HTML to PDF conversion application. It uses Prince XML, and handles CSS better than comparable programs.
It isn't free, but offers a free 30 day trial for all accounts, so there's no harm in trying it out, at least.
DocRaptor
I am currently developing a web site with PHP + MySQL and jQuery. So far I have been doing it in my local machine. I notice that when I see the page the images on it take some time to load (few time but its visible). All images are small (PNG's with less than 3 KB). Now, when I load the page, there are some database connections happening in order to get some data that I will display.
I am not sure if this loading time issue has something to do with the amount of images, or with the time that the PHP script + the DB connections take to execute. (I have very little data in my database so I wouldn't assume this case.)
My question is: Is it a good approach to preload all the images in the beginning of each page? I tried it with jQuery and it works fine. I'm just not sure which disadvantages I can get with it. For example, to do so, I need to include the jQuery library in the beginning of the page? I thought it was a bad practice.
If these PNGs are stored in the database as BLOBs — not clear from your question — don't do that. Serving images from a DB through PHP is not as efficient as letting the web server serve them straight from the filesystem. If the images are tied to particular records, just name the PNG after the row ID, so you can find it in a directory dedicated to storing those images. The PHP code then just generates the URL that points to the PNG file on disk, so the web server can send them statically.
I don't think preloading the images within the same page is going to buy you anything. If anything, it might slow the apparent overall page load time because the browser can only retrieve a fixed number of resources concurrently, typically 2-4. Loading images at the top of the <body> means there are other things at the top of the page "above the fold" that have to wait for some HTTP connection slots to free up. Better to let the images load in their natural order.
Preloading makes sense in two situations:
The image isn't shown by default, but is expected to be needed as the user interacts with the page. Good examples of this are the hover and click state images for rollovers.
The image isn't used on this page, but will be needed on the next. Good examples of this are any site where there is a clear progression from one page to the next, like in a shopping cart.
Either way, do the preload at the very bottom of the <body>, so everything else loads first.
Having addressed those two issues, run YSlow on your site. It started out as a plugin for Firebug, which in turn is a plugin for Firefox, but it's since been ported to all major browsers except IE.
The beauty of YSlow is that it detects common slowdowns automatically, just by loading the page while the extension is active. It then gives you a clear grade for the page, so you can judge when you're "done" optimizing. If you're below an A, you're not done yet. :) It's not uncommon to see sites rating a D or worse, because the default configuration for web servers is conservative to avoid causing problems. Fixing YSlow warnings is generally pretty easy, but you have to be careful to avoid creating caching and other problems, which is why the default server config doesn't do these things.
Another answer recommended the Google PageSpeed offering. It's available as a plugin for Chrome and Firefox, as a server-side Apache module, and as a Google-hosted service. I have no idea how it compares to YSlow, but it looks interesting.
Also consider using the browser's debugger to get a waterfall graph of resource load times:
In Firebug you get this in the Net tab.
In Safari, you get to it via the Develop menu, which is normally disabled in Preferences. Turn it on if needed, then say Develop > Start Timeline Recording. That puts you into the Network Requests instrument. You can also get to it through Develop > Show Web Inspector.
In Chrome, say View > Developer > Developer Tools, then go to the Network tab.
IE has a very weak form of this, via Tools > Developer Tools > Profiler. It just gives a table of numbers, rather than a waterfall graph, so the information is there, but you can't just visually scan for long bars to find the slowest resources.
You should use page speed plugin from google to check what data takes most of the time to load. It will show separate load times for images as well.
If you're using lots of small pngs I suggest you combining them into one image and manipulating the display via css background property since they are part of styling and not information. In that case - instead of few images only one will be loaded and reused through all elements. In this case even preloading of one image is really easy.
Have you considered using CSS Sprites to combine all of your images into a single download? There are a number of tools online to help you do this, and it will significantly reduce the number of HTTP requests required by your page.
Make sure you have set the correct Expires header on your images to allow them to be cached.
Finally, take a look at YSlow which can provide you with futher optimisation tips.
I was trying to upload a photo on facebook using a browser with no flash, and could see that it didn't work.
I am pretty confident in handling files and related issues using Php and have done some sites allowing users to upload and manage files (images, docs etc). But I never thought about the above flash approach. I googled a bit and saw that there are few scripts available on which I can look how it works using flash.
But my questions are, when I should decide to use flash for user uploads. What are the advantages of using this approach? or disadvantages?
Thanks
It isn't a choice between Flash and PHP. You need something on the client to send the data and something on the server to receive it.
Ask yourself the following question:
Does Flash offer anything useful for my project?
The obvious things it lets you do are having a nice UI for selecting multiple files at once, and a simple method for seeing the progress of uploads.
If you decide that it does offer features, then implement it using progressive enhancement. Flickr is an example of this — with Flash you get the fancy uploader, without it you still get a series of regular file inputs. They aren't as nice to use, but they are functional and what would have been used if Flash wasn't an option in the first place
Depends on your audience: If you are pretty sure that your users have flash installed, there is nothing against it. It even gives some neat advantages, like:
Upload of multiple files at once
Progress bar while uploading
Instant preview of uploaded media
etc.
Well, with flash, the obvious letdown is that it will only work when a user has flash (although, you could display something in its place if they didn't). If your a flash programmer and comfortable with flash, I can see how it would be better. You could generate a file list, multiple uploads ect. I would say it's just an alternative to JavaScript for providing interactivity and allowing users to upload content dynamically.
when I should decide to use flash for
user uploads.
use it when the whole website is flash, but that is not professional and you can't count a lot on flash security, while you can write/use a lot of classes for hardening and checking files uploaded by php scripts..
on the other hand, some people like flash upload for progress bars, but you can do such stuff with php and jquery. for example check uplodify
Correction
I don't have flash support on my current browser so when watching uploadify demos I only see the fallback, thanks to soulmerge for making this clear