Flex App Basics 6: Multiple File Uploads | Mon 25 Jan 2010 | Blog

Flex App Basics 6: Multiple File UploadsMon 25 Jan 2010

On Friday I added a "file management" area to the contact form in the app I'm working. Not long after, as I expected, a couple of you asked for the "killer feature" of being able to upload more than one file at a time.

Ask and thou shalt receive!

The vertical lists of files on the left is the "queue". Files shown there have been selected and are waiting to be uploaded.

Notice that, if you press the Select Files button, the file dialog that appears allow you to select more than one file at a time - unlike with the counterpart HTML file upload control.

Pressing the Upload button sends them, one-by-one, to the backend document. As each file is uploaded it gets removed from the queue and added to the list on the right.

Notice also, that the tiles for existing attachments on the right now include a "Save As" link. Whereas clicking the icon for the file lets the browser decide what to do, the Save As button lets you simply save it to your disk.

It needs a little more refinement, but I think it's ready for you guys to test it.

Replacement For ActiveX?

On Friday Curt Carlson said:

Now if you could choose to upload multiple files in one shot, that would be something Domino has refused to do without active x or some other non-native functionality.

This got me thinking. While this FileManager Flex component is a part of its containing Flex app, there's no reason it can't be used standalone in a normal HTML page.

Rather than needing to install/sign/embed a 3rd party ActiveX component and restrict your users to IE you could just add this component as a Flash SWF file and let it interact with your backend Domino document in the same way you can see it doing in the Flex demo.

If you're interested I'll create a SWF and demo?

Comments

- Jono
- Mon 25 Jan 2010 03:44 AM
Worked a treat for me - Fantastic. Great job Jake! The only thing I could see my users asking for is drag n drop functionality (they do ask for the world, don't they?) but I am sure this would be a browser limitation, not Flex...
What's next in this Flex adventure then Jake? I'm gripped and trying to keep up!

Reply
1. - Jake Howlett
  - Mon 25 Jan 2010 04:12 AM
  If I get time I'll look in to it, but expect d-n-d it's a no-goer.
  Not sure what's next. Probably to polish off what exists (unless you can think of anything that's missing?) and possibly document how to go about converting your own Domino apps to use this "framework".
  I've built the whole app you see here using configurable components (such as View.mxml and Form.mxml) so that it should be a simple task to Flexify a Notes database. Kind of like what Ext.nd tried to do with Ext, but better ;o)
  
  Reply
- Mark Barton
- Mon 25 Jan 2010 04:30 AM
Really good Jake.
An AIR app reusing your component would support drag and drop.
GMail actually uses Flash to do multiple file uploads as well - great minds think alike.

Reply
- Cass
- Mon 25 Jan 2010 04:50 AM
Hi Jake, Nice demo. Does this still work if you are not allowing anonymous users to upload (i.e. users need to be authenticated)?
I tried using SWFUpload to create a flash based multi-file upload control for Domino, but found an issue with the Flash player in that it does not maintain the active browser session in anything other than IE.
Does Flex suffer the same irritating problem?

Reply
1. - Jake Howlett
  - Mon 25 Jan 2010 05:09 AM
  Hi Cass,
  Hmm. Just when I thought I was on to something.
  You're right. It doesn't work well with anything other than Anonymous users. As I understand it the Flash plugin doesn't use the browser itself to send the file, so, in this case, it doesn't pass any authorisation headers with the request. If you login and then upload a file it considers you as Anonymous. DOHHHHH!
  I'll have to look in to this and see if there's a way round it by passing in the auth headers to teh URL request, as discussed here:
  http://stackoverflow.com/questions/509219/flex-3-how-to-support-http-authentication-urlrequest
  
  Reply
