August 12, 2010

Inconsistencies with File Upload

Before I even begin I want to state that this shouldn’t be used as a definitive source for this information. I am utilizing an older version of Firefox (3.0) and IE7 for all my tests. I can’t vouch for Chrome, Opera or Safari’s take on any of this, but I gather that it is much the same.

At some point in your web programming or web design career you will inevitably encounter the dreaded file upload “utility”. This piece of crap, is only present to allow users to select a file on their machine and eventually transfer it to your servers. Of course, this is a vital piece now, but perhaps at the time it was something that was easily overlooked. After all, at a time when your ISP speeds were approaching the 14.4kbps mark, uploading files was really something only the computer geeks did.

Now however, with profile pictures, online resumes, cloud storage and so much more, the file upload feature is front and center. Some places have gone so far as to eliminate the default HTML object and instead go with a Flash equivalent. This doesn’t really fix the issue, it’s like me saying “oh your computer doesn’t work? Here, use my iPad” 1 It’s just a bypass. We need to fix this now! It’s already too late, we’re just playing catch up.

Understanding the Process
File uploading is one of those features that, if you’re unlucky, you’ll have to design a layout around. That’s because, for some reason, every browser has decided that the File upload object is completely immune to CSS. No amount of styling can ever achieve what you want. It will always look like ass.

File upload in Firefox and IE

File upload in Firefox and IE

There is no easy way to style it, there is no way to replace it (unless you use flash, but that’s a whole different issue) and the only way to get around it is to hide it or integrate it directly into your design. There is absolutely no way to pretty it up. You can’t adjust the size of the button or the size of the input box. You are essentially stuck, with what you see. No way around it. Or is there?

Short of changing your entire design to work with default form elements (euych!) the only way to fix the file upload feature is to hide it completely. See, because we can still apply some style features to an encapsulating element 2. So we could technically just hide the entire form field, and absolutely position it over our custom designed field. If we do it all right (we WILL have to use either a custom IE stylesheet or a bunch of hacks) we can make it look like our pretty file upload field is actually doing the work!

The Code
The code for this is primarily CSS with some JavaScript sprinkled in to make sure that everything is positioned where it should be. I am utilizing the jQuery library for a lot of this simply because I use it in a lot of my projects. If you use any other libraries, they should all have equivalent methods and if they don’t, you should ditch them and switch to something else. If you are trying to follow along in straight JavaScript good luck. One of the primary reasons I work with a JavaScript library is because of cross browser inconsistencies. With a library, I can be sure that someone has gone through the painstaking task of setting up different kinds of math and implementation for the different browsers.

<html>
<head>
  <title>File Upload</title>
  <style type="text/css">
 
  </style>
</head>
<body>
<div id="fake-file">
  <input type="text" id="fake-file-title" name="fake_file_title" value="">
  <button>Browse</button>
</div>
<div id="file-constraint">
  <input type="file" id="real-file">
</div>
 
</body>
</html>

The CSS below is what we will be using to style our new input fields.

#fake-file input {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 2px;
  }
  #fake-file button {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 1px 8px;
    background-color: #FFF;
  }

Now it’s as simple as adding some positioning values to our file-constraint field. We will also alter the z-index and position it higher vertically than our fake file upload. Then we can simply utilize some JavaScript to make things work like it should.

#file-constraint {
position: absolute; 
top: 0px; 
left: 0px;
z-index: 2;
display: none;
}

Bam instant hidden. Based on the position of your actual fake file field the top/left attributes will obviously change. The JavaScript is just as simple. I am utilizing jQuery to hook in to the onChange event for the real-file field, but it’s not necessary. You can do the same without a library. I just prefer jQuery because it means I can target all browsers the exact same way.

$('#real-file').change(function(e) {
var str = $(this).val(); 
str = str.split('\\')[str.length-1]; 
$('#fake-file-title').val(str);
});

Basically we get the value of the file upload field. In Firefox this is just the name of the file, while in IE it contains the complete path to the file. I prefer stripping out the path, but that is up to you. Basically the value from the real file field is just assigned to the fake file field.

Working with file uploads are a hassle and this really only covers a portion of the client-side. There are still many things to take into account such as temporary file locations, file permissions, fake-ajax / standard uploading etc. This tutorial isn’t meant to be a complete compendium of all things file uploading, but merely to point out some annoying UI inconsistencies.

