Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

V8.0.51 setting 100% height doesn't seem to work anymore?

Options
Go to last post Go to first unread
Previous Topic Next Topic
mmount  
#1 Posted : Tuesday, October 15, 2013 6:04:30 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Hi,

I have just updated my ASP.NET code to use version 8.0.51 and notice that my set height of 100% in the Java Uploader appears to be ignored (the uploader used to adjust height with the window but isn't anymore). My uploader is located inside a div that is being resized using javascript:

Code:
var clientElem = null;
var clientOffset = 0;

function getWindowHeight(defHeight) {
  return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : defHeight;
}

function getElementTop(elem) {
  if (elem != null) return elem.offsetParent ? (elem.offsetTop + getElementTop(elem.offsetParent)) : elem.offsetTop;
  else return 0;
}

function sizeElementToWindow(elem) {
  if (elem != null) {
    var height = getWindowHeight(0) - getElementTop(elem);
    height = (height < clientOffset) ? 0 : height - clientOffset;
    elem.style.width = '100%';
    elem.style.height = height.toString() + 'px';
  }
}

function updateClientElem() {
  sizeElementToWindow(clientElem);
}

function setClientElem(elem, offset) {
  clientElem = elem;
  if (offset != null) clientOffset = offset;
  else clientOffset = 0;
  updateClientElem();
  window.onresize = updateClientElem;
  window.onload = updateClientElem;
}

Is this a known problem or have I done something horribly wrong?

EDIT: I have now tested in IE, Chrome, and Firefox. I even tried setting the height manually in javascript with both au$.uploader('Uploader1').height('100%'); and au$.uploader('Uploader1').height('400px'); and neither seemed to work. In firefox I do not see the uploader at all though I can load images via my added menu.

I have switched back to 8.0.33 and everything works as expected. Awaiting your response.

Thanks,

Mike

Edited by user Tuesday, October 15, 2013 9:55:22 AM(UTC)  | Reason: Not specified
Back to top
Andrew  
#2 Posted : Wednesday, October 16, 2013 6:33:26 AM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
Are you sure height="100%" worked earlier? As far as I know, people experience similar issue with other Java applets (at least there is a number of posts on Stackoverflow and other resources related to this).

Try to set height through JavaScript. Specifying the height in pixels should work. At least, if I go to our online demo:

http://demo.aurigma.com/...a/BasicDemo/Default.aspx

open JavaScript console and execute the following:

>> $au.uploader('ctl00_content_Uploader1').height('400px')

it changes the height as expected.

Back to top
mmount  
#3 Posted : Wednesday, October 16, 2013 7:21:47 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Yes. 100% was working fine. As I noted when I switched back to v8.0.33 everything works perfectly.

NOTES:

* Executing the command in the javascript console works fine if px are specified.

* If I set Uploader.Height to 400px in the .aspx file then it renders initially at 400px high.

* If I modifiy my sizeElementToWindow function to add $au.uploader('Uploader1').height(height.toString()+'px'); to the end then the uploader will resize appropriately when the browser window is resized. It does NOT size properly when the window is first displayed. Setting a javascript setTimeout to call the sizing on inital page load also does not work.

So, the problem here is that in v8.0.33 I had set the uploader in code to 100% height, and by resizing the div it was is it also resized. In v8.0.51 this no longer happens.

Mike

Edited by user Wednesday, October 16, 2013 7:27:10 AM(UTC)  | Reason: Not specified
Back to top
Andrew  
#4 Posted : Wednesday, October 16, 2013 7:29:31 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
Well, I believe it could happen because now we are using another tag to insert the applet.

Anyway, I have read Stackoverflow and played with it a little bit. I managed to create a simple HTML page which resizes the applet as expected:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Java/ActiveX Uploader Dynamic Resize Test Page</title>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="/Scripts/aurigma-aj/aurigma.uploader.js"></script>
    <script type="text/javascript" src="/Scripts/aurigma-aj/aurigma.uploader.installationprogress.js"></script>
</head>
<body>
    <div style="width: 100%; height: 95%">
        <script type="text/javascript">
            var u = $au.uploader({
                id: 'u1',
                width: "100%",
                height: "100%",
                activeXControl: {
                    codeBase: '/Scripts/aurigma-aj/Uploader8.cab',
                    codeBase64: '/Scripts/aurigma-aj/Uploader8_x64.cab'
                },
                javaControl: {
                    codeBase: '/Scripts/aurigma-aj/Uploader8.jar'
                }
            });
            u.writeHtml();
        </script>
    </div>
</body>
</html>

Does it work for you?

Hope this helps.
Back to top
mmount  
#5 Posted : Thursday, October 17, 2013 5:47:34 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Sorry, not really. I'm not smart enough to figure out why what you've done (set Height = 100% in Javascript) is different from what I've done (set Height = 100% in ASP.NET). And I have no idea how to take a huge amout of customization in ASP.NET and convert it to javascript to get around what is obviously an error that you have introduced in your uploader code.

Anyway, I'm hoping you will actually fix the problem in the code eventually but in the meantime I found that if I set the uploader height to a pixel value in the InitComplete event it will resize on the page load. There is a delay that allows the "drop files here" label to suddenly spring to the center of the screen when the InitComplete fires but at leat it sort of is working.

Mike
Back to top
Andrew  
#6 Posted : Thursday, October 17, 2013 6:11:39 AM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
Mike,

If you are using ASP.NET control instead of JavaScript API, you can just replace:

Code:
        <script type="text/javascript">
            var u = $au.uploader({
                id: 'u1',
                width: "100%",
                height: "100%",
                activeXControl: {
                    codeBase: '/Scripts/aurigma-aj/Uploader8.cab',
                    codeBase64: '/Scripts/aurigma-aj/Uploader8_x64.cab'
                },
                javaControl: {
                    codeBase: '/Scripts/aurigma-aj/Uploader8.jar'
                }
            });
            u.writeHtml();
        </script>

by

Code:
<form id="form1" runat="server">
 <aur:Uploader ID="u1" runat="server" Height="100%" Width="100%" >
 </aur:Uploader>
</form>

The ASP.NET control generates the JavaScript code like the one I posted above, so it should work as well.

I am not a big guru in JavaScript, but if I correctly understood the materials I read, you should specify the width for the all parent elements (including body and html) to get height="100%" working. In the case of the ASP.NET control, you may need to set height for the form element as well. I cannot check it right now as I am out of office, but I will try to do it at the earliest convenience.

Back to top
mmount  
#7 Posted : Thursday, October 17, 2013 6:28:42 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
This is essentially what I have (unless I'm missing something) and it doesn't work - it did/does in the 8.0.33 but not in 8.0.51.

I have attached a screen shot of the upload form. As you can see the uploader fills the area below the header and menu bar.

If it helps here is the ASPX code for my upload page. It has components from Developer express and some custom controls but perhaps you can get the gist of what I am doing.

Code:
<%@ Page Language="C#" Title="NFROnline: Upload Photos" MasterPageFile="~/forms/forms.master" AutoEventWireup="true" CodeBehind="photos_upload.aspx.cs" Inherits="nfrOnline.forms.photos_upload" %>

<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader.AmazonS3" TagPrefix="cc1" %>
<%@ Register Src="~/content/RequestSummary.ascx" TagPrefix="uc1" TagName="RequestSummary" %>

<%@ MasterType VirtualPath="~/forms/forms.master" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="childHead">
  <script type="text/javascript">
    var status = '<%= status %>';
    var fileKeys = [];
    var files;
    var fileIndex;
    var converterIndex;
    var uploading = false;
    var startTime;
    var autoClose = false;

    function DoGetUploadCount() {
      var uploaded = files.length;
      for (var i = files.length - 1; i >= 0; i--) {
        if (!files[i].uploaded) uploaded--; else break;
      }
      return uploaded;
    }

    function DoUpdateLabel(l, s) {
      if (l.GetText() != s) l.SetText(s);
    }

    function DoUploadCallback(thisStatus) {
      try {
        var s = '';
        for (var i = 0, imax = files.length; i < imax; i++) {
          if (files[i].uploaded) {
            s = s + ';' +
              replaceDelimiter(files[i].origName, ';') + ';' +
              replaceDelimiter(files[i].fileName, ';') + ';' +
              replaceDelimiter(files[i].descr, ';');
          }
          else break;
        }
        if (s != '') callbackMain.PerformCallback(thisStatus + s);
      }
      catch (e) {
        alert('Error in DoUploadCallback: ' + e.message);
      }
      finally {
        popupProgress.Hide();
        uploading = false;
        mnuPhotos.SetEnabled(true);
        DoUploadFileCountChange();
      }
    }

    function DoUploadCallbackComplete(s, e) {
      if (e.result != '0' && autoClose) window.close(); 
    }

    function DoBeforeUpload() {
      try {
        files = [];
        var ff = this.files();
        // Loop through files and generate unique names for each file
        for (var i = 0, imax = ff.count() ; i < imax; i++) {
          var thisFile = ff.get(i);
          var origName = thisFile.name();
          var guid = thisFile.guid().slice(1, -1);
          var fileName = '<%= Master.ReqInfo.TableID %>/' + guid + '.jpg';
          var descr = thisFile.description();
          files.push({
            origName: origName,
            fileName: fileName,
            descr: descr,
            uploaded: false
          });
          thisFile.description('');
        }
        startTime = new Date();
        autoClose = true;
        uploading = true;
        mnuPhotos.SetEnabled(false);
        popupProgress.Show();
      }
      catch (e) {
        alert('Error in DoBeforeUpload: ' + e.message);
      }
    }

    function DoBeforePackageUpload(packageIndex) {
      fileIndex = packageIndex;
      converterIndex = 0;
    }

    function DoAfterPackageUpload(packageIndex, response) {
      try {
        if (packageIndex >= 0 && packageIndex < files.length) files[packageIndex].uploaded = true;
      }
      catch (e) {
        alert('Error in DoAfterPackageUpload: ' + e.message);
      }
      finally {
        DoUploadFileCountChange();
      }
    }

    function DoBeforeSendRequest() {
      try {
        var fileName = files[fileIndex].fileName;
        var key = fileKeys[converterIndex];
        var newKey = key.replace(/\$\{filename\}/, fileName);
        as3.converters().get(converterIndex).key(newKey);
        ++converterIndex;
      }
      catch (e) {
        alert('Error in DoBeforeSendRequest: ' + e.message);
      }
    }

    function DoProgress(percent, uploadedFiles, totalFiles, uploadedBytes, totalBytes) {
      try {
        var remainingFiles = totalFiles - uploadedFiles;
        var bytesPercent = 0;
        if (uploadedBytes > 0 && totalBytes > 0) bytesPercent = ~~((uploadedBytes / totalBytes) * 100);
        if (uploadedFiles < files.length) DoUpdateLabel(lblProgressFilename, files[uploadedFiles].origName);
        DoUpdateLabel(lblProgressUploaded, bytesToSize(uploadedBytes, 2));
        DoUpdateLabel(lblProgressUploadedMax, bytesToSize(totalBytes, 2));
        progress.SetPosition(bytesPercent);
        if (uploadedFiles == 0 && uploadedBytes == 0) DoUpdateLabel(lblOverallProgress, 'Preparing images for upload...');
        else DoUpdateLabel(lblOverallProgress, 'Uploading ' + (uploadedFiles + 1).toString() + ' of ' + totalFiles.toString() + ' (' + remainingFiles.toString() + ' remaining)');
        DoUpdateLabel(lblElapsed, calculateElapsed(startTime));
        progressOverall.SetPosition(percent); 
      }
      catch (e) {
        alert('Error in DoProgress: ' + e.message);
      }
    }

    function DoLogError(errorCode, httpResponseCode, errorPage, additionalInfo) {
      var s =
        'L;' +
        errorCode.toString() + ';' +
        (httpResponseCode != null ? httpResponseCode.toString() : '(none)') + ';' +
        replaceDelimiter(errorPage != null ? errorPage : '(unknown)', ';') + ';' +
        replaceDelimiter(additionalInfo.trim(), ';');
      callbackMain.PerformCallback(s);
    }

    function DoError(errorCode, httpResponseCode, errorPage, additionalInfo) {
      autoClose = false;
      DoUploadFileCountChange();
      switch (errorCode) {
        case 9: // User
        case 12: // Script
        case 18: DoUploadCallback('D'); break; // AfterPackageUpload Event
        default:
          var uploaded = DoGetUploadCount();
          var addlInfo = additionalInfo != null ? additionalInfo : '';
          if (uploaded != files.length) addlInfo += '\r\n\r\n(' + uploaded.toString() + ' of ' + files.length.toString() + ' images uploaded)';
          else addlInfo += '\r\n\r\n(All ' + uploaded.toString() + ' images uploaded)';
          DoLogError(errorCode, httpResponseCode, errorPage, addlInfo);
          DoUploadCallback(status);
          DoPopupMessage('An error (' + errorCode.toString() + ') occurred', addlInfo.trim());
          break;
      }
    }

    function DoAfterUpload() {
      DoUploadCallback(status);
    }

    function DoUploadFileCountChange() {
      try {
        var fileCount = $au.uploader('Uploader1').files().count();
        var s = '';
        if (fileCount > 1) s = ' (' + fileCount.toString() + ' images)';
        else if (fileCount == 1) s = ' (1 image)';
        m = mnuPhotos.GetItemByName('Remove');
        if (m != null) m.SetEnabled(fileCount > 0 && !uploading);
        m = mnuPhotos.GetItemByName('Upload');
        if (m != null) {
          m.SetText('Upload to NFR' + s);
          m.SetEnabled(fileCount > 0 && !uploading);
        }
        if (!uploading) DoSelectionChange();
      }
      catch (e) {
        alert('Error in DoUploadFileCountChange: ' + e.message);
      }
    }

    function DoSelectionChange() {
      try {
        var fileCount = $au.uploader('Uploader1').files().count();
        var selectedCount = 0;
        for (var i = 0; i < fileCount; i++)
          if ($au.uploader('Uploader1').files().get(i).selected()) selectedCount++;
        var m = mnuPhotos.GetItemByName('RemoveSelected');
        if (m != null) m.SetEnabled(selectedCount > 0);
      }
      catch (e) {
        alert('Error in DoSelectionChange: ' + e.message);
      }
    }

    function DoMenuItemClick(item) {
      switch (item.name) {
        case 'Add': $au.uploader('Uploader1').uploadPane().addFiles(); break;
        case 'Folder': $au.uploader('Uploader1').uploadPane().addFolders(); break;
        case 'RemoveSelected': $au.uploader('Uploader1').uploadPane().removeSelectedFiles(); break;
        case 'Remove': $au.uploader('Uploader1').uploadPane().removeAllFiles(); break;
        case 'Upload': $au.uploader('Uploader1').upload(); break;
        case 'Version':
          if ($au.uploader('Uploader1').type() == 'java') DoPopupMessage('Java Uploader', 'You are currently running Version ' + $au.uploader('Uploader1').javaControl().actualVersion());
          else if ($au.uploader('Uploader1').type() == 'activex') DoPopupMessage('ActiveX Uploader', 'You are currently running Version ' + $au.uploader('Uploader1').activeXControl().actualVersion());
          else DoPopupMessage('ERROR', 'Unable to detect uploader version (' + $au.uploader('Uploader1').type() + ')');
          break;
        case 'SortMenu': break;
        case 'ViewMenu': break;
        default:
          if (item.name.substring(0, 4) == 'Sort') $au.uploader('Uploader1').uploadPane().sortMode(item.GetText());
          else if (item.name.substring(0, 4) == 'View') $au.uploader('Uploader1').uploadPane().viewMode(item.GetText());
      }
    }

    function DoMenuPopup(item) {
      var s = '';
      if (item.name == 'SortMenu') s = 'Sort' + $au.uploader('Uploader1').uploadPane().sortMode();
      else if (item.name == 'ViewMenu') s = 'View' + $au.uploader('Uploader1').uploadPane().viewMode();
      if (s != '') {
        var m = mnuPhotos.GetItemByName(s);
        if (m != null) m.SetChecked(true);
        else for (var i = 0; i < item.GetItemCount() ; i++) item.GetItem(i).SetChecked(false);
      }
    }

    function DoPopupMessage(title, text) {
      popupMessage.SetHeaderText(title);
      lblMessageText.SetText(text);
      popupMessage.Show();
    }

    function DoCancelUpload() {
      $au.uploader('Uploader1').cancelUpload();
    }

    function updateClient() {
      var height = getWindowHeight(0) - getElementTop(clientElem);
      height = (height < 200) ? 200 : height;
      clientElem.style.height = height+'px';
      $au.uploader('Uploader1').height(height+'px');
    }

    function setClient() {
      clientElem = document.getElementById('uploaderDiv');
      window.onresize = updateClient;
      window.onload = updateClient;
      updateClient();
    }
  </script>

</asp:Content>

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="childBody">

  <uc1:RequestSummary runat="server" ID="RequestSummary" />    
 
  <div id="mnuPhotosDiv">

  <dx:ASPxMenu ID="mnuPhotos" runat="server" Width="100%" ItemAutoWidth="False" ClientInstanceName="mnuPhotos" RenderIFrameForPopupElements="True" ShowSubMenuShadow="False">
    <ClientSideEvents ItemClick="function(s, e) { DoMenuItemClick(e.item); }" PopUp="function(s, e) { DoMenuPopup(e.item); }" />
    <Items>
      <dx:MenuItem Name="Add" Text="Add Photos..." ToolTip="Add photos to upload">
        <Image Url="~/content/images/tb/e/add.png" UrlDisabled="~/content/images/tb/d/add.png" UrlHottracked="~/content/images/tb/h/add.png">
        </Image>
      </dx:MenuItem>
      <dx:MenuItem Name="Folder" Text="Add Folder..." ToolTip="Add all photos from a folder">
        <Image Url="~/content/images/tb/e/upload-folder.png" UrlDisabled="~/content/images/tb/d/upload-folder.png" UrlHottracked="~/content/images/tb/h/upload-folder.png">
        </Image>
      </dx:MenuItem>
      <dx:MenuItem Name="Remove" Text="Remove All" ToolTip="Remove all the photos" ClientEnabled="False">
        <Image Url="~/content/images/tb/e/cancel.png" UrlDisabled="~/content/images/tb/d/cancel.png" UrlHottracked="~/content/images/tb/h/cancel.png">
        </Image>
      </dx:MenuItem>
      <dx:MenuItem Name="RemoveSelected" Text="Remove Selected" ToolTip="Remove the selected photos" ClientEnabled="False">
        <Image Url="~/content/images/tb/e/delete.png" UrlDisabled="~/content/images/tb/d/delete.png" UrlHottracked="~/content/images/tb/h/delete.png">
        </Image>
      </dx:MenuItem>
      <dx:MenuItem Name="SortMenu" Text="Sort">
        <Items>
          <dx:MenuItem GroupName="sort" Name="SortName" Text="Name" ToolTip="Sort by the photo name" Checked="True">
          </dx:MenuItem>
          <dx:MenuItem GroupName="sort" Name="SortSize" Text="Size" ToolTip="Sort by the photo size">
          </dx:MenuItem>
          <dx:MenuItem GroupName="sort" Name="SortType" Text="Type" ToolTip="Sort by the photo type">
          </dx:MenuItem>
          <dx:MenuItem GroupName="sort" Name="SortModified" Text="Modified" ToolTip="Sort by the photo modified time">
          </dx:MenuItem>
          <dx:MenuItem GroupName="sort" Name="SortPath" Text="Path" ToolTip="Sort by the photo path">
          </dx:MenuItem>
          <dx:MenuItem GroupName="sort" Name="SortDimensions" Text="Dimensions" ToolTip="Sort the photos by their dimensions">
          </dx:MenuItem>
        </Items>
      </dx:MenuItem>
      <dx:MenuItem Name="ViewMenu" Text="View">
        <Items>
          <dx:MenuItem GroupName="view" Name="ViewThumbnails" Text="Thumbnails" ToolTip="View as thumbnails" Checked="True">
          </dx:MenuItem>
          <dx:MenuItem GroupName="view" Name="ViewTiles" Text="Tiles" ToolTip="View as thumbnail with details">
          </dx:MenuItem>
          <dx:MenuItem GroupName="view" Name="ViewDetails" Text="Details" ToolTip="View as detailed list">
          </dx:MenuItem>
          <dx:MenuItem GroupName="view" Name="ViewList" Text="List" ToolTip="View as small thumbnails with filename">
          </dx:MenuItem>
          <dx:MenuItem BeginGroup="True" Name="Version" Text="Version...">
          </dx:MenuItem>
        </Items>
      </dx:MenuItem>
      <dx:MenuItem Name="Upload" Text="Upload to NFR" ClientEnabled="False" ToolTip="Upload photos to NFR">
        <Image Url="~/content/images/tb/e/upload-photo.png" UrlDisabled="~/content/images/tb/d/upload-photo.png" UrlHottracked="~/content/images/tb/h/upload-photo.png">
        </Image>
      </dx:MenuItem>
    </Items>
    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
    <BorderLeft BorderStyle="None" />
    <BorderRight BorderStyle="None" />
  </dx:ASPxMenu>

  </div>

  <div id="uploaderDiv" style="overflow-y: hidden ! important; z-index: -999">
    <cc1:uploader ID="Uploader1" runat="server" Height="100%" Width="100%" LicenseKey="<%$ appSettings: aurigma.LicenseKey %>" BorderStyle="None" EnableFileViewer="True" PaneLayout="OnePane" EnableStatusPane="False" EnableAutoRotation="True" TextColor="Gray" EnableUploadProgress="False" ClientIDMode="Static" Type="java">
      <ActiveXControl ClassId="" ProgId=""></ActiveXControl>

      <ContextMenu AddFilesText="Add photos..." ArrangeByModifiedText="Modified" />

      <Converters>
        <cc1:Converter ThumbnailHeight="1500" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="1500" Mode="*.*=Thumbnail" ThumbnailCopyIptc="True" ThumbnailCopyExif="True" ThumbnailJpegQuality="80" />
        <cc1:Converter ThumbnailHeight="600" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="600" Mode="*.*=Thumbnail" ThumbnailCopyIptc="False" ThumbnailJpegQuality="80" />
        <cc1:Converter ThumbnailHeight="175" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="175" Mode="*.*=Thumbnail" ThumbnailCopyIptc="False" ThumbnailJpegQuality="80" />
      </Converters>
      <AddFilesProgressDialog CurrentFileText="Processing photo: '[name]'" TitleText="Adding photos to upload queue" TotalFilesText="Total processed: [count]" WaitText="Please wait while your photos are added to the upload queue..." />
      <ClientEvents>
        <cc1:ClientEvent EventName="InitComplete" HandlerName="setClient" />
        <cc1:ClientEvent EventName="BeforeUpload" HandlerName="DoBeforeUpload" />
        <cc1:ClientEvent EventName="BeforeSendRequest" HandlerName="DoBeforeSendRequest" />
        <cc1:ClientEvent EventName="BeforePackageUpload" HandlerName="DoBeforePackageUpload" />
        <cc1:ClientEvent EventName="AfterPackageUpload" HandlerName="DoAfterPackageUpload" />
        <cc1:ClientEvent EventName="AfterUpload" HandlerName="DoAfterUpload" />
        <cc1:ClientEvent EventName="Error" HandlerName="DoError" />
        <cc1:ClientEvent EventName="UploadFileCountChange" HandlerName="DoUploadFileCountChange" />
        <cc1:ClientEvent EventName="SelectionChange" HandlerName="DoSelectionChange" />
        <cc1:ClientEvent EventName="Progress" HandlerName="DoProgress" />
      </ClientEvents>

      <HeaderColor Color1="242, 246, 251" Color2="196, 222, 251"></HeaderColor>

      <Messages FileNameNotAllowed="The file '[name]' cannot be selected. This file has already been uploaded." />

      <ImageEditor CropMinSize="200">
      </ImageEditor>

      <JavaControl Cached="False" />

      <PaneItem ShowFileNameInThumbnailsView="True" CheckedItemBorderColor="White" EnableFileNameTooltip="True" InactiveCheckedItemBorderColor="White">
        <CheckedHoverColor Color1="204, 232, 255" Color2="189, 224, 255"></CheckedHoverColor>

        <CheckedItemColor Color1="White" Color2="White"></CheckedItemColor>

        <CheckedSelectionColor Color1="204, 232, 255" Color2="189, 224, 255"></CheckedSelectionColor>

        <CheckedSelectionHoverColor Color1="204, 232, 255" Color2="189, 224, 255"></CheckedSelectionHoverColor>

        <HoverColor Color1="237, 247, 255" Color2="237, 247, 255"></HoverColor>

        <InactiveCheckedHoverColor Color1="204, 232, 255" Color2="189, 224, 255"></InactiveCheckedHoverColor>

        <InactiveCheckedItemColor Color1="White" Color2="White"></InactiveCheckedItemColor>

        <InactiveCheckedSelectionColor Color1="204, 232, 255" Color2="189, 224, 255"></InactiveCheckedSelectionColor>

        <InactiveCheckedSelectionHoverColor Color1="204, 232, 255" Color2="189, 224, 255"></InactiveCheckedSelectionHoverColor>

        <InactiveSelectionColor Color1="229, 243, 255" Color2="216, 237, 255"></InactiveSelectionColor>

        <SelectionColor Color1="229, 243, 255" Color2="216, 237, 255"></SelectionColor>

        <SelectionHoverColor Color1="204, 232, 255" Color2="189, 224, 255"></SelectionHoverColor>

        <UploadIndicatorColor Color1="White" Color2="225, 255, 230"></UploadIndicatorColor>
      </PaneItem>

      <Restrictions FileMask="*.jpg;*.jpeg;*.jpe" MinImageHeight="200" MinImageWidth="200" MaxFileCount="999" />

      <StatusPane>
        <Color Color1="247, 247, 247" Color2="239, 239, 239"></Color>
      </StatusPane>
      <UploadPane SortMode="Name" DropFilesHereMacText="" DropFilesHereText="(select Add Photos or Add Folder above or drop photos here)">
      </UploadPane>
      <UploadProgressDialog InfoText="Photos uploaded: [files]/[totalFiles] ([bytes] of [totalBytes])" PreparingText="Preparing photos for upload..." TitleText="Uploading photos to NFR" />
      <UploadSettings AutoRecoveryMaxAttemptCount="10" AutoRecoveryTimeout="1000" FilesPerPackage="1" />
    </cc1:uploader>
    <cc1:amazons3extender runat="server" ID="AmazonS3Extender1" TargetControlID="Uploader1"
      AWSAccessKeyId="<%$ appSettings: s3.AccessKeyId %>"
      Bucket="<%$ appSettings: s3.Bucket %>"
      SecretAccessKey="<%$ appSettings: s3.SecretAccessKey %>"
      PolicyExpiration="6000" CheckIntegrity="True">
      <cc1:FileSettings Acl="public-read" Key="large/${filename}" ContentType="image/jpeg">
      </cc1:FileSettings>
      <cc1:FileSettings Acl="public-read" Key="medium/${filename}" ContentType="image/jpeg">
      </cc1:FileSettings>
      <cc1:FileSettings Acl="public-read" Key="small/${filename}" ContentType="image/jpeg">
      </cc1:FileSettings>
    </cc1:amazons3extender>
    <dx:ASPxCallback ID="callbackMain" runat="server" ClientInstanceName="callbackMain" OnCallback="callbackMain_Callback">
      <ClientSideEvents CallbackComplete="DoUploadCallbackComplete" />
    </dx:ASPxCallback>
  </div>

  <dx:ASPxPopupControl ID="popupProgress" runat="server" ClientInstanceName="popupProgress" CloseAction="None" FooterText="Do not close this window while your photos are uploading" HeaderText="Uploading Photos to NFR" Height="370px" Modal="True" PopupAnimationType="Fade" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" ShowCloseButton="False" ShowFooter="True" ShowPageScrollbarWhenModal="True" Width="483px" RenderIFrameForPopupElements="False">
    <FooterImage Url="~/content/images/tb/e/stop.png">
    </FooterImage>
    <HeaderImage Url="~/content/images/tb/e/upload-photo.png">
    </HeaderImage>
    <ClientSideEvents CloseUp="function(s, e) {
	showElement('uploaderDiv');
    cancelPanel.Hide();
}"
      Shown="function(s, e) {
	hideElement('uploaderDiv');
}" />
    <FooterStyle VerticalAlign="Middle" />
    <HeaderStyle VerticalAlign="Middle" />
    <ContentCollection>
      <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" SupportsDisabledAttribute="True">
        <div>
          <table style="width: 100%">
            <tr>
              <td colspan="2" style="font-size: 14px; font-weight: bold; color: #163c47; margin-bottom: 8px; border-bottom: 1px solid #163c47; padding: 2px 0px 2px 2px; height: 24px;">Photo Progress
              </td>
            </tr>
            <tr>
              <td class="formLabelToText" style="width: 75px">Filename:
              </td>
              <td>
                <dx:ASPxLabel ID="lblProgressFilename" runat="server" Text="" ClientInstanceName="lblProgressFilename">
                </dx:ASPxLabel>
              </td>
            </tr>
            <tr>
              <td class="formLabelToText" style="width: 75px">Uploaded:
              </td>
              <td>
                <dx:ASPxLabel ID="lblProgressUploaded" runat="server" Text="0" ClientInstanceName="lblProgressUploaded">
                </dx:ASPxLabel>
                &nbsp;of&nbsp;<dx:ASPxLabel ID="lblProgressUploadedMax" runat="server" Text="0" ClientInstanceName="lblProgressUploadedMax">
                </dx:ASPxLabel>
              </td>
            </tr>
          </table>
        </div>
        <div style="padding: 8px 0px 16px 0px">
          <dx:ASPxProgressBar ID="progress" runat="server" Height="21px" Width="100%" ClientInstanceName="progress">
          </dx:ASPxProgressBar>
        </div>
        <div>
          <table style="width: 100%">
            <tr>
              <td class="formTitle">
                Overall Progress
              </td>
            </tr>
            <tr>
              <td>
                <dx:ASPxLabel ID="lblOverallProgress" runat="server" Text="Preparing images for upload..." ClientInstanceName="lblOverallProgress" Font-Bold="True">
                </dx:ASPxLabel>
              </td>
            </tr>
          </table>
        </div>
        <div style="padding: 8px 0px 16px 0px">
          <dx:ASPxProgressBar ID="progressOverall" runat="server" Height="21px" Width="100%" ClientInstanceName="progressOverall">
          </dx:ASPxProgressBar>
          <table style="width: 100%; font-size: 10px">
            <tr>
              <td class="formLabelToText" style="width: 75px">Elapsed:
              </td>
              <td>
                <dx:ASPxLabel ID="lblElapsed" runat="server" Text="" ClientInstanceName="lblElapsed" Font-Size="10px">
                </dx:ASPxLabel>
              </td>
            </tr>
          </table>
        </div>
        <div>
          <dx:ASPxButton ID="btnCancel" runat="server" Text="Cancel" CssClass="center" AutoPostBack="False" CausesValidation="False">
            <ClientSideEvents Click="function(s, e) { cancelPanel.Show(); DoCancelUpload(); }" />
          </dx:ASPxButton>
          <dx:ASPxLoadingPanel ID="cancelPanel" runat="server" ClientInstanceName="cancelPanel" Text="Please wait while your upload is cancelled&amp;hellip;" ImagePosition="Top">
          </dx:ASPxLoadingPanel>
        </div>
      </dx:PopupControlContentControl>
    </ContentCollection>
  </dx:ASPxPopupControl>

  <dx:ASPxPopupControl ID="popupMessage" runat="server" ClientInstanceName="popupMessage" CloseAction="CloseButton" HeaderText="Uploader Message" LoadingPanelImagePosition="Top" Modal="True" PopupAnimationType="Fade" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" Width="300px">
    <ClientSideEvents CloseUp="function(s, e) {	showElement('uploaderDiv'); cancelPanel.Hide(); }" Shown="function(s, e) { hideElement('uploaderDiv'); }" />
    <ContentStyle>
      <Paddings Padding="8px" />
    </ContentStyle>
    <ContentCollection>
      <dx:PopupControlContentControl runat="server" SupportsDisabledAttribute="True">
        <div class="messageText">
          <dx:ASPxLabel ID="lblMessageText" runat="server" Text="" ClientInstanceName="lblMessageText"></dx:ASPxLabel>
        </div>
      </dx:PopupControlContentControl>
    </ContentCollection>
  </dx:ASPxPopupControl>

  <script type="text/javascript">
    // Save keys in temporary array
    var uploader = $au.uploader('Uploader1');
    for (var i = 0, imax = uploader.converters().count(); i < imax; i++) {
      fileKeys.push(as3.converters().get(i).key());
    }
    if (browserIsFirefox() || browserIsSafari()) {
      mnuPhotos.GetItemByName('SortMenu').SetVisible(false);
      mnuPhotos.GetItemByName('ViewMenu').SetVisible(false);
    }
  </script>

