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

[apeisa]

Good catch again! Removing the line 180 should fix this: (EDIT: from file InputfieldFile.js)

remove:

xhr.setRequestHeader("Content-Type", "multipart/form-data");

Not sure if we should set something else as Content-Type header, but just by removing that everything works fine on my localhost (win7). I had the same warning in my apache error.log, but now nothing.

[ryan]

Thanks guys, I've committed this update.

[Soma]

When uploading images (whithout having images already on page) first time, fancybox preview doesn't work right away, I need to save to get it working.

Not sure what happened with this, I thought this was already fixed by apeisa.

[apeisa]

When uploading images (whithout having images already on page) first time, fancybox preview doesn't work right away, I need to save to get it working.

Not sure what happened with this, I thought this was already fixed by apeisa.

Hmm. I cannot duplicate this. Do you have normal image inputfield or maybe Flickr? That might cause some issues, not really tested that with new uploads.

[Soma]

Yes normal image field. Make sure you don't have any other images on page yet... if there are fancybox is initiated else not.

[apeisa]

Yep, no luck reproducing this. I have removed all other image fields from my template, and also removed all my images. I add one image by drag & drop or from inputfield. After 100% I click image and fancybox we have.

[ryan]

Just tested and can't duplicate this either. FancyBox is loading here when uploading image(s) to a field that doesn't already have them.

On the other hand, if I upload images to a field, then disable Javascript in my browser settings before clicking on any images, Fancybox no longer works.  ;D

Soma check that you've got the latest commit from last week. GitHub stopped updating my Twitter feed for some reason, so if you were using that to monitor commits you might have missed it.

[Soma]

This is some strange thing... Just tried and tried and it never worked, I even downloaded and installed from github again.. nothing. Now I go and do a screen recording and know what?!! It works! ...  .

[apeisa]

Everything what is strange in web world is called cache

[Pete]

Hi Antti - various things have prevented me from working much on my PW site conversion the past few weeks, so I've only just got around to upgrading and after sorting out my embarrassing "images not resizing" issue, I'm now in the process of batch uploading images for a bunch of gallery pages.

Have the biggest virtual keg of beer on me (or another drink of your choice)! This new system makes this part of my project - and no doubt a lot of other projects - infinitely easier and has transformed something that can be a bit tedious into something quite enjoyable! Well done!

I know several admins on one of my sites who are going to be very happy when I've finished converting the site.

[apeisa]

Thanks Pete for your kind words and virtual beer Can't take all the credit, since Ryan committed whole lot coding and great additions for this.

I have had few opportunities to demo this and it is so cool feature to show (especially when using on live server and not in localhost - when you can actually see those progress bars ).

[Pete]

Well thanks to ryan too of course.

Yep - I can imagine how cool it is to show this off and hope to be doing this myself soon!

[ryan]

Sorry for the double post. Ok this gets kinda weird, but It worked for me only one time with as smaller image... but after the second try it didn't even with smaller images. Attached a screenshot, the iframe that loads has the selected image div which is empty ... height:0 ... does it get loaded by ajax into it? and replace those "..."? I can't se any errors or anything, might be some kind of chrome bug, cause just tried and it works in safari, can't test on firefox because he hangs himself up everytime I open him

@Soma, oddly enough this issue just started happening to me on my desktop computer with the latest Chrome. Though it didn't matter what width I had the window at, the image would just disappear whenever I selected one and I basically got the same thing as you. As far as I can tell, it's a bug in Chrome. But I found an easy fix, and that was just to add a height attribute to the image. That seems to fix it here. When you have a moment, would you mind giving it a try over there?

While I was there, I added width/height pixel inputs for specifying image dimensions. I think Pete had asked for this awhile back, I need to track down that thread.

[Soma]

Finally! Thanks Ryan, that was it right there. Ii knew it must be a bug. I tried something with setting width and height but no luck with JS.

Now testing I found a bug, when I resize a image to let's say 200x150 and insert then open again it gets stretched to 934x150...

But this is a nice feature having int input fields, the resize handle is barely visible anyway and kind wacky to use.

[ryan]

Now testing I found a bug, when I resize a image to let's say 200x150 and insert then open again it gets stretched to 934x150...