2. - Jake Howlett
  - Mon 25 Jan 2010 05:57 AM
  What type of authentication were you using Cass? Sesion-based cookies or basic browser-based authentication? It seems only the latter has issues. If you use cookies then they get sent with the request and Domino knows who the user is.
  
  Reply
  
  Show the rest of this thread
  1. - Cass
    - Mon 25 Jan 2010 06:33 AM
    I was using session based. From what I gathered by reading on forums, the Flash player sends IE cookies, no matter what browser you were using. Therefore, if you use IE it's fine, or if you're IE browser maintains the session after closing it may also work.
    SWFUpload had a PHP workaround for this session bug, but I couldn't find an easy way to do this in Domino, so ended up re-queueing the first file so that it:
    1. Sent the file to a public access page along with the LTPAToken to set a Domino session for the Flash player
    2. Changed the upload URL
    3. Sent all remaining files plus the re-queued first file to the new, correct URL.
    This worked, but is a pain, as if you are uploading a large file first it has to upload it twice to store it once.
    
    Reply
    1. - Jake Howlett
      - Mon 25 Jan 2010 07:08 AM
      Ah. That explains some odd behaviour I was seeing.
      Do you remember if the problem was with Flash player 9 and/or 10? I think v10 sorts a lot of this out.
      One idea I did have was to pass the Cookie part of the URL request the Domino session values. Something like this:
      var credsHeader:URLRequestHeader = new URLRequestHeader("Cookie", parentApplication.parameters.AuthType+"="+
      parentApplication.parameters.AuthToken
      );
      urlRequest.requestHeaders.push(credsHeader);
      The idea being it replaces the cookies that Flash is sending from IE with our own more trustworthy ones.
      Do you know if that would work?
      
      Reply
      1. Cass
        
        Mon 25 Jan 2010 08:28 AM
        
        I think the problem was still there for me in both Flash 9 and 10.
        Sorry, I don't know if that would work or not (admittedly my knowledge in this area is limited!), but it's an interesting idea. I would be very interested to see if it does work as this would be a better solution to a problem that has bugged me for some time now!
        
        Reply
        
        Jake Howlett
        
        Mon 25 Jan 2010 02:48 PM
        
        From my initial testing it doesn't look like it will. Not given up yet but I'm not holding my breath either...
        
        Reply
        
        Chris
        
        Thu 15 Apr 2010 10:56 AM
        
        Did you have anymore luck with this?
        
        Reply
        
        Jake Howlett
        
        Fri 16 Apr 2010 03:29 AM
        
        No. I gave up in the end. The only solution is probably to do something like Mark Barton suggest lower down this page.
        
        This reply is already 8 levels deep and so replying at this level is disabled.
- Curt Carlson
- Mon 25 Jan 2010 07:37 AM
You are the man Jake!

