photo preview before uploading

Sep 17, 2008 at 5:27 AM
hi flajaxian,

thanks for this exellent control!..:)
sir i have below a snippet of my html page..
i just wana know if theres a way that i can set an image preview based on users browse of a single image file before they will upload it.
one of may aim also is to set the MaxNumberFile to only one (1).
how can i achieve this?..
thank you in advance..
<tr>
                                            <td>
                                                <asp:Image id="imageContainer" runat="server"  ImageAlign="Middle"         
                                                           Height="130px"
                                                           Width="130px" />
                                            </td>                                           
                                        </tr>                                       
                                        <tr>
                                            <td>  
                                                <fjx:FileUploader ID="FileUploader1" runat="server" FileListRowWidth="120"
                                                        AllowedFileTypes="[Image file][*.jpg;*.jpeg;*.gif;*.png]"
                                                        AllowSameFileTwice="false" MaxNumberFiles="1"  OnFileReceived="FileReceived">                                                
                                                    <HtmlTemplate>                                                         
                                                      <div id="[:FileListBox_ClientID:]" >                                                     
                                                      </div>
                                                      <a id="[:BrowseButton_ClientID:]" href="javascript:void(0)"><input type="button" value="[:WordBrowse:]..." /></a>
                                                      <div style="height:20px;width:80px;" visible="false">
                                                        [:FlashTags:]
                                                      </div>

                                                    </HtmlTemplate>
                                                </fjx:FileUploader>

                                    
                                            </td>                                           
                                        </tr>

Coordinator
Sep 17, 2008 at 6:24 AM
Silverlight allows access to the byte array of the file once it has been chosen but Flash does not (at least not up to version 10) so you can't have preview unless you upload the files.

You can set the max numver of files to what you want.
Sep 17, 2008 at 9:31 AM
thank for the reply sir,

Flajaxian control is supported in IE 6-update version ryt?.

im planning to put the uploading function(actual saving of the file) upon the user is done in selecting the image file,
no need to click the "upload" button so that..as you said that we can have a preview of the image only if it is already uploaded
on the server..may be on the "FileReceived" event..

btw, can i override this part?..
<div id="[:FileListBox_ClientID:]" >                                                     
                                                      </div>
coz..by default it is hidden ryt?..

i'll just update this discussion for any results that i may have..:)
thanks again for the reply..

keep on posting!!..
Coordinator
Sep 17, 2008 at 1:01 PM
To start the upload right away you could do that:

      <script>
        function startFileUpload(){
          document.getElementById("FileUploader1_UploadButton").click();
        }
      </script>
      <fjx:FileUploader ID="FileUploader1" runat="server" >
          <Adapters>
             <fjx:FileSaverAdapter Runat="server" FolderName="UploadFolder" />
          </Adapters>
          <FileListInitTraverseJsFunction><![CDATA[
            function(box, files, currPerc){
                Flajaxian.FileUploaderUIAdapter.fileListInitTraverseFunc(box, files, currPerc);
               
                window.setTimeout(startFileUpload, 500);
            }
          ]]></FileListInitTraverseJsFunction>
      </fjx:FileUploader>
Sep 17, 2008 at 4:34 PM
i tried your sample code but this javascript returns null:

document.getElementById("FileUploader1_UploadButton").click();

i think it can not find the "FileUploader1_UploadButton" control.

Coordinator
Sep 17, 2008 at 5:12 PM
document.getElementById("<%=YourFileUploader.ClientID%>_UploadButton").click();
Sep 18, 2008 at 2:54 AM
hi..
the script below works fine, but it needs the upload button to be seen?..i tried to make the upload button as visible="false" but
it didnt work..thanks for the help..
document.getElementById("<%=YourFileUploader.ClientID%>_UploadButton").click();

Sep 18, 2008 at 5:05 AM
sir,
i just wana know how you implement the AllowedFileTypes function..wherein you
actually modified the fileDialog file filter based on what the user set fileTypes..
do you have sample javascript for this?..
thanks..we really appreciate your help.
Coordinator
Sep 25, 2008 at 11:04 PM
Sorry I am not sure I understand your question. Look at the latest docs in the release tab for information how to use AllowedFileTypes