Drag and drop upload plugin - javascript

I want to create a jquery drag and drop file upload plugin or use an existing one.
Unfortunately I cannot find any plugin that does exactly what I want to achieve.
Can someone point me a good place to search or how to start to implement my own file upload plugin?
Thanks.
I need the following functionality:

The one should work perfectly for your needs. I have used it and it is pretty simple to configure and use.
http://valums.com/ajax-upload/
Here are the features
multiple file select, progress-bar in FF, Chrome, Safari
drag-and-drop file select in FF, Chrome
uploads are cancellable
no external dependencies
doesn't use Flash
fully working with https
keyboard support in FF, Chrome, Safari
tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

also, you can try PLUpload (http://plupload.com/)
On that page you'll see that Drag&Drop is supported by HTML5, Gears(from Google) or BrowserPlus.
Note: Drag/drop support of files is currently only available in Firefox and WebKit. Safari on Windows has some strange problems and requires workaround.
In IE and/or Opera, that drag&drop could not work properly as you expected.

Related

How to Draw lines using wz_jsgraphics.js library in IE 7/8/9

I am using wz_jsgraphics.js library to draw lines. It is working with all browser other than IE 7/8/9. Now I want to run it on any IE7/8/9 browser. Please guide me to resolve this problem.
Walter Zorn's wz_jsgraphics.js works fine in IE7, IE8, and IE9 when I use these browsers on four different computers.
Internet Explorer has quite many options. Maybe one of them needs to be changed on your computer. For instance, if you are running jsgraphics offline from an html document on a file, the advanced IE option Allow Active Content To Run From A File (or whatever it is called) must, of course, be checked.

JS library to simulate Internet Explorer?

There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.

Javascript file upload hack, not working on all browsers

How can I improve the following so it works in multiple browsers?
$('#img').click(function() {
$('input[type=file]').click();
});
So when I click an image it will allow to select a file to upload. On the css I did the following:
input[type="file"]{display:none;}
Tried it on safari 5.1.2 & opera 11.61 and it did not work.... Test it on firefox and ie8 and it worked...
You can't do this with inputs type file in a x-browser compatible way.
Quirksmode, as always, has a lot to say about this topic:
http://www.quirksmode.org/dom/inputfile.html

Is html5 drag and drop broken on safari browser for windows?

Is html5 drag and drop broken on safari browser for windows ? If so, are there any work arounds ?
I'm using Safari 5.1.2 on Windows 7 and the drop targets always show up as non droppable. Tried this on 2 different windows 7 computers with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
http://html5demos.com/drag
Indeed D&D for Safari doesn't work.
Kind of work around for Safari:
Put the logic in the 'dragend' event of the draggable object
Instead in the 'drop' event of the dropping on object.
Yes. After a lot of self-doubt, experimentation, and research, I can say that it is definitely broken for me too (Safari 5.1.7 on Windows) as at today: 15 Nov 2012. This has been quite confusing and distressing!
Hope Apple comes to the party soon.
From http://html5doctor.com/native-drag-and-drop/#dragging_anything
add this:
[draggable=true] {
-khtml-user-drag: element;
}
Non-HTML5 drag and drop is available via jQuery UI:
http://jqueryui.com/demos/draggable/
You can build a download with only that specific function if you want it to be lightweight.
You can use Modernizr to detect whether it's supported and fall back on jQuery if needbe:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
From http://www.html5rocks.com/en/tutorials/dnd/basics/

Raphaeljs library and SmartPhones

I used the worderfull javascript library called raphaeljs on my website to draw maps, animations and animated functionalities. I have noticed that the script using this library work perfectly with iPhone but not with Android.
Can someone confirm this (just going on the demo page of raphaeljs will tell you if it works of not) and if it doesn't, does someone has any idea why, and what could be tested.
Thanks
The default Android browser did not support SVG until they recently re-introduced it with Android 2.3. One workaround is to use Opera Mobile (free from the Android Market) which will work whatever the Android version.
EDIT: My mistake, it's Android 3.0 (Honeycomb) that added SVG support in the default browser.
2ND EDIT: Better add a disclaimer that I work for Opera. There may be other non-default browsers that support SVG (but I haven't tried them).
Actually SVG is supported by Android since 2.0 I think (with WebKit, default browser), it's just not enabled by default : http://jindroid.com/2010/02/15/svg-support-on-android-webkit/
There's a patch you can apply (quite hard to do though) to enable it but I would advice you to download Opera or Mozilla Firefox for Android (via Market), which also supports svg quite well (I tested FF4 with Raphael JS).
Regards

Categories