Anyone know what tool does facebook use for uploading multiple photos? It is so neat!
It look like they are using flash uploader? If so, which one out there has similar to that?
Thanks.
I'd recommend to have a look at Plupload, which is from the developers that brought us TinyMCE. It has the ability to use different "engines" depending on what is installed. The options are
Google Gears
Flash
Silverlight
BrowserPlus
HTML 5
HTML 4
You can specify more than one option and Plupload will automatically choose the next one, if the first option is not installed (and so on).
It is also possible to resize the images automatically before uploading them.
Last time I used it they were using a Java Applet uploader, which is pretty popular with on-the-fly uploading, or if you need to plug into the host OS to easily choose files to upload.
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.
I'm aware of upload progress bars that can upload multiple files (ex. http://demo.swfupload.org/v220/index.htm or http://valums.com/ajax-upload/) but I haven't been able to find any that can select multiple folders.
I'm working on a music analysis site, so it would be great if people could upload multiple albums at once (like in iTunes.)
Thanks
You're going to need a java app to do that, such as the one Aurigma uses. I don't know any off the top of my head though.
EDIT: Here's one: Java Multiple File Upload. Costs $40 though.
Hope this helps, and good luck!
There are no jQuery or Flash or HTML plugins/tools you can use for this- at least that I am aware of because that would grant a lot of access to your OS.
You will most likely need make an applet or Active X control.
As already mentioned, Aurigma is a working example.
Hope that helps.
I need to implement a Facebook-style multiple image uploader in my PHP application. It should be possible to select multiple files using Ctrl+click.
Is there any jQuery plugin that I can use or any sample code I can refer to?
Please help
Thank You
This isn't really possible using a conventional file upload field. You're going to need to use a Flash based upload system. Please consider something like YUI Uploader. It is a Javascript library wrapped around a special file upload system contained in a flash movie. It's remarkably easy to use. There's probably plenty of other alternatives out there too.
EDIT: There is HTML5 functionality for multiple file upload fields now. You can do it like this:
<input type="file" multiple="true" />
Of course this isn't going to be well supported in all browsers. There might be a JS upload library out there that uses HTML5 and then falls back on Flash where HTML5 is not available. May the Google be with you :)
with uploadify you can have the ability to select multiple files for upload. it uses some flash too.
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
We have a web page (HTML javascript and PHP mostly) that allows a user to upload an image. We have the normal browse button, and it works fine. However, we want to add the functionality to drag and drop an image into the text field instead.
gmail allows you to do this in their mail app, so it's possible. The only way we've thought of to do it is to create a java applet that does all of this, but that ends up being very messy.
Has onyone done this? how does it work?
Edit: I'm using firefox on a Mac. Most of my users will be probably be using IE on Windows.
thanks
You can do this in XUL (Making it effectively a Firefox-only solution) or in ActiveX (A IE-only solution).
This is an old question, but it came up in my search results.
So for reference, use the HTML5 file classes and Drag and Drop.
Article with details here: http://www.html5rocks.com/en/tutorials/file/dndfiles/
I've tried dragging an dropping and image their editor. It will pick up the path if the file is on a web page, but if it's on your local drive, the path will be "file://c:....", which will not be uploaded with the message and will end up as a broken image.
Browser don't have access to the local file system, for security reasons, so I doubt this would ever work the way you describe.
Dropping a file into a normal input field will copy the local path to the image into the input field, however this is worthless to you since the .value property of an <input type='file'> tag is readonly for security reasons.
You will notice that gmail only allows you to drag / drop an image (for upload) to the <input type='file'> input and not any other field.
I think what you want to ask is "how do I style a <input type='file'> tag like google", which is a whole other topic.
EDIT: Ok in IE you cannot drag a file into a <input type='file'> tag
the best way to get this done is to make a Adobe AIR standalone like the photo uploader for https://www.photoshop.com/express
you can find some great information at this post:
http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript
I think I have a way around the annoying as hell FF3 local filesystem issues but I need a piece of javascript to test with. How do I read the local file path from the file upload form? Please, stop with the 'flash is a solution'. I'm a Flash developer by trade and even I don't think it's a good solution.
Do you by chance have this Firefox extension installed?
http://www.teslacore.it/wiki/index.php?title=DragDropUpload
I would be surprised if there is a solution without having to install an external plugin or extension. As someone mentioned that would be a security issue. A web site would be able to grab files from people's computers and upload them without their knowledge.
Check out the SWELL Framework. Its javascript based.