views:

114

answers:

1

I use Uploadify to upload multiple pictures to server.

I want to display pictures thumbnails before the pictures are actually uploaded to the server, based on this. I use Firefox 3.6.6.

Here is how I thought to do this:

$('#fileInput').uploadify({
    ...
    onSelect: function(event, queueID, fileObj) {
        var img = document.createElement("img");  
        img.classList.add("obj");  
        img.file = file;  
        document.getElementById("ThumbnailsArea").appendChild(img);  
        var reader = new FileReader();  
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);  
        reader.readAsDataURL(fileObj); // This crashes Firefox  
        return true;
    }
    ...
});

The reason for crash, I believe, is that fileObj is not really a file like here.

Does anyone know how to get the real file when using Uploadify ?

I really need any advice, because I'm totally stuck with this !

Thank you very much, good people.

A: 

Your question was very interesting so I played around with the code you provided but I am afraid that what are you trying to do is not possible.

First thing that I discovered is that you are correct about fileObj differing from file that comes from input file component on onchange event and that is the most probable reason for the crash. While I was playing with your code I tried to emulate file properties with simple javascript object but that doesn't work either (FF crashes in the same way).

Second, uploadify uses flash (action script) to actually upload files. You can notice the similarity in events between uploadify's events and those of Filereference class. So this file input you have at the beginning is not used at all during the file upload process (it seems to me that it is used just to determine where to put flash object used for uploading). This can be verified by checking files property in input file object for example on uploadify's onselect event, or onopen event (in both cases files is a 0 size array).

I hope that this helps!

draganstankovic
Thank you very much for your time and wish to help ! Unfortunately, I realized also that what I want is not impossible due to Uploadify design. So I have to compromise with displaying picture thumbnails after the upload :(
Misha Moroshko