Can you describe more how to duplicate? I might be doing it incorrectly, because I can't duplicate yet. Tell me what I'm missing (I'm using Chrome):

1. Click image icon in TinyMCE, select image (my example is 900 px wide).

2. Enter 200 for width, hit enter, and click "insert image" and image appears in editor.

3. Back in TinyMCE, click image to highlight, and click image icon again.

Following that, my image is still 200x150. What am I missing?

Also, right click somewhere in the image edit window, and choose "Reload Frame". That will make Chrome reload the CSS and JS files, just in case it has an older version cached.

[Soma]

that's exactly what I do, but it get stretched after open again... cleared all cache and reloaded frame.

[ryan]

I may be one version behind you with chrome. Based on what you are saying, it sounds like they've added real image selection capability in the latest chrome (something that FF had before but not webkit). I'll check if there is a new chrome update on Monday to test with.

[Soma]

DOn't worry, it was my theme causing the issue..  played around a little last time. Now it works.

[ryan]

The issue you described does happen in FF in some cases, due to the image selection and some issue in TinyMCE (out of my hands unfortunately), but I was thinking this was the same thing. Glad to hear it's not.

[Soma]

But now I got a problem with portrait images, it does stretch the image and it does not keep ratio when entering. It works with landscape images. Also the number fields are to small, last number get cut when 4 digits.

[Pete]

I've got a few quick queries regarding multiple image uploading.

Firstly, it seems to order them randomly when they're uploading. I'm not sure what you guys think, but perhaps if you select a large group of images they should be arranged in name order? It's obviously not applicable to every scenario, but if you're uploading photos for example you would often want to order them by date, and since digital cameras name them in order, ordering by name makes sense.

Of course, you've then got a different problem if you upload 10 at once, but then an 11th one afterwards, so maybe if they're uploaded singly then add them to the end, but if there's a batch of them being uploaded at once then order by name?

Just a thought - and I realise it's full of potential issues about what you would expect to happen in certain scenarios, but my first thought when selecting a lot of photos from my hard drive was that they should have uploaded and appeared in the same order.

On a different note, I noticed that if you enter a description for images and save the page, when you insert them into the body of the page then they use that description by default. Is there any way that the descriptions can be passed before saving the page? From a workflow point of view it breaks the flow to have to save the page before inserting the images into the body so that the description is available when inserting images (and you don't want to have to type a description twice), so I was wondering if it is possible for the modal window to check the description field of the parent window if there is currently no description saved for the image you select? I suspect it's do-able with some jQuery magic.

[apeisa]

I think they got added in the order that which uploads fastest. All files start at the same time (there is some max limit there though, probably browser sets it). So adding this kind of functionality would mean that we would need to upload those one by one (first file needs to be uploaded before we can start sending second etc...), which would make the whole thing slower. Considering ups and downs, I don't see enough reasons in trying to get uploads ordering by name. Better option might be simple module that would require click and it would sort files automatically and save the page (or just the files field).

Same goes to description issue. I think it is minor issue and amount of work for it pretty high. Not saying that I wouldn't like those features, but I consider them as pretty expensive "I wouldn't mind to have" features. I see this one blurring the lines of what requires clicking the save button and what doesn't (and to be honest, ajax uploads does too - could be good idea to have notification about that?)

[Pete]

That's a good point on the ordering - because I'm testing local they look like they're finishing at almost the same time, but I guess if there was maybe 30 seconds between the first one and the last one uploading (due to file size) it could actually be quite confusing if they suddenly re-ordered themselves.

I think this was all stemming from me uploading up to 20 pages at a time so really the solution there is something we've discussed before which is multiple images per row to alleviate scrolling and make a but more use of the screen width rather than having to do a lot of scrolling which becomes a bit of a pain when reordering images.

[apeisa]

multiple images per row to alleviate scrolling and make a but more use of the screen width rather than having to do a lot of scrolling which becomes a bit of a pain when reordering images.

With this I completely agree.

[ryan]

But now I got a problem with portrait images, it does stretch the image and it does not keep ratio when entering. It works with landscape images. Also the number fields are to small, last number get cut when 4 digits.

Looks like I was missing an attribute. Thanks for finding – This is fixed in the latest commit.

I agree on the needs for an option to have horizontal image display, at least when using thumbnails. We'll get an option for this soon, and I don't think it'll be too difficult to add.