Como integrar o upload de arquivos Ajax no WordPress

Você deseja implementar o upload de arquivo Ajax no WordPress? Às vezes, você precisa executar uma tarefa que carregue um arquivo por meio do Ajax. Neste artigo, estudamos como fazer upload de arquivo Ajax no WordPress.

Um benefício de fazer upload de arquivos por meio do Ajax é reduzir a carga do servidor. Sua página não será recarregada, o que economiza chamadas extras para um servidor e, consequentemente, a largura de banda. Ele também adiciona uma melhor experiência do usuário ao seu site.

Normalmente, ao trabalhar com Ajax, damos uma chamada para URL e passamos dados para ou obtemos dados da URL especificada. O WordPress tem uma maneira ligeiramente diferente de realizar operações Ajax. No WordPress, fazemos uma chamada para a URL, mas o código que escrevemos para processar os dados irá para a função. Então, essa função precisa ser mapeada com o valor de ‘ação’ passado nos parâmetros Ajax. Confuso? Vamos ver em ação.

Upload de arquivo Ajax no WordPress

Para começar, você precisa de um formulário com a entrada do arquivo. Damos uma chamada Ajax na seleção de um arquivo e carregamos o arquivo para um servidor. Para criar um formulário, adicione o HTML abaixo ao seu modelo de página.

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label><?php _e('Choose File:'); ?></label>
        <input type="file" id="file" accept="image/*" />
    </div>
</form>

Em seguida, você deve dar uma chamada Ajax no evento de mudança de entrada do arquivo. Como estamos passando o conteúdo de um arquivo para o Ajax, seu código será um pouco diferente em comparação com o código jQuery regular do WordPress Ajax.

Incluir arquivo JS no WordPress

Vamos primeiro incluir o arquivo JS em um ambiente WordPress. Este código irá dentro do functions.phparquivo ou em um plugin específico do site.

function aw_scripts() {
    // Register the script
    wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1.1', true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    );
    wp_localize_script( 'aw-custom', 'aw', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'aw-custom' );
}
 
add_action( 'wp_enqueue_scripts', 'aw_scripts' );

Carregar arquivo no servidor

Você está pronto com o formulário e o arquivo JS. Agora, adicione o código abaixo no arquivo JS que enviará o conteúdo do arquivo para o lado do servidor por meio do Ajax.

custom.js

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_data = $(this).prop('files')[0];
        form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
 
        $.ajax({
            url: aw.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File uploaded successfully.');
            }
        });
    });    
});

A parte importante do código acima é que anexamos uma ação ‘file_upload’ ao objeto form_data. Usaremos esta ação ‘file_upload’ para prosseguir com os dados do formulário.

No functions.php, mapeie esta ação com o Ajax da seguinte maneira:

add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );

Se você está escrevendo este código em um plugin, não precisa escrever uma segunda instrução. Aqui, ao ‘wp ajax_’ e ‘wp_ajax_nopriv ‘, anexamos o valor da ação que é ‘file_upload’. O segundo parâmetro ‘file_upload_callback’ é o método de retorno de chamada que terá o código real para upload de arquivo.

function file_upload_callback() {
       $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    if (in_array($_FILES['file']['type'], $arr_img_ext)) {
        $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
        //$upload['url'] will gives you uploaded file path
    }
    wp_die();
}

Estou usando um método wp_upload_bits para enviar arquivos em um servidor. Este método armazena diretamente um arquivo dentro do diretório wp-content / uploads.

Vá em frente e tente fazer o upload de um arquivo. Seu arquivo deve ser carregado na pasta wp-content / uploads /. Observe que você encontrará seu arquivo na pasta do mês atual do diretório de uploads.

Faça upload de vários arquivos usando Ajax no WordPress

Até agora, discutimos o upload de um único arquivo por meio do Ajax. Pode haver uma situação em que você deseja fazer upload de vários arquivos usando Ajax. Vamos ver como conseguir isso.

Para enviar vários arquivos, você precisa fazer pequenas alterações no código HTML, JS e PHP acima.

HTML fornece um atributo ‘múltiplo’ que permite ao usuário selecionar vários arquivos na entrada do arquivo.

Código HTML

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label><?php _e('Choose File:'); ?></label>
        <input type="file" id="file" accept="image/*" multiple />
    </div>
</form>

Como um usuário vai selecionar vários arquivos, precisamos alterar o código JavaScript que percorre cada arquivo e constrói um array a partir dele.

custom.js

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_obj = $this.prop('files');
        form_data = new FormData();
        for(i=0; i<file_obj.length; i++) {
            form_data.append('file[]', file_obj[i]);
        }
        form_data.append('action', 'file_upload');
 
        $.ajax({
            url: aw.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File(s) uploaded successfully.');
            }
        });
    });
});

E, finalmente, na função de retorno de chamada do Ajax, percorremos a matriz de arquivos e carregamos cada arquivo em um servidor.

function file_upload_callback() {
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
 
    for($i = 0; $i < count($_FILES['file']['name']); $i++) {
 
        if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
 
            $upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
            //$upload['url'] will gives you uploaded file path
        }
    }
    wp_die();
}

Espero que você conheça o upload de arquivos Ajax no WordPress. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.

Artigos relacionados

• Como carregar uma postagem do WordPress com AJAX
• Como usar jQuery Ajax no WordPress
• Arrastar e soltar o upload de arquivos usando JavaScript e PHP