132 replies to this topic

[ryan]

Thanks for testing it. I was wondering about this too, and I think we can. So far this solution is all part of InputfieldFile, so its behavior is currently going to be the same whether dealing with a regular file(s) field or an image(s) field. I was thinking the JSON response could optionally include some markup that would get shown after a file is uploaded. So InputfieldImage could create a thumbnail and return a little markup with an <img> tag. I think it'll be relatively easy to do. But getting this ajax upload was the last "new" thing I wanted to get committed before putting PW 2.1 out, so will add this thumbnail preview afterwards in an incremental update.

[apeisa]

Just tested and old school works, as well as html5. Great job and thanks again for finishing this!

What comes to preview and maybe instant removing => after 2.1 definitely. And previewing might be best to do using js: we could show the image at the same time than it uploads (if there were something to remove, you could stop uploading before it finishes and never ends up to the site). We wouldn't need to create thumbnail image at all on the backend (although that is needed anyways if you use thumbnails setting on your field).

[Soma]

So far it's not throwing an error when upload max size is exceeded. It just shows 100%.

It would be nice, if it's possible to validate before upload starts, and after it's uploaded showing the preview. I don't know if I like the instant preview before the image is even uploaded or validated, it could suggest it's valid and already "there".  IMO this is one of the problems with oldcool uploading, after 30 second of uploading a file, it says not valid or too big...

[apeisa]

