[wp-trac] [WordPress Trac] #32746: Media Upload mimeType validation bug

[WordPress Trac]

#32746: Media Upload mimeType validation bug
--------------------------+-----------------------------
 Reporter:  vivekbhusal   |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  4.2.2
 Severity:  normal        |   Keywords:
  Focuses:  javascript    |
--------------------------+-----------------------------
 I am working on plugin that lets user upload/select doc or docx file and
 followed by running task to parse those file and create post.

 Problem: I am using media uploader (wp.media.frame) to select or upload
 files of only mimetype
 ["application/vnd.openxmlformats-
 officedocument.wordprocessingml.document", "application/msword"]

 user can choose and upload the file, but after the file is uploaded, the
 mediaframe should be updated to display the newly uploaded file
 asynchronously, but it doesn't. However it does if I am only one mimeType.
 Here is the Code I use for media upload

 {{{
  // If the media frame already exists, reopen it.
         var alex_doc_uploader = $thisButton.data('file_frame');
         if (alex_doc_uploader) {
             alex_doc_uploader.open();
             return;
         }

         // Create the media frame.
         alex_doc_uploader = wp.media.frames.file_frame = wp.media({
             title: "Select Documents",
             button: {
                 text: "Select Documents"
             },
             library : {
               type:   ["application/vnd.openxmlformats-
 officedocument.wordprocessingml.document", "application/msword"]
             },
             multiple: true  // Set to true to allow multiple files to be
 selected
         });



         $thisButton.data('file_frame', alex_doc_uploader);


         /** NOT very relevant after this but still adding it here**/
         alex_doc_uploader.on('select', function(){
             var selection = alex_doc_uploader.state().get('selection');

             selection.map( function(attachment) {
                 if(attachment.attributes.filename)
                     attachments.push({'id':attachment.id,
 'attachment':attachment.attributes.filename});
             });

             if(attachments.length > 0) {
                 $("#alex-doc-import-selector").hide();
                 $('#alex-doc-file-insert').show();

                 $.each(attachments, function(index, value) {
                     $("#alex-import-selected-file-type").append("<li data-
 id='"+index+"'>"+value.attachment+"</li>");
                 });
                 $("#alex-doc-popup-container").dialog('open');
             }
         });
 }}}

 Issue explained here aswell: [http://stackoverflow.com/questions/30860208
 /wordpress-wp-media-frame-doesnt-display-attachment/ StackOverfflow]

 So on tracking the  problem I found, after upload it verifies the validity
 of newly added content on media-models.js .
 In the process calls filter.type function at line 897 media-models.js
 {{{
 /**
                  * @static
                  * @param {wp.media.model.Attachment} attachment
                  *
                  * @this wp.media.model.Attachments
                  *
                  * @returns {Boolean}
                  */
                 type: function( attachment ) {
                         var type = this.props.get('type');
                         return ! type || -1 !== type.indexOf(
 attachment.get('type') );
                 },
 }}}

 Here it get attachment.get(type) as "application" so it works when using
 one mimeType, because it uses index of to compare in string, but won't
 work for mimeType array.

 Here is the my log,
 var type = ["application/vnd.openxmlformats-
 officedocument.wordprocessingml.document", "application/msword"]
 attachment.get("type") gives "application"

 and attachment object is
 [[Image(attachmentobject.png)]]

 Solution:
 {{{
                  /**
                  * @since 4.2.3
                  * @static
                  * @param {wp.media.model.Attachment} attachment
                  *
                  * @this wp.media.model.Attachments
                  *
                  * @returns {Boolean}
                  */
                 type: function( attachment ) {
                         var type = this.props.get('type');
                         return ! type || -1 !== type.indexOf(
 attachment.get('mime') );
                 },
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32746>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform