logo

Flex App Basics 6: Multiple File Uploads

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!

image

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

    • avatar
    • 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!

      • avatar
      • 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)

  1. 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.

    • avatar
    • 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?

      • avatar
      • 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

      • avatar
      • 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.

      Show the rest of this thread

  2. You are the man Jake!

    • avatar
    • 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).

  3. 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.

      • avatar
      • 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.

      Hide the rest of this thread

      1. 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

          • avatar
          • 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

          1. 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

      2. 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.

          • avatar
          • 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?

          1. I posted a possible solution on my blog - http://www.markbarton.com/?p=163

            Its long winded but hopefully should work.

    • avatar
    • 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

  4. 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? :)

      • avatar
      • 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...

    • avatar
    • 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

    • avatar
    • JD
    • Tue 9 Mar 2010 04:59 AM

    Hi, can I download the example database and fool around with it?

    Thanks in advance,

    JD

      • avatar
      • Jake Howlett
      • Tue 9 Mar 2010 06:55 AM

      See here:

      http://www.codestore.net/store.nsf/unid/BLOG-20100210-0329/

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 25 Jan 2010

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content