Support for drag & drop, multiple file selects and instant uploads in file field

[Soma]

Think I found the issue. It has somehow to do with the size of the dialog window and or not the size of the images. If I resize page to small in chrome it suddenly works again because dialog is opened much bigger relatively.... not sure if that makes sense but because im on 13" laptop 1280px... annoying bug you... go away!

[ryan]

I've got a MBP 13" too, so will test from there and hopefully duplicate it.

Just uploaded a video of the new Ajax uploading in action:

[Frank Vèssia]

awesome ! 

[apeisa]

Can you mac fellows test this in safari and maybe provide even quick screencast? Some reports that:

a) It doesn't work (fallbacks to old school - this is what I assumed)

b) It does work - kind of. You can drop files directly to inputfield, but not to field area. In that scenario, does the upload start immediately or do you need to save page?

[Soma]

Can you mac fellows test this in safari and maybe provide even quick screencast? Some reports that:

a) It doesn't work (fallbacks to old school - this is what I assumed)

b) It does work - kind of. You can drop files directly to inputfield, but not to field area. In that scenario, does the upload start immediately or do you need to save page?

You can drop files (multiple too, cool didn't know, but I'm not using safari anyway) onto the file select button. It doesn't upload immediately, have to press save. Why don't you install safari for windows and try?

[ryan]

Safari is just supporting the multiple='multiple' attribute. Safari lets you drag files from your computer directly onto the 'Choose File' (aka 'Browse') button and it populates the filenames there. But as far as I know, that has nothing to do with the File API. I think it's just one of those things that Safari has always done.

I hadn't originally thought that Safari wouldn't support the File API... I always figured Chrome and Safari were mostly identical in rendering and function since they are both using the same engine and version (Webkit). Though I guess I shouldn't be surprised since I avoid Safari and love using Chrome (almost as much as Firefox). Too many spinning beach balls in Safari.

[jbroussia]

I'm so sad it won't work in Opera  :'( At least for now... (Opera doesn't yet support Drag&Drop)

[ryan]

Testing some things out today and see that somehow I messed up the Fancybox initialization on new images uploaded to a field that doesn't already have them (though works for new images uploaded to a field that already has them). Antti you may have fixed this in your update. But when I got your last update, I had already implemented fixes for the sorting and fancybox (or thought I did  ), so ended up just copy-and-pasting over the client-side validation stuff you had added instead. My mistake, and a minor problem that I doubt will be noticed, but I will fix on Monday. Just wanted to explain in case you were wondering why the code had changed. Luckily all good with the sorting.

Soma, I'm working off my 13" MBP right now and trying to duplicate the issue you'd mentioned with the TinyMCE image dialog. Still can't duplicate. What are the dimensions of the image you are working with? Maybe if you can tell me the dimensions and I can create one the same size (or if you just want to attach the image) that might help me to reproduce it?

Thanks,

Ryan

[apeisa]

Ryan, no worries. Always feel free to edit all my coding as you see fit.

[Soma]

Soma, I'm working off my 13" MBP right now and trying to duplicate the issue you'd mentioned with the TinyMCE image dialog. Still can't duplicate. What are the dimensions of the image you are working with? Maybe if you can tell me the dimensions and I can create one the same size (or if you just want to attach the image) that might help me to reproduce it?

It happens with all sizes, but the strange thing is that it sometimes worked and most of the time not. Just resizing page to very small it fixes it. Don't know if it has to do with the images size or the size of fancybox..

[ryan]

It happens with all sizes, but the strange thing is that it sometimes worked and most of the time not. Just resizing page to very small it fixes it. Don't know if it has to do with the images size or the size of fancybox..

I will keep trying here. If you come across any other details that might help me to reproduce it, just let me know. Or if you have easy access to record a quick screen capture, that might help to see it. I have a feeling it's an easy fix, but just need to understand it and reproduce it myself.

[Soma]

Ok I did a screen capture of what's going on.... notice once I scale page it works.

[ryan]

Thanks for posting this, it is really helpful for me to see! Hopefully I can duplicate and find a solution.

[apeisa]

IE10 will support File API. I have said it before (not sure where I read it), but at least now it is official (from IEBlog):

With this update, IE10 includes support for touch-friendly sites to use many new technologies:

• Rich Visual Effects: CSS Text Shadow, CSS 3D Transforms, CSS3 Transitions and Animations, CSS3 Gradient, SVG Filter Effects
  
• Sophisticated Page Layouts: CSS3 for publication quality page layouts and application UI (CSS3 grid, flexbox, multi-column, figures, regions, and hyphenation), HTML5 Forms, input controls, and validation
  
• Enhanced Web Programming Model: Better offline applications through local storage with IndexedDB and the HTML5 Application Cache; Web Sockets, HTML5 History, Async scripts, HTML5 File APIs, HTML5 Drag-drop, HTML5 Sandboxing, Web workers, ES5 Strict mode support.
  

http://blogs.msdn.com/b/ie/archive/2011/09/13/ie10pp3.aspx

Lot's of great stuff. Now it feels great to be a web developer, good times ahead

[Pete]

Wow, that is good news - finally IE is catching up with the last few things that were holding it back.

It would still be nice though if IE ever displayed exactly the same as all other browsers out of the box. I can rely on all the others to output my designs correctly, but even IE9 has its quirks so hopefully IE10 will be the end of such quirks and IE will no longer be the outcast

[Marty Walker]

I haven't read through all 6 pages. In Chrome & FF (OSX) the upload works fine. The only issue I can see is when I save the page the image get's uploaded again and I have a duplicate.

[apeisa]

That is strange and shouldn't happen. Is it both - Chrome and FF?

[Marty Walker]

Sadly yes, I just checked both of them before I posted. I can post a video later if you like.

[Soma]

Just tested and I got the same Issue, but ONLY when uploading using upload button. Drag upload doesn't duplicate.

[Marty Walker]

Yes I noticed that too. It's only when using the upload button.

[apeisa]

Thanks guys, I'll take a look at it. I replicated it too and it is a quick fix.

[apeisa]

InputfieldFile.js on line 216 replace this event listener:

filesUpload.addEventListener("change", function () {
			traverseFiles(this.files);
		}, false);

with this:

filesUpload.addEventListener("change", function (evt) {
			traverseFiles(this.files);
			evt.preventDefault();
			evt.stopPropagation();
			this.value = '';
		}, false);

Should be safe fix, but it would be great if you guys can test and report that it works for you too and doesn't break anything.

[Soma]

Thanks apeisa, this does the trick. Drag and dialog upload works as expected so far.  8)

[ryan]

Thanks for finding this and for the fix. I've tested it and all seems to work well – committed to the source.

[Marty Walker]

I have noticed one other little thing that shows up in my error_log file:

[16-Sep-2011 12:14:53] PHP Warning:  Missing boundary in multipart/form-data POST data in Unknown on line 0