Pages

Friday, October 26, 2012

Javascript - Get filesize client side

See http://www.w3.org/TR/FileAPI/.
 
var fi = document.getElementById('fileInput');
alert(fi.files[0].size); 
 
*****
 
Complete example: 
http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation
Be sure to always perform a server side check as well. The client side check is more
of a convenience function for the user rather than letting them upload a 5 mb file only
to then be notified by the server that it is too large.  
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html> 

Tuesday, October 16, 2012

File Upload with progress bar

AJAX toolkit has two controls: AsyncFileUpload (multiple files w/ progress bar) and AjaxFileUpload (single file)

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx

Here's a File Upload with progress bar
http://www.codeproject.com/Articles/113418/ASP-NET-File-Upload-with-Progress-Bar

Here's a way to change the presentation (e.g., change button image) using jQuery
http://www.appelsiini.net/projects/filestyle

Tuesday, July 24, 2012

GoDaddy SMTP servers

GoDaddy SMTP servers: asp.net in the web.config file:

live:
<network host="relay-hosting.secureserver.net" userName="jim@js.biz" password="xxx"/>

dev:
<network host="smtpout.secureserver.net" userName="jim@js.biz" password="xxx"/>


1- If your site is hosted on godaddy you may use "relay-hosting.secureserver.net" without credentials.
2- If your site is hosted outside of godaddy you may use "smtpout.secureserver.net" with you email account credentials.
PS: Please change port 3535 if you have problems with 25
Hosted On GoDaddy
    <system.net>
      <mailSettings>
       <smtp from="abc@xyz.net">
        <network host="relay-hosting.secureserver.net"/>
       </smtp>
      </mailSettings>
    </system.net>
External
  <system.net>
    <mailSettings>
      <smtp from="abc@xyz.net">
        <network host="smtpout.secureserver.net" 
           userName="abc@xyz.net" password="your_password_here" 
           port="25" />
      </smtp>
    </mailSettings>
  </system.net>