I’ve finally finished the IPD attachments system (which will likely come to IPB 3.0 along with the new RTE) and I’m pretty pleased with it.
I’ve spent a lot of time on the interface to allow one to make multiple uploads without leaving or refreshing the current page. I finally went with a scripted solution that manages an iFrame. It’s at this point that someone (yes, you Dean) says “Hey, why not use AJAX?”. Well, for one – there wasn’t the need to do so. An iFrame suits this job perfectly and degrades nicely when javascript is disabled. If I wrote an AJAX engine for the attachment system, I’d have either had to accept that non-AJAX equipped browsers (admittedly very few) couldn’t upload files or create an iFrame alternative. Secondly, lets only use AJAX when we need to, OK?
As you can see from the movie below, the result is pretty seamless and – paradoxically – you wouldn’t know that it was an iFrame unless you read this blog. The first one to comment “or read the HTML” gets a slap.
The attachments system in IPD is another little framework that accepts ‘plugin’ modules to the main attachment class to generate permissions / file size restrictions. This means that I can quickly add the attachments system to any area of IPD just by adding a bit of HTML mark-up (and the relevant JS loader) and a little plugin class. The rest is handled by the attachments framework.
There’s a bit of tidy up to do. I’m thinking of changing the colour of the status bar if an error is reported and adding the number of stored attachments to the drop down box title: “Manage Current Attachments (4)” to make it obvious that the page / article / whatever already has attachments.
IPD Attachments (3.1mb Quicktime .mov)
{ 26 comments… read them below or add one }
Two things:
1) Would a progress indicator be possible? I’ve tried looking into the equivalent Rails code that does this, but I can’t make heads or tails of it. I think it would be a cool addition, especially for large attachments.
2) Perhaps a counter of the number of attachments should be shown in the “Manage Current Attachments” dropdown. Some indicator of what’s in there would be good so the information is not totally hidden and obstructed by another mouse click.
Beautiful
Tim,
1) Not without using Ajax.
2) Already mentioned that I’m adding that in the blog entry
Nice but it would not be better to see all attachment without clicking on the selectbox ? However, another way to know it was an iframe : right click on it and see the “This Frame >” context menu ;D
It looks very good!
The thing I’m curious about is how it handles images when inserting them into the post form.
1. Will the width/height be added in automatically?
2. Will there be an easy way to add Alt/Title?
3. Will there be an option to auto create thumbnails?
Jedi: I was going to list the files underneath the upload box and make the iframe larger ( num_rows x px_height_per_row ) but decided the drop down was a neater solution. I don’t see the point of having yet another iframe with the attachments in. In most cases, you’re only interested in uploading new attachments.
Korak:
1 & 3)It’s largely component-centric. The articles manager will scale down the image into a thumbnail at the desired width/height as set in the settings (as per IPB) and show that in the article content.
2) No, but that’s not a bad idea.
Aha, I see. It would still be nice if the default setting of width and height was included in the generated html for the thumbnail, from a web standards and usabillity point of view (same reason with the Alt/Title).
How would you do it if you wish do include a full size image in an article, or on separate pages?
“Aha, I see. It would still be nice if the default setting of width and height was included in the generated html for the thumbnail” It is
Perfect!
How about that “adding full size image”. Is there a separate file manager for these types of things?
Sorry if I’m missing something here.
1. Are the attachments also available to other articles without the need to upload them again?
2. If you need to attach a large file (larger than the max upload size), will it be possible to upload that file (or multiple files) by FTP and then attach it to the article?
1) Yes
2) Yes
This interface looks ridiculously beautiful. Shame on you Matt.
Haha Matt… looks wonderfully beautiful.
If I were writing that part of IPD, knowing me, I would just go ahead and waste my time making it Ajax compatible and offering both methods to be used. But hey, that is just me and my styles of doing stuff.
Anyways… looks swell.
Also, you should maybe added a little ‘Preview’ of the file that is uploaded… like for images, maybe a 16×16 preview of the image, or something?
I don’t think you’ll have much luck with an ajax only version. I don’t think there’s a way to upload a file to javascript so it can be send to the PHP scripts.
Or read the HTML?
(Sorry I couldn’t resist – and it’s my first comment as well)
On a slightly more serious note, it’s looks very cool.
For the indicator (I know you said your not going to do it – I was just wandering) is it even possible with PHP? I thought that the script wasn’t run till the file had been uploaded?
AJAX isn’t needed here.
When you click the attachment add icon, does it just add [attachment=##] into the body?
I’m gonna read the html you @$$e$
Nice usage of the dollar sign.
Matt: I think IPD is going to be flawless either way you look at it. And allowing multiple uploads is a massive time-saver too.
I think Matt can add more file forms, so we can upload more files at one click. how many file forms we have will be an option…
He’ll probably just have a textbox where you add in each extension and seperate each one by a comma or something.
IPD just looks to be getting better and better! I can’t wait for this baby to be release
Good work Matt, love it!
Woot, never knew Matt used Apple, Macs rock lol. Anyways, looks nice and that AJAX is pretty darn sweet.
All this AJAX talk is scuppered one one major problem… you can’t upload files via ajax and you can’t get the progress of an upload with PHP (you can with Ruby and ASP though). I tried for ages while I was working on my upload attachment system for Vectura. I ended up with something roughly like Matt’s…. but before Matt did it! :p
whoa looks awesome! looking forward to IPB 3.0!
I wonder if Matt will replace Movabletype with IPD fpr his blog (here) after he’s done? 
“I wonder if Matt will replace Movabletype with IPD fpr his blog (here)”
I hope so, with some cool IPD bragging features added.
It would be a good reference to see some of the things IPD can do.
It’s possible…