WordPress 固定ページ上(表示側)からajaxでメディアをアップロード(ドラッグ&ドロップ)

処理の流れ

ドラッグ&ドロップ(HTML/javascript)

HTML

HTMLはドラッグされるエリア要素と、ファイルをボタンから選択した場合も想定して以下のようにしました。 inputのcssを弄る場合はlabelなどで包むなどしてください。

<div id="drag_area">
<input type="file" name="file">
</div>

JS

dragover(ファイルをエリアに乗せたとき)、dragleave(ファイルをエリアから離したとき)、drop(ファイルをエリアにドロップしたとき)の3つのイベントを追加していきます。jquery離れができていないですが、ご了承ください；

let dragArea = $('#drag_area');
dragArea
.on('dragover', e => {
      e.stopPropagation();
      e.preventDefault();
      $(e.target).css('background', 'red');
})
.on('dragleave', e => {
      e.stopPropagation();
      e.preventDefault();
      $(e.target).css('background', '');
})
.on('drop', e => {
      let files = e.originalEvent.dataTransfer.files,
            file = files[0],
            fd = new FormData(),
            fr = new FileReader();
      if(files.length > 1){
            alert('アップロードできるファイルは1つだけです。');
            return;
      }
      fr.addEventListener("load", e => {
            //jsで生成したformデータに設定していく
            fd.append( 'action', 'upload-attachment' );
            fd.append( 'async-upload', file);
            fd.append( 'name', file.name);
            fd.append( '_wpnonce', LOCALIZE_DATA.nonce );//後述

            $.ajax({
                  url: LOCALIZE_DATA.upload_url,//後述
                  type: 'POST',
                  dataType: 'json',
                  cache: false,
                  processData: false,
                  contentType: false,
                  data: fd
            }).done( response => {
                  if(response.success){
                        //trueが返ってくれば成功
                  }
            }).fail( err => {

            });

      });
      fr.readAsArrayBuffer(file);
});
//ファイルをボタンから選択した場合
$('input[type="file"]', dragArea).on('change', e => {
      let file = e.target.files[0];
      //dropと同様の処理。今回は省略

});

PHP

PHP側からjs側に変数を渡すため、functions.phpに以下を追加し、 上記のjsで参照しています。 upload_urlとしているのは、ajaxのurlに設定するための送信先。 nonceでやっているのは、通常この処理は管理画面から行うものなので、セキュリティ対策としてajaxリクエスト時にこのnonceを送信する必要があるみたいです。

function is_enqueue_scripts() {
    $data = array(
        'upload_url' => admin_url( 'async-upload.php' ),
        'nonce'      => wp_create_nonce( 'media-form' ),
    );
    wp_localize_script( 'page_handle', 'LOCALIZE_DATA', $data );
    //'page_handle'の部分はこれを書き出すjsのハンドル名
    //例えば以下のように固定ページの場合にpage.jsを読み込んでいる前提
    if(is_page()){
　　    wp_enqueue_script( 'page_handle', get_template_directory_uri() . '/js/page.js', array('jquery'), '0.1.0', false );
    }
}
add_action( 'wp_enqueue_scripts', 'is_enqueue_scripts' );

日本語ファイル名が文字化けする問題

/wp-content/plugins/wp-multibyte-patch/wpmp-config-sample-ja.php

$wpmp_conf['patch_sanitize_file_name'] = false; //trueからfalseに変更

ユーザ権限によるエラー

//権限「購読者」のファイルアップロード権限をON
function add_theme_caps(){
    $role = get_role( 'subscriber' );//subscriberは購読者
    $role->add_cap( 'upload_files' );
}
add_action( 'admin_init', 'add_theme_caps' );

//この方法だとアップロードのajax処理で問題発生
add_action( 'auth_redirect', 'subscriber_go_to_home' );
function subscriber_go_to_home( $user_id ) {
    $user = get_userdata( $user_id );
    $user_roles  = $user->roles;
    $target_role = 'subscriber';
    if ( in_array($target_role, $user_roles) ){
        wp_redirect( get_home_url() );
        exit();
    }
}

add_action( 'auth_redirect', 'subscriber_go_to_home' );
function subscriber_go_to_home( $user_id ) {
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        //ajaxの場合、なにもしない
    }else{
        //管理画面かつユーザ権限が購読者の場合、ホームにリダイレクト
        if(is_admin() && current_user_can('subscriber')){
            wp_redirect( get_home_url() );
        }
    }
}

セキュリティ上、アップロードできないファイル

define('ALLOW_UNFILTERED_UPLOADS', true);