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.
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 have am planning to use Colorbox the jquery lightbox plugin. I am just wondering as to what the best method would be to implement a 'add/upload image' option so it would be easy for a user to upload new images without having to go into the HTML markup and add an individual <img> line of code for each new image.
I am only currently knowledgeable with HTML and CSS at this current time. So if no one already has a snippet they could possibly provide me with, which language would be 'simpler' to learn for just for this specific task. Would it be PHP or Js or something different?
OR am I going about this completely wrong?
Of course they have to upload images to database. You need a suitable back end design. That means you need php to interact with database(or python will also do). If you need dummy upload procedures then you can easily do it with appendTo() method using jquery.
As you are using a plugin, then you will have a method to add an image to the webpage. It will be something like $("user-uploaded-image").plugin-name();
Where you want to upload the image?
Uploading an image means transferring the image to another location (server). For that you need a server side script that
Receives the image.
Saves the image to server hard disk.
php is a server side scripting language.
JS is client side language that is used to sending requests (in this case image ) to server.
Just google it for getting sample image upload scripts.
From taking a look around google for upload scripts suggested by #kiren Siva I came across quite a few CMS type plugins that give me the ability to do exactly what I need.
Some examples can be found here.
Thank you all for your help and suggestions.
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.
Since natively IE7 (and some others browsers, haven't checked yet, to be precise) doesn't use <input multiple="" /> parameter, I would love to know what is... the most compatible (varies by preference, yes, yes) solution for one input field, multiple file upload.
It would be nice, if there would be no JavaScript involved in solution, but I somehow have this strange feeling, that it is impossible - correct me if I'm wrong.
Thanks in advance!
The most browser compatible pure HTML method of allowing multiple file uploads is to simply have multiple:
<input type="file" />
You can alternatively use Java or Flash uploaders -- but these are probably less compatible then JavaScript.
JavaScript which degrades gracefully is probably your best bet, check out Valum's File-Uploader. The library allows you to make use of:
Multiple file uploading through the upload form element if the browser supports it.
Drag and drop file uploading if the browser supports it
Degrade all the way down to an HTML input form element if the browser has JavaScript disabled.
It is very good practice to develop for the latest browsers, while supporting older browsers (not the other way around). If people are on older browsers or don't have JavaScript enabled, then multiple file uploading is going to be painful regardless of what you do.
Our world as yet to bestow on to us such a tool/control ...
But I think the best your going to get, if you don't want to use any client-side technologies (Like javascript or Flash), is to let the user upload a file with a normal POST and then somehow (maybe in your session) remember the files that the user uploaded or just save them to the database as they come in.
So the process would be:
the user selects a file and uploads;
you display the image and ask if they
want to upload another file;
you then give them a option to go to
the next page or do some action.
Probably not the best way to approach this but it should work.
Then again if you are willing to use Javascript or Flash there are tons of scripts out there that would allow you to upload multiple files. So maybe look for one that gives only one input and populates a list of selected images?
Just my 2 cents ...
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.