Notes:

  1. I really don’t have one http://wheremy.feethavebeen.com/2010/02/blagging-about-the-ipad/ ↩
  2. A div that contains the file upload field, for example ↩
November 23, 2009

ChromeOS – Revolution or Bust!

Everyone seems to be going a little over board with the newly announced Chrome OS. Don’t get me wrong, I love all new shiny things – I’m a shiny-new-thing-lover, but people are not only blowing this out of proportion, they’re not even talking about the right things. Let’s break it down shall we?

What IS Chrome OS?
Simply put, Chrome OS is Google’s take on the PC. They essentially stripped out the actual operating system and you’re running a slightly glorified browser. Why slightly? Well, because they’re essentially using Google Chrome with a few added tweaks. Want to know how it will run? Just pop open Google Chrome and hit the maximize button. Sure there will be a few UI tweaks and a couple of additions here and there, but that’s essentially what you are looking at.

What’s the big deal then?
The big deal here is two-fold. First off, it’s by Google! For die hard Googlers (me and damn near everyone else -.-) nothing Google can do is wrong! And even if they put out something questionable, they either fix it, or kill it and explain why. Google is also huge on the internet. Their applications either enjoy huge successes, or bomb and are killed quickly. Therefore, people come to expect a certain level of awesome from Google, and they expect that by Google officially calling Chrome OS it’s own project that they will get awesome. Secondly they used the word “cloud” multiple times, and right now that word is a game changer.

I’m confused.
Don’t worry, you’re not alone, a lot of tech bloggers seem to think that Google tipping its toe into the PC market will result in a revolution. Some people even think that Microsoft should watch out. They’re wrong. Google is trying something different, sure, but it won’t have much of an impact on people who aren’t tech savvy. Let’s examine this idea a bit more, with the use of some average customers.

Customer 1 – Just want it to work
I worked for a while as a sales associate at a fairly large computer store. Customers would come in daily looking for a computer that they could use just for checking their email, browsing the internet and listening to some music. They didn’t do anything fancy, and were therefore not looking for anything overly expensive. Sadly, Chrome OS only satisfies 2.5 of their results, and even then, it clobbers them into something they’re not quite comfortable with. Web based email is something that is finally catching on to the main stream. It’s the newer generation that are really making strides with the cloud. Older generations are more comfortable with Outlook Express. That isn’t to say that won’t get used to a web-based client. It will just take some time. It took me a few months to move my parents away from Outlook Express and to Gmail. My father handled the move fairly well, but my mother found it a hassle. In fact, to this day she will delete and email rather than archive it, even if there is a chance she will use it later. The internet is what Chrome will excel at. But “browsing the internet” usually translates into 25-30 pages that a user will visit frequently. The last bit is where users will really get confused. Since ChromeOS doesn’t have a native file-system, there isn’t any way to store your files on it. That means that all your music on your old PC will stay on your old PC. If you have an mp3 player you can definitely hook it up and look at your music, but you can’t play it. Of course, if you have an iPod you’re just out of luck. iPod’s will require iTunes which requires a hard-drive. If you want to listen to music now, you’re stuck going with online services like Lala, Pandora and Last.fm. Of course, Pandora doesn’t work in most places, and that extensive library that they’ve build up won’t work.

Customer 2 – The Gamer/Hardware Guru
They know exactly what they are looking for and won’t waste your time. They’ll have a list of things they want and they’ll just run through your store and pick them up, stopping you only if they can’t find something. They’re veterans. They already know ChromeOS won’t let them play games or download movies and music or even let them tinker about with some music editing software that they need and they won’t waste time thinking about it.

Customer 3 – The self-proclaimed guru
These customers generally have some idea of what they’re looking for, but have no clue about specifics. They think of themselves as better than the average user and tend to have idea’s about systems that they’ve just picked up from others. They don’t know if ChromeOS is right for them, but once you mention that it doesn’t have a hard-drive they’ll be a little skeptic.

Customer 4 – Curious
This is the only customer that will pick up ChromeOS. They have an idea of what ChromeOS is about, and they know that it won’t replace a desktop or laptop, but still, they’re curious about it. These customers will come in looking specifically for ChromeOS and if you don’t have it, they’ll move right on to the next place.

