Plupload - Limit file types by mime-type

Question

Trying to limit uploads with plupload to certain filetypes. Having a filter with just the extension isn't enough, since one can just rename the file extension.

For example, we are currently filtering to allow only image files with extension "jpg,jpeg,gif,png". I ran into an issue where a user tried uploading a file.jpg but which had mime-type of "image/webp".

We'd like to also force valid mime-types.

Current code we have is this:

// Initialize the widget when the DOM is ready
$(function() {
    $("#uploader").plupload({

        // General settings
        runtimes : 'html5,html4',
        url : "index.cfm?fa=Media.AddMedia",

        // Maximum file sizes
        max_file_size : '1mb',

        chunk_size: '1mb',

        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,jpeg,gif,png"}
        ],

        // Rename files by clicking on their titles
        rename: true,

        // Sort files
        sortable: true,

        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
        dragdrop: true,

        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        }
    });

    $("#uploader").on("complete", function() {
        window.parent.closePopWin();
    });
});

I tried adding mime_types filter, by following what was in https://www.plupload.com/docs/v2/Options#filters.mime_types, but nothing seems to be blocking an invalid mime-type.

Can this be done or do I have to do the validation server-side ??

IMPORTANT NOTE: We HAVE TO run this website with Firefox!

Thanks a million! Pat

Answer 1

I hope by now you have solved your issue. If not here is what I see: What I do notice in the code is that it is passing in an array for filters. The documentation shows that filters accepts an object.

Also mime_types is a property of the filters object. This is not included in your code.

I have not tried your code to see if this is your issue. If it is you would write filters as follows:

   filters : {
        mime_types[ {title : "Image files", extensions : "jpg,jpeg,gif,png"},]
    },