A Blog about Coding

Category: Client Side Programming

  • Uploading Zip files in Umbraco 7

    Uploading Zip files in Umbraco 7

    I have am in the process of setting up an Umbraco 7 website that has limited editing facilities (i.e. only one person will be updating the site, a relatively experienced user at that). I would like this user to be able to upload Zip files.

    It appears that the disallowedUploadFiles in config/umbracoSettings.config is totally ignored:

    
 ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,html,htm,svg,php,htaccess

    Instead, it uses jQuery to upload the files, and the jQuery uploader has its own list of allowed files. I looked inside umbraco_client\FileUploader\Js\jquery.fileUploader.js and altered the following:

    
(function ($, window, document, undefined) {

    $.event.props.push('dataTransfer');

    var defaultOptions = {
        autoUpload: false,
        limit: false,
        allowedExtension: 'jpg|jpeg|gif|png|pdf', // alter this line to include your file types
        dropTarget: null,
...


    I don't recommend expanding this to Exe's or Zips if your users are not 100% expert and totally trusted not to upload bad files. I wanted just to be able to upload Zip files.

    Next, I had to look at the file size limits. ASP.NET's defaults are too low. To fix this, I edited web.config, to add the maxRequestLength and executionTimeout attributes:

    
  
    
    
    
...

    I also had to add a System.WebServer.Security section to the web.config:

    
  
    
      
        
      
    
...

    This allowed my uploads to work ok.

    The alternative to doing this I guess (I didn't try it) was to upload small text files as place holders and then log into the server and change the files - which are placed inside the media folder under a subfolder which is the Id of the media item.

    Thanks to Scott Leslie's post that I found that reminded me of what needs doing to set the file upload limits in web.config http://sleslie.me/2014/change-maximum-upload-file-size-in-umbraco/

  • ASP.NET Webforms Gridview width expanding outside container

    ASP.NET Webforms Gridview width expanding outside container

    Do you have an ASP.NET Webforms application with the GridView expanding outside of its container? Your markup might look like this:

    
<%--Markup to enter search criteria and then set Visible="true" on the ResultsPanel for example--%>
...
<%--Markup to show results--%>

    
...
    
...

    Because the GridView uses a table, sometimes the width of it might expand to larger than your browser window. This might be fine (you could use the scroll bar at the bottom of the browser window), but it also might also cause a problem for example if you have the default widths (width: 100%) in your CSS. You could end up with with the inner part of the GridView extending off the right of the page.

    When I originally had this problem I didn’t find a good fix by Googling. The fix is quite simple. Put a CssClass=”results” on the ResultsPanel (the outer div) and define the following CSS:

    
.results {
    overflow:auto;
}

    This will put a scroll bar on the bottom of the GridView.

  • IE9 problems with document.GetElementById()

    IE9 problems with document.GetElementById()

    I have worked in the past for corporate clients who are still using IE9. So despite IE and IE9 in particular not being that widespread in the wild, for these intranet systems, my apps must support IE9.

    This is not usually a problem, but I do recall a problem occurring in the past which went against what you might expect.

    I had some JavaScript whose job it was to open a popup on a web page and pass some data from the page to the popup so the user could review it and press “Search”. When the data was found, the user pressed a “Select” link on the popup and the JavaScript passed the data back to the original page and closed the popup. Should be simple right?

    The JavaScript code that transferred the data looked something like this:


    var custRegCodeTextBox = document.getElementById('CustRegCodeTextBox');
    var destCustRegCodeTextBox = document.getElementById('DestCustRegCodeTextBox');
    destCustRegCodeTextBox.value = custRegCodeTextBox.value;
    $('#popup').fadeIn(700);

    The code worked absolutely fine on my Windows 7 development machine running the same version of IE9 as the client (9.0.8112.16421 – 9.0.35) but it failed with JavaScript errors on the client. Why did this occur? A lot of head scratching and trial and error ensued because isn’t document.getElementById one of the most fundamental things?

    The solution was to change the code to use jQuery throughout, e.g.:


    var custRegCodeTextBox = $('#CustRegCodeTextBox');
    var destCustRegCodeTextBox = $('#DestCustRegCodeTextBox');
    destCustRegCodeTextBox.val(custRegCodeTextBox.val());
    $('#popup').fadeIn(700);

    Why did this work? The best I have to offer are two reasons:

    1. ASP.NET Webforms will generate id=”Something” name=”Somethingelse” even when ClientIDMode=”Static”. This may have been something to do with it.
    2. The customer had intranet compatibility mode turned on, and nothing I could do in the page would turn it off.

    Anyway, its not very often that using a library solves a problem, usually the opposite is true, if the library introduces a bug, going to the building blocks normally solves it. This just shows to me just how good jQuery really is.