And that is why ChromeOS isn’t going to go up against any of the big OSes. It’s not designed to. At its core, ChromeOS is meant for a very niche set of users. People who like Google’s products and are looking for a hassle free way to access them. It’s not meant to replace your current machine, it’s a supplement, something that Google themselves has tried to make clear. If you’re interested in reading up some more on Googles ChromeOS, I’ve included a couple links to some articles that I think address the situation rather well.

http://gizmodo.com/5408712/what-google-needs-for-the-chrome-os-to-succeed
http://arstechnica.com/open-source/news/2009/11/chromeos-announcement.ars/

October 26, 2009

FTP (and it’s cousin, SFTP)

What is it?
From the techical side of things FTP stands for File Transfer Protocol. It’s just a fancy way of saying it’s a standard for transferring files between your computer and another computer, be it a web server, or just your friends pc. FTP isn’t something you generally need to worry about until you own a website, and then you’ll eventually realize that the file uploader that comes with your cPanel account by default just isn’t cutting it. When technical people refer to FTP they’re really saying FTP Program, which is a utility that you can install that can take advantage of the File Transfer Protocol and transfer some files from your PC to another one.

Do you have it?
ftpaccChances are, if you are the administrator of a server (even if it’s someplace you host your website online) you have access to FTP. Most hosting companies try to make it as easy as possible for people to set up their FTP accounts, and generally pouring through the help documents will ..well help. But if you log into your control panel (most likely cPanel) you can look for an icon that looks like this, or just says “FTP” on it
Setting it up
Essentially the page you are trying to get to will let you create and administer FTP accounts. The image below is what cPanel users will see. It’s a pretty straight forward form, and you just need to fill it out. The login is just the name that you will use to log in to your account. For my system, it’s set up to be login@feethavebeen.com, where “login” is a username that I created. The password is what you will need to enter to log in to your FTP account. Make sure it is something complicated, and if you’re not sure, just hit the Generate button and add a few characters onto the end. For some hosts, they automatically fill out the “Directory” setting. You should just delete this or set it to “public_html/”. That will ensure that the user you are logging in with can access all the files on your server. When you’re done just click the “Create FTP Account” button and wait for everything to be done. You’ll generally get to a confirmation page that will show you the username and password that you selected. Make sure you either write them down somewhere or remember them.

ftpaccsetup

Accessing your account
Now that your account is created, the next step is accessing your server using that account information. To do this you have a couple of options. IE users can log in through their browser by going to ftp://www.yoursite.com and then logging in using their username/password combination. That’s fine for downloading files, but when you want to start uploading them, I’d recommend and actual FTP client such as one of the following:

http://www.smartftp.com/
http://winscp.net/eng/index.php
http://fireftp.mozdev.org/ -   Firefox Addon Only
http://filezilla-project.org/ – Supports both SFTP, FTPS and FTP

You can download and install the FTP client and start it up. Generally when the clients start up they ask you for your account information to log in. You can set the host as your website, the username as the username you gave in the form, and the password that’s associated to it. Make sure that the PORT is set at 21. FTP utilizes port 21 to perform it’s functions. By default winSCP is set to PORT 22 (more on this in a second). Once that’s done, you can sign in to your ftp account.

Using FTP
Using FTP through one of the clients is very simple. You are normally presented with a split view. The files on your computer are on the left, and the files on your web server are on the right. To move files, you just drag them from your computer to the web server, or from the server to your computer. The files are then transferred over. There are many advanced functions that each FTP program offers, but that is something that is beyond the scope of this article.

SFTP?
By default, FTP transmissions are not encrypted. This means that your files and more importantly your passwords (thanks for pointing out that I missed this part Felipe) are passing in plain-text between you and your webserver. Most times this isn’t an issue, but if you are transferring sensitive data, or are just paranoid like me, you’ll want to use Secure FTP. Secure FTP encrypts all data that it transfers and therefore, is a little slower than standard FTP, but it is worth it (at least tome). Out of the FTP clients I mentioned, only winSCP can handle the SFTP. When using SFTP, you have to make sure that your PORT is at 22 instead of 21.

« Older Entries