PHP/jQuery S3 upload doesn't work on files with spaces

Question

Using a combination of a few different scripts I'm trying to create a tool that will allow users to upload videos from their local machine to a S3 bucket. It works brilliantly on files without any spaces, but completely chokes if there are any spaces (the upload dies and I get a XHR error).

Upload form:

<table>
    <tr>
        <td>File:</td>
        <td><input type="file" id="files" name="files[]" multiple /></td>
    </tr>
    <tr>
        <td>Title:</td>
        <td><input type="text" id="title" name="title" size="50" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="submit" id="submit" name="submit" value="Start Encoding" /></td>
    </tr>
</table>

<script type="text/javascript">
document.getElementById('submit').addEventListener('click', handleFileSelect, false);
setProgress(0, 'Waiting for upload.');
</script>

Here's the javascript:

    function handleFileSelect() {
        setProgress(0, 'Upload started...');

        var files = document.getElementById('files').files;
        var title = document.getElementById('title').value;

        var pieces = files[0].name.split(".");
        var fext = "-original." + pieces[pieces.length - 1]; //fext = "-original.jpg"
        var currdatetime = new Date().getTime(); 
        var dockey = "FINVID" + currdatetime; //dockey = "FINVID20130523123546

        files[0].name = dockey;

        $.get("updatetxtfile.php", { vidid: dockey, vidtitle: title } );
        uploadFile(files[0],fext);
    }


    function uploadFile(file,fext){
      executeOnSignedUrl(file, function(signedURL) 
      {
        uploadToS3(file, signedURL, fext);
      },fext);
    }


    function uploadToS3(file, url, fext){
        var xhr = createCORSRequest('PUT', url);
        if (!xhr) {
            setProgress(0, 'CORS not supported');
        }
        else
      {
        xhr.onload = function() 
        {
          if(xhr.status == 200)
          {
            setProgress(100, 'Upload completed');
                    triggerEncoding(file, fext);
          }
          else
          {
            setProgress(0, 'Upload error: ' + xhr.status);
          }
        };

        xhr.onerror = function() 
        {
          setProgress(0, 'XHR error.');
        };

        xhr.upload.onprogress = function(e) 
        {
          if (e.lengthComputable) 
          {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            setProgress(percentLoaded, percentLoaded == 100 ? 'Finalizing...' : 'Uploading...');
          }
        };

        xhr.setRequestHeader('Content-Type', file.type);
        xhr.setRequestHeader('x-amz-acl', 'public-read');

        xhr.send(file);
      }
    }

So, a user selects a video file, hits submit, and handleFileSelect gets triggered. Optimally I'd like to rename the file before upload, but I can't even do that. It looks like from the specs that might not be possible. So what the heck is going on? It's insane to think that I can't upload a file with a space in it, so I must be making a mistake, right?

Answer 1

Check this out.

It looks like you can easily manage the key value (either statically or dinamically)

<input type="hidden" name="key" value="uploads/${filename}">

and the callback action

<input type="hidden" name="success_action_redirect" value="http://localhost/">

without messing up much with the manual upload.

You can always make it ajax if you want, but make sure you're using all the very useful parameters they accept.