We cannot really validate before upload starts (since we don't have file that we want to validate), but definitely could (and should) do some basic checks there (supported filetype and small enough filesize at least). I'll look into this (should be easily doable).

Good point about that someone might get confused to see preview of image before it is uploaded. Although not sure if that is the case, since there is pretty big progressbar going on also. Maybe some label like "preview" or "currently uploading" would make it clear.

[apeisa]

Ok, I did some pre-validation on front-end (simple check on file extension and filesize). See the attached zip (contains only changes files, .js and .module). Please test at least few times and with "difficult" filenames and sizes. Works fine on my localhost.

Only thing I am not sure is how I get max filesize:

<?php
$max_upload = (int)(ini_get('upload_max_filesize'));
$max_post = (int)(ini_get('post_max_size'));
$memory_limit = (int)(ini_get('memory_limit'));
	
// comes megabytes from php.ini, we convert to bytes (ie. 1024 * 1024 * 2M = 2097152 bytes)
$this->max_filesize = 1024 * 1024 * min($max_upload, $max_post, $memory_limit);

Is there some $config or field setting already on pw or is this ok?

Attached Files

•  InputfieldFile.zip   6.02K   25 downloads

[ryan]

I think we were working at the same time because I've also got some updates, though mine don't yet incorporate yours. I'm not too worried about max filesize. PW doesn't keep track of filesize … I see it as a non-issue for the admin usage that these fields were built for. But for the AjaxUpload, it does seem like a nice convenience. Could be a nice thing for those with servers that have 5 meg limits on their php.ini settings and they are trying to upload a 500 meg file. PHP does keep track of max filesize, so I think that's where we should get it (per the ini_get settings you mentioned).

I couldn't leave the image preview thing alone. Every time I used the upload, I wanted to see it right away. So I went ahead and added it. So now it shows you the image immediately after it's been uploaded. It accounts for thumbnail settings and/or post-image resizes too.

I've also made several other updates so that you can edit the description and sort the images right away too.

Lastly, uploads to a single-file field now support replacement. No longer do you have to delete the image before you can upload another. Now you can just drag in the new one and it'll replace the one that's there.

Attached is the latest version (AjaxUpload3.zip). If you already have the AjaxUpload2.zip installed, then you only need to replace the files in the InputfieldFile and InputfieldImage directories.

Antti: Is it relatively easy for you to paste your code updates into this version? If not, I will update my version with your updates, but may need assistance figuring out all the spots that need to be updated. I may be able to figure it out with some diff action, but just wanted to double check so that I don't miss anything.

Thanks,
Ryan


---

Edit: php.net's ini_get() page Example #1 shows how to convert PHP's size notations (like 5M, 1G, etc.) to bytes. This is probably what we need for the upload_max_filesize? http://php.net/manua...ion.ini-get.php

Attached Files

•  AjaxUpload3.zip   23.16K   28 downloads

[apeisa]

That sounds excellent! My update had only few lines of code, so I can easily merge those. I'll do that tomorrow, now heading to bed. I didn't realize that ini file size settings can be also G and others, so I will refine that conversion script too.

[Soma]

...just one word. Orgasmitastic!

Just installed and it's beautiful to watch, uploading 20 6mg images and see them process....

One minor problem though to be almost perfect: sorting after images are uploaded doesn't work nor doesn't fancybox. After refreshing page it works.

EDIT: Well sorting works for newly uploaded images if there IS already images saved there in first place. But fancybox still doesn't work for the newly added.

EDIT: Sorry for being so picky. But I would expect that when instantly adding images this way that the sorting alos gets saved per ajax instantly. It doesn't though.

While playing around I tried add images in tinymce, and it shows full size images among to select which is hard to see them. After selecting one it disapears and I can't resize it. I'm using chrome latest on osx.

[ryan]

Soma, thanks for your testing here.

One minor problem though to be almost perfect: sorting after images are uploaded doesn't work nor doesn't fancybox. After refreshing page it works.

Both are the same issue. I just need to re-apply the fancybox initialization to new images, and have the sort be able to initialize after document.ready(), so it should be a straightforward solution. Just a matter of applying these initializations after rather than before, and do so more selectively.

But I would expect that when instantly adding images this way that the sorting also gets saved per ajax instantly. It doesn't though.

I like the convenience of the AjaxUploads, but dynamically saving sorts is an entirely different thing. It may be okay forms without a save/submit button. But in our context I think it would be an overuse of ajax. I want to be cautious about blurring the lines too much about when something is saved and when it isn't. When people are changing anything on a page, they need to save it. Ajax uploads do create some blur, but it's a progressive enhancement and worth the compromise. I wouldn't want to blur that further. Making it save the page every time you dragged to sort a file would create an expectation that multi-choice fieldtypes (like with asmSelect) should do the same thing, and the template editor, and so on. You wouldn't know when you needed to save and when you didn't. I don't want people to assume that their changes are committed until they've saved the page. One should be able to experiment with different sorts without their experiments being visible to the public.

I got nailed by this same problem recently when a site was saving the state of every image I dragged (unknown to me). I never hit save, nor was I intending to. My cat ended up as my profile picture for several days before I realized it! 

While playing around I tried add images in tinymce, and it shows full size images among to select which is hard to see them. After selecting one it disapears and I can't resize it. I'm using chrome latest on osx.

When selecting images in TinyMCE (after clicking the image icon) it shows all the images on the page and limits their width to the window size of the modal dialog. Let me know if you are getting a horizontal scrollbar, as that would indicate it's not working. I don't often deal with images as large as you (you mentioned 6mb), but one option is that I could have the image selection specify a max width that's smaller, like 50% window size or something like that. But this is one place where I lean towards scaling over resizing. For image fields that have automatic thumbnails turned on, it may be possible for it to use those though.

As for the image disappearing after you selected it, I'm not sure what's going on there so need more info– does it do that too all images, or just the big ones? I can't duplicate here in my testing (also Chrome latest in OS X), but I don't have any 6mb images either.

[apeisa]

I added my modifications (simple validation for filesize & extension) and also added fancybox & sortable for right away added images.

I agree with Ryan on not to go too far with ajax-features....

EDIT: Small modification to Inputfieldfile.js file to line 200:

if (extensions.indexOf(extension) == -1 && extensions.length > 1 && extension != "zip") {

I was too lazy to zip & upload again. If for some reason extensions array is empty, then we skip pre-validation all together. And it seems that allowing zip extension is not required if you want to use "decompress zip files" settings (and I confirm: does not work on windows).

Attached Files

•  InputfieldFile.zip   7.02K   24 downloads

[Soma]

Yes the images fit the fancybox width, but if having really large images it gets slow, would be cool to have like 50% though it's may just because I'm on 13" mbp... aaand also the images max width height setting isn't set on those, that would not be the case in a real site.

It's strange after I select the image it disapears... always, I noticed this already sometimes before, I will check out more to may find the real issue. It could be the large imagesize, I developed similar thing in my admin apps and also experience some strange trikcy behavior with fancybox modals and images vs js css etc.

I understand your point and agree in that it should not blur that too much, though having some king of simple ui response notification that makes it clear, like you already have on page tree list move actions, well it is in a kinda different context. But still I agree that it need attention in the ui interaction design

[Soma]

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

And forget about the 50%! Stupid idea...  

Attached Thumbnails

• 

[ryan]

Soma, thanks for the testing. I keep trying to duplicate in Chrome/OS X but so far no luck. What version do you have? I'm running 13.0.782.112

Also, have you restarted Chrome recently (just in case)?

Antti, thanks for the updates! I have applied them and added a few last minute details and have committed this feature to the 2.1 source!

Add support for HTML5 ajax file uploads thanks to @apeisa - Now you can drag and drop one or more files right into PW file or image fields. With images you get instant previews. With single-file fields you can drag-and-drop to replace. This is the most fun-to-use CMS feature I've seen in awhile. Thanks also to Soma for the testing and suggestions.

[apeisa]

Great stuff. I went totally crazy on Twitter because of this Great job fellows!

[Soma]

Soma, thanks for the testing. I keep trying to duplicate in Chrome/OS X but so far no luck. What version do you have? I'm running 13.0.782.112

Also, have you restarted Chrome recently (just in case)?

Yes I did, but no luck... got 13.0.782.220

Antti, thanks for the updates! I have applied them and added a few last minute details and have committed this feature to the 2.1 source!

Awesome, congrats apeisa! and ryan! Great work guys!

[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:

[Sevarf2]

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?