fine uploader add prefix to file name on s3

Question

So when I upload a file to s3, I want to retain the original file name, which appears to work if I use

objectProperties: { key: "filename" },

I would also like to add a prefix to the object in S3. So if I upload foo.jpg, I want the S3 object key to be '12345/foo.jpg'. I'm going through the documentation and I'm not coming up with a clear direction to go in.

Thanks, j

Pastime

Answer 1

To add a prefix to your object's keyname you can use the objectProperties.key option like so,

non-jQuery Uploader

var uploader;

uploader = new qq.s3.FineUploader({
    // ....
    objectProperties: {
        key: function (id) {
            return '12345/' + uploader.getName(id);
        }
    }
});

jQuery Uploader

$("#fineuploader-s3").fineUploaderS3({
    // ....
    objectProperties: {
        key: function (fileId) { 
           return '12345/' + $("#fineuploader-s3").fineUploader("getName",fileId); }
    }
});

Bordelaise

Perfect. This worked for me.. objectProperties: { key: function (fileId) { return '12345/' + $("#fineuploader-s3").fineUploader("getName",fileId); } }, – Pastime

Had you tagged the question as jquery, Mark would have been able to use jQuery in his example and provide you with this exact code. – Evocation

Updated to show examples with both uploader types. Please accept if it works! – Bordelaise

Awesome! That worked like a charm. I just want to add to anyone who was initially confused that the call to uploader.getName(id) or $("#fineuploader-s3").fineUploader("getName",fileId) returns the name of the file as you selected it on your filesystem. So if your selected a file to upload called: 'Black Dog.mp3' then the call to aformentioned functions gets you 'Black Dog.mp3'. – Staal

Answer 2

To add to Mark's answer if you like that Fineuploader generated the UUID but you still wanted the file to be uploaded to a certain folder within the bucket you can just use the same approach but specify the method getUuid. Just make sure you extract the file extension from the original file name first like so:

Non-jquery uploader

uploader = new qq.s3.FineUploader({
    // ....
    objectProperties: {
        key: function (fileId) {

            var filename = uploader.getName(fileId);
            var uuid = uploader.getUuid(fileId);
            var ext = filename.substr(filename.lastIndexOf('.') + 1);

            return  'folder/within/bucket/' + uuid + '.' + ext;

        }
    }
});

jQuery Uploader

$("#fineuploader-s3").fineUploaderS3({
    // ....
    objectProperties: {
        key: function (fileId) {

            var filename = $('#fineuploader-s3').fineUploader('getName', fileId);
            var uuid = $('#fineuploader-s3').fineUploader('getUuid', fileId);
            var ext = filename.substr(filename.lastIndexOf('.') + 1); 

           return  'folder/within/bucket/' + uuid + '.' + ext;
        }
    }
});

Staal

Answer 3

I would use

return prefix + '/' + $('#' + tagid).fineUploader("getName", fileId).replace(/[^\w\s.-]/gi, '');

in order to remove non-alphanumeric values.

Pizzeria