</asp:Content>
mmount attached the following image(s):
photos_upload1.jpg
Back to top
Andrew  
#8 Posted : Thursday, October 17, 2013 9:30:29 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
Mike,

The height=100% does not work when the parent element of the <object> which embeds the uploader does not have any height defined. I have looked to the page source carefully and found out that the <object> is always inserted inside a <div id="ctl00_content_Uploader1_aspnetcontrol_placeholder">. I believe, the id may vary if you use other id.

So I have added the following style:

Code:
    <style type="text/css">
        div#ctl00_content_Uploader1_aspnetcontrol_placeholder{height:100%}
    </style>

And now it works.

Note, I could not try it with your code (as it uses third party components), but I experimented with the Basic Demo.

Don't forget to set some height for the parent div. In Basic Demo it was <div class="container"> in the master page, in your case, it is a <div id="uploaderDiv">.

Hopefully now it solves the problem.
Back to top
mmount  
#9 Posted : Friday, October 18, 2013 4:25:44 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Thank you Andrew. That works now though I strongly dislike coding CSS to elements that are automatically named.

In my case the object div was named "Uploader1_aspnetcontrol_placeholder" instead of "ctl00_content_Uploader1_aspnetcontrol_placeholder". I did a search on "var Uploader1 =" in the page source to find it.

Also, since I am setting the height of my container div (uploaderDiv) in javascript it does not need an initial height value.

Again, thanks for your time on this Andrew. I appreciate it and hope a similar solution might be permanently placed in code in a future release.

Mike
Back to top
Andrew  
#10 Posted : Sunday, October 20, 2013 9:03:19 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
I think we can add a height to this div automatically. I have submitted this suggestion to our dev team, so hopefully when they update ASP.NET control next time, they will add it.
Back to top
Andrew  
#11 Posted : Tuesday, October 22, 2013 6:26:36 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 876

Thanks: 2 times
Was thanked: 27 time(s) in 27 post(s)
FYI: this fix was included to the version 8.0.52. So if you update, you can remove the hardcoded style for the applet container div.
Back to top
thanks 1 user thanked Andrew for this useful post.
mmount on 10/23/2013(UTC)
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET 2.2.3 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.250 seconds.