Reply to: Who's done the least work today?

[swamp]

I've wrote two SQL statements (1 liners), gone to the pub for 3 hours, and that's about it ... can you beat?

PS You must be getting paid to do nowt! ;-)

You may have only written two SQL statements (far more than I normally do), but you were still in the office at 4pm on a Friday

[thunderlizard]

Nick, you never fail to impress.

The workaround that probably would have worked would have been to use a client-side event on the uploader to populate an image via Javascript. More effort that I want to spend on a nice-to-have. Ever get the feeling you're writing DailyWTF-grade code that would be avoidable if only you knew the proper way? well maybe you don't but it's a constant worry for me.

[minestrone]

First week on a new job and I did pretty much nothing, what do they expect you to do when they give you a machine with 1 gig and expect you to run websphere on it?

[NickFitz]

It would have been nice, but not really necessary. The submit button takes them to a page that displays what they've just entered anyway. And if users don't know what image they're uploading, that's their lookout!

The real problem is the way file upload is supported by browsers. What you're encountering is a classic example of a leaky abstraction: the things you expect to work probably won't work, because behind the scenes everything is happening totally differently, and the results can't be handled in the same way.

Problem is basically this: FileUpload control doesn't work in an UpdatePanel, so I'd have to wait for a full page postback so my one-step user-enters-details-and-saves-them idea would be lost.

Standard Ajax techniques rely on creating an instance of an XMLHttpRequest object (XHR) to open a connection to the server, make a request (which may include form data presented in the appropriate representation depending on the method of the request, GET and POST being the most common methods), and receive a response, all without refreshing the page as happens with a normal form submission.

However, XHR will only do requests where the content-type of the form (which for some obscure reason is defined by the enctype attribute) is application/x-www-form-urlencoded. Although this is fine for most things, it doesn't allow for the upload of files. That requires the content-type multipart/form-data, and XHR cannot deal with that. (Linky to the spec, FWIW.)

Brand-spanking new AsyncFileUpload has the opposite problem: it uploads the image quick as you like but doesn't trigger a postback so I can't show it on screen.

This is where the abstraction starts to leak. I haven't used the AsyncFileUpload control of which you speak, but I have no doubt that it works in the same way as all such solutions do. It's a very neat hack, but it's still a hack. (I'd like to link to the originator of the hack, but the Google search results for many combinations of terms are now so polluted with assorted spammy "tutorials" and libraries that I can't track him down. However, all JS libraries do it this way, and although Microsoft often seem desperately keen to muddy the waters when it comes to what's on the server and what's on the client, this is on the client, and therefore a JS library.)

Given that XHR can't upload files we are left with one obvious fact: the browser can upload files. Therefore we make use of the browser. What we do - or, what the library does for us - is to create an iframe, hide it by positioning it off-window, assign a name to it, set the target attribute of the form to that name, assign an onload handler to the iframe, and call the form's submit method. From that point on the browser just does what it does when making a normal request-response cycle; and you'll see activity in the usual places, like throbbers and status bars.

When the iframe then loads the response to the file upload, the onload handler kicks in. When using a library, this is the point where the response is packaged up in some way and sent to your "oncomplete" (or whatever it's called) handler.

However, you now face a number of deviations from the normal situation upon receiving the response to an Ajax request:

1. The XHR object's responseText and responseXML properties aren't available, as there never was an XHR object in the first place;
2. If the server sent the response as text/html, and it wasn't an HTML page, the browser will probably wrap some <pre></pre> tags around it for rendering purposes (not all browsers do this);
3. If the server sent the response as XML and it wasn't well-formed, the iframe might contain an XHTML error message from the browser's XML parser (Firefox does this);
4. If the server sent the response as XML and it was well-formed, the iframe might contain a bunch of not-very-well-formed HTML and JavaScript that, if seen by the user, would be a pretty-printed interactive rendering of the XML (IE does this);
5. If the server sent the response as text/json, the browser will probably pop up a dialog asking the user if they want to save the file to disk, as browsers don't display that content type;
6. If the server sent the response as text/plain, and you wanted XML or JSON or HTML, you need to grab the plain text and find a way to parse it yourself.
7. ...and other possible pitfalls.

Of course, you may also have to deal with the way your library attempts to deal with these situations: it might make things better, or worse, or just different

See what I mean about hacks and leaky abstractions?

Still, with that basic summary of the background to it all, a few minutes with a debugger on your own code combined with an HTTP debugger like Fiddler or Charles should see you clear to getting things working. Just remember to check across as many different browsers as you can

P.S. It can be done; I've done it. I was using YUI with Symfony on the server, but those details are irrelevant: whatever you're using is doing it that way.

[thunderlizard]

Giving up on the image display

It would have been nice, but not really necessary. The submit button takes them to a page that displays what they've just entered anyway. And if users don't know what image they're uploading, that's their lookout!

[HairyArsedBloke]

This morning started to be 'one of those days', but got better just before noon and I've made progress for the rest of the day.

However, it's taken me all week to manage to put two rows into one of the tables in a database.

[pzz76077]

I had to spend Mon-Thurs working at home to get some documents finished.

Came in today, director signed off this weeks time and signed 2 blank t/s for the next fortnight as he is away in the States working.

If I didnt win this week, then the next 2 weeks: no contest!

PZZ

[Jeebo72]

I would help, but that would be work ...

and I know **** all about asp.net.

[DimPrawn]

Cheers DP.
Problem is basically this: FileUpload control doesn't work in an UpdatePanel, so I'd have to wait for a full page postback so my one-step user-enters-details-and-saves-them idea would be lost.

Brand-spanking new AsyncFileUpload has the opposite problem: it uploads the image quick as you like but doesn't trigger a postback so I can't show it on screen.

Sounds complicated. I'll leave you to it.

[thunderlizard]

Cheers DP.
Problem is basically this: FileUpload control doesn't work in an UpdatePanel, so I'd have to wait for a full page postback so my one-step user-enters-details-and-saves-them idea would be lost.

Brand-spanking new AsyncFileUpload has the opposite problem: it uploads the image quick as you like but doesn't trigger a postback so I can't show it on screen.

[DimPrawn]

I have continuted to fail to make an ASP.NET page that does this:
(1) User uploads an image
(2) It immediately appears on the page.
(& yes I have googled it. About 1000 times. All the ideas look plausible but none of them go the whole hog).

If the problem is the page shows an old image, stick this in the page markup.

<%@ OutputCache Location="None" %>

[alreadypacked]

0898?

They couldn't afford me

[EternalOptimist]

Are you gays all alcoholics?

well, I cant speak for anyone else......

[Spacecadet]

Are you guys all alcoholics?

I got married and house bound before it got that bad

[thunderlizard]

I have continuted to fail to make an ASP.NET page that does this:
(1) User uploads an image
(2) It immediately appears on the page.
(& yes I have googled it. About 1000 times. All the ideas look plausible but none of them go the whole hog).