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?

alexcasalboni · Accepted Answer · 2013-12-01 22:28:18Z

0

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.

answered Dec 1, 2013 at 22:28

alexcasalboni

1,7241 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related