Google to the rescue. One of the results came from a comment on PHP.net’s Error Messages Explained page. And I quote:

if post is greater than post_max_size set in php.ini
$_FILES and $_POST will return empty

Something I didn’t know to look for was the POST_MAX_SIZE setting. I increased this to 100MB and it worked like a charm.

* As a side note, in most instances, I would not recommend using 100MB as your max file size and post size. After getting it to work, I decreased it to a more reasonable amount (20MB).

***

I had a “duh” moment this morning as I was trying to figure out why my SQL code was returning NULL values. I had something to this effect:

SELECT firstName + ' ' + lastName FROM employees WHERE active = 1

As it turns out, if either firstName or lastName have are NULL, the concatenation will return NULL. I guess I just assumed it would treat NULL as an empty string in this case, but no such luck. Keep this in mind when storing NULL values in text fields that may need concatenation at some point.

The HTML

<form action="/upload/" method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
    Choose a file to upload:<br />
    <input name="uploadFile" type="file" /><br />
    <input type="submit" id="uploadSubmit" value="Upload File" />
</form>

Pretty simple, really.  Just make sure you have an id on the form and the submit button.

The Javascript

<script type="text/javascript"
src="http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.2.2/dojo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function() {
    var handle = dojo.connect(dojo.byId('uploadSubmit'), 'onclick', function (evt) {
        // Prevent Default Behavior
        evt.preventDefault();

        dojo.xhrPost({
            url: "/upload/",

            load: function(response, ioArgs) {
                // do stuff

                return response;
            }, // end load

            error: function(response, ioArgs) {
                // do stuff

                return response;
            }, // end error

            form: 'uploadForm',
        }); // end xhrPost
    }); // end connect
}); // end addOnLoad
</script>

I’m adding a dojo connect to the “onclick” event of the submit button. Instead of submitting the form as usual, it will do an xhrPost to the specified URL. If the upload succeeds, I can do what I want within the “load” section of xhrPost (display a success message, hide the form, etc.). However, if it fails, the “error” section will be called and I can display a message or whatever else I want to do.

That’s all there is to it on the client side. On to the server side…

The Python

(r'^upload/$', 'common.views.upload'),

This gets added to my base urls.py, redirecting my POST call to the views file in my common directory.

from libs.Http import Http
import time

def upload(request):
    if request.method == 'POST':
        handle_file_upload(request.FILES['uploadedFile'])
	return HttpResponse('success')
    else:
        return HttpResponseBadRequest('error')

def handle_file_upload(f):
    fn = "".join(['uploads/', str(time.time()), '.jpg'])
    destination = open(fn, 'wb+')
    for chunk in f.chunks():
        destination.write(chunk)
    destination.close()

This will do the actual work of  the upload, basically taking the uploaded file and placing it in an uploads folder with the current timestamp as the filename.

NOTE:  This is a skimmed down version of the actual upload, not checking the filetype or anything of the sort. If you are going to use this, make sure you add those basic security checks into your code.

That’s all! Like I said, pretty easy stuff, but I got stuck on a few little things (I just didn’t know any better) and thought this might help someone else out. Let me know if you see any problems with this or have suggestions for ways to improve upon it!

1. Use dojo.byId(…)

Okay, so this isn’t one that gave me a hard time, but I read about the cross-browser compatibility of using dojo.byId instead of document.getElementById and thought it would be worth mentioning in here. According to DojoToolkit.org, bugs persist in Internet Explorer which make getElementById() unstable in some common scenarios. Below is an example of one of these bugs:

<script type="text/javascript">
var elem = document.getElementById('myDiv'); // Returns form element
var elem2 = dojo.byId('myDiv'); // Returns div
</script>

<form>
<div id="myDiv">TESTING</div>
</form>

One of my least favorite things to do is debug IE errors. Save yourself the heartache and just dojo.byId if you have it available.

2. Use dojo.addOnLoad(…)

This one did give me trouble. I was unaware of the existence of this function until I had already spent a few hours trying to find out why my function wasn’t working. Here’s a simplified example of what I was doing:

<script type="text/javascript">
var button = dojo.byId('myButton');
var handle = dojo.connect(button, 'onclick', function (evt) { alert('test'); });
</script>

<input id="myButton" type="button" />

Theoretically, when I click the button, I should get an alert with the text “test”. However, as the code is, I get the alert when I click anywhere on the page. The problem? dojo.byId(‘myButton’) was returning null, adding my onclick event to every object on the page! Why was dojo.byId returning null for an object that clearly exists? I even went to my Firebug console and typed “dojo.byId(‘myButton’)”, which of course, return my input button as expected. I finally realized (duh) that my javascript code is executing before the input element exists. Proper usage of the addOnLoad function fixed the problem.

<script type="text/javascript">
dojo.addOnLoad(function(){
var button = dojo.byId('myButton');
var handle = dojo.connect(button, 'onclick', function (evt) { alert('test'); });
});
</script>

<input id="myButton" type="button" />

Hopefully these tips will help save you some time that I wasted. Do you have any quick dojo tips that could save me time? Let me know in the comments section!

USE YourDB
GO
INSERT INTO MyTable (FirstCol, SecondCol)
SELECT 'First' ,1
UNION ALL
SELECT 'Second' ,2
UNION ALL
SELECT 'Third' ,3
UNION ALL
SELECT 'Fourth' ,4
UNION ALL
SELECT 'Fifth' ,5
GO

This is a great solution and works perfectly. However, I have found that it is not the easiest to remember – I have to go back to that site any time I want to use this because I just can’t remember the exact syntax. I was discussing this solution with a co-worker and he suggested we try something different:

INSERT INTO MyTable (FirstCol, SecondCol)
VALUES
('First', 1),
('Second', 2),
('Third', 3),
('Fourth', 4),
('Fifth', 5);

Sure enough, it works! Not only is it easier to write, but it’s so much easier to remember. Hopefully others will find this as useful as I did.