Reply
- Chris
- Mon 25 Jan 2010 01:04 PM
Please create a SWF demo if possible.
I've been dreaming of the day when I can dump that IE only DLI.Uploader ActiveX control from my sites.
I written ASP.NET websites that use SWFUpload, but I've never been able to get it to work in Domino.
Speaking of Flash, I never understood why IBM still uses (or gives you the option to use) Java applets for rich text fields and views. Flash would have been the best technology for these two things (if HTML/JavaScript didn't give you what was needed).

Reply
- Jerry Carter
- Mon 25 Jan 2010 02:28 PM
Wow Jake. Component-ize that and you have a nice offering - get d-n-d sorted out and you have a killer offering. If you have a functional replacement for more expensive IE only solutions, you will have killed some market for some folks. You might want to capitalize on that.

Reply
1. - Jake Howlett
  - Mon 25 Jan 2010 02:47 PM
  That's what I was thinking. See the thread with Cass above though. Kind of pissed on my chips that did. I've not given up on finding a solution yet, but that single bug has rendered all the work on the file manager component pretty much useless.
  
  Reply
  
  Show the rest of this thread
  1. - Gene Lawhun
    - Mon 25 Jan 2010 06:26 PM
    Jake,
    Love your examples and articles.
    I was searching for a multiple file uploader and took what you did with the single file upload for Flex and made it a multiple file uploader with progress bar, etc..
    User compliles their list of files with associated categories and then clicks the upload button. Files upload (to the documents on the server) then refreshes the page through Javascript (I only do this to then call an Agent to parse the uploads and place them accordingly on the server in their category and then delete the docs with attachments. On load of the document it goes out and finds all attachments and lists them in the categories.
    Works beautifully. You can see the files upload and if there are bigger files you can see the progress and not start clicking around thinking it's not working, etc... screen refreshes and resets the upload control and the previously selected files are now links in their appropriate section. All is good until ......
    .... being so excited about my first new "Flex" app and having the ability to upload multiple files at once .. I had a Co-worker with Firefox on Mac (who is the Flex expert for our development team) try it and he promptly returned an email stating "Error" in your progress status and nothing uploaded.
    What a let down.
    Since, I've tried with Chrome and Firefox on a pc and still can't get it to work. I've been seeing others saying it was an authentication issue and Flash player doesn't maintain your existing website session, so if an authenticated session is required to access the template that accepts the uploaded file(s), the web server refuses access, and thus uploads won't work.
    I've been looking at trying to pass the sessionID from the cookie being set when the user authenticates but ran accross this article before figuring it out.
    I would love to find a solution to this as well as there are a few hundred Sales Reps that are waiting patiently on a multiple file uploader for our domino application.
    Thanks and sorry for the long post.
    -Gene
    
    Reply
    1. - Jake Howlett
      - Tue 26 Jan 2010 02:40 AM
      Hi Gene,
      I felt the same way -- excitement gave way to annoyance that this bug could render all my work useless. Most annoying is that Adobe have known about this for some time.
      You're right, the problem is that Flash doesn't send cookie data with the upload (unless you're using IE (or happen to be logged in with IE)). A workaround I've seen mentioned for other platforms is to pass the "session id" via a URL query parameter. Domino can't use it that way though.
      I've not given up on it yet but I need to step away from it, as I've already spent way too much time on it and resolving bugs like this can takes hours and days to solve.
      Although, if you want to pay me to find a solution, that's another matter....
      Jake
      
      Reply
      1. Gene Lawhun
        
        Tue 26 Jan 2010 10:39 AM
        
        Hey Jake,
        Got it to work but tell me how bad is this resolution and any possible remedies or checks....
        I made a blank database with just the upload form (in your case: Demos.Flex.Upload). The ACL on the db is Default: No Access, Anonymous: Depositor with our Admin group having Manager. The key is the Anonymous user.
        With this being set to Depositor it allows the doc(s) to be created and thus the uploads to happen. Like I mentioned before, after I upload the files I then submit my page which calls a WQS agent that goes and gets the attachments (key by UNID), puts them on the server and then deletes the docs.
        The page is reloaded and the new files are shown as links on the page.
        So, how bad am I going to get hacked now?
        -G
        
        Reply
  2. - Mark Barton
    - Tue 26 Jan 2010 08:40 AM
    Jake couldn't you post to a form which allows anonymous access, via the public access flag, and carry with it the name of the authenticated user.
    Then get a WQS agent to update the real holding document on behalf of the user, basically a proxy service.
    Its not ideal but should work ok.
    
    Reply
    1. - Jake Howlett
      - Tue 26 Jan 2010 08:53 AM
      There are a couple of options floating round in my head, of which that's one. I want to avoid having to do anything like that though really. It's just too messy. For starters, how does it handle document security if any anonymous user can upload files to a document?
      
      Reply
      1. Mark Barton
        
        Wed 27 Jan 2010 08:19 AM
        
        I posted a possible solution on my blog - http://www.markbarton.com/?p=163
        Its long winded but hopefully should work.
        
        Reply
- Alex
- Tue 26 Jan 2010 09:54 AM
Hi Jake, "Flex, on aime!".
And what about adding a "real" search tool using the database index rather than the (nice, but equivalent) "filter" function ? (i.e. same behaviour as classic Domino Web sites) ?
Thank you for your fantastic job. Greetings from Geneva!
Alex

Reply
- Robert Connor
- Tue 26 Jan 2010 08:00 PM
I cant believe it. Its actually here for Domino. I have been trying to use flash for over a year to create a multiple upload solution. I knew you would be the one to do it. I beg of you to please release the code or provide a walk through on how did it. PLEASE!
This is actually something I would pay for. I think after all the free code and tips you have provided us over the years that this is something you should break down and charge for. IBM should pick this up from you and include it in the next release. It's time you got something for your many efforts. Even in its raw as is stage I would be happy to donate to any cause you see fit.
In the meantime...can we get that code? :)

Reply
1. - Jake Howlett
  - Wed 27 Jan 2010 04:01 AM
  Glad you like Robert.
  If I were to charge for something then I'd have to be completely happy with it. As it is I'm not, because of the Flash player bug detailed above. Until that's resolved any alternative is what I'd consider a hack and not what I'd want to bill people for.
  If you want to donate to some worth cause (Haiti for example) and forward me proof of it then I'll send over a pre-release version of the code...
  
  Reply
- Andy
- Wed 27 Jan 2010 05:33 AM
Maybe the solution is closer to home...
using xpages I found this example, maybe there's a way to hook into this with flex somehow.
http://www.jmackey.net/groupwareinc/johnblog/johnblog.nsf/d6plinks/GROC-7G3GF7

Reply
- JD
- Tue 9 Mar 2010 04:59 AM
Hi, can I download the example database and fool around with it?
Thanks in advance,
JD

Reply
1. - Jake Howlett
  - Tue 9 Mar 2010 06:55 AM
  See here:
  http://www.codestore.net/store.nsf/unid/BLOG-20100210-0329/
  
  Reply