Как отправить форму через AJAX с прекрепленным файлом?

Question

[Ninja Mate]

К сайту на WP пытаюсь прикрутить форму на js для отправки писем с файлами. Сами письма отправляются, а вот файлы не могу загрузить через ajax. Вот такую ошибку выдает.

File is empty. Please upload something more substantial. This error could also be caused by uploads being disabled in your php.ini or by post_max_size being defined as smaller than upload_max_filesize in php.ini.

Код JS

handleSubmit(e) {
        e.preventDefault();
        var that=this;
        jQuery.post(

            MyAjax.ajaxurl,
            {
                'action': 'mail_nps',
                processData: false,
                contentType: false,
                
                'subject' : that.state.subject,
                'message' : that.state.message,
                'file' : that.state.file,
                
                'nonce' : MyAjax.nonce,
                async: false

            }
        ).error((resp)=>{
                console.log('error '+resp);
            }
        ).done((resp)=>{
            console.log('done '+resp);
            }
        );
    }
...

<form onSubmit={e=>this.handleSubmit(e)} encType="multipart/form-data">

                            <Input value={this.state.subject}
                                   onChange={(event)=>this.setState({subject: event.target.value})}
                                   type="text" placeholder="Subject:"
                                   required />

                            <Input value={this.state.message}
                                   onChange={(event)=>this.setState({message: event.target.value})}
                                   type="textarea" placeholder="Your message:"
                                   required />

                            <Input type="file"  
                                   onChange={(event)=>this.setState({file: event.target.value})} 
                                   className="upload"/>

                            <ButtonInput type="submit"  bsStyle="warning" block>Submit</ButtonInput>

На PHP стороне так

add_action( 'wp_ajax_mail_nps', 'mail_nps' );

function mail_nps(){

    $nonce = $_POST['nonce'];
    if (wp_verify_nonce($nonce, 'myajax-nonce')) {

        require_once(ABSPATH . "wp-admin" . '/includes/image.php');
        require_once(ABSPATH . "wp-admin" . '/includes/file.php');
        require_once(ABSPATH . "wp-admin" . '/includes/media.php');

        $subject=$_POST['subject'];
        $message=$_POST['message'];

        remove_all_filters( 'wp_mail_from' );
        remove_all_filters( 'wp_mail_from_name' );

        global $current_user;
        get_currentuserinfo();
        $from=$current_user->user_email;

        $to='[e-mail]';
        $headers = 'From: Name <'.$from.'>' . "\r\n";

//Тут я так понимаю возникает проблема с передачей файла
        $uploadedfile = $_FILES[$_POST['file']];

        $upload_overrides = array( 'test_form' => false );

        $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

        $attachments='';
        
        if ( $movefile && ! isset( $movefile['error'] ) ) {
            $attachments = array($movefile['url']);
        }

        wp_mail( $to, $subject, $message, $headers, $attachments );
    }

    exit();
}

Как правильно передать файл и загрузить его?
Обновление

handleSubmit(e) {
        e.preventDefault();
        var that=this;

        var fd = new FormData();
        fd.append( 'userfile', $('#userfile')[0].files[0]);

        jQuery.post(
            MyAjax.ajaxurl,
            {
                'action': 'mail_nps',
                processData: false,
                contentType: false,
                data: fd,
                'subject' : that.state.subject,
                'message' : that.state.message,
                'nonce' : MyAjax.nonce,
                async: false
            }
        )
...
<Input type="file" name="userfile" id="userfile" className="upload"/>

Возникает ошибка

TypeError: Illegal invocation

Что делаю не так?

Answer 1

[Archakov Dennis]

Тык: archakov.im/post/ajax-file-upload.html

Comments

[Ninja Mate]

как в моем случае загрузить объект
в этой статье такой код

document.querySelector('input[name="file"]').addEventListener('change', function(e) {
		var file = this.files[0];
		var filename = file.name;
		var file_id = Math.random().toString().substr(2,6);
		var file_ext = file.name.split('.')[file.name.split('.').length-1];

у меня

<Input type="file"  
                                   onChange={(event)=>this.setState({file: event.target.value})} 
                                   className="upload"/>
<code/>
разве я не сохраняю файл в стейт? есть возможность через ajax файл передавать?

[Dmitry Pavlov]

document.querySelector('input[name="file"]').addEventListener(

это та же самая подписак ана событие как у вас onChange, просто другим способом.

[Archakov Dennis]

Ninja Mate: в это статье ведь все подробно описал же.

[Dmitry Pavlov]

Ninja Mate: через $_FILES думается php.net/manual/ru/features.file-upload.php

[Ninja Mate]

Ingush Archakov: Спасибо за помощь, с этим не разобрался, но сделал все через wp api

Answer 2

[Михаил Шведков]

1. Загружаете файл (например, скрытым iframe'ом)
2. Получаете статус загрузки файла (если говорит, что 200 ОК и все доступно - то шлем форму)
3. Шлем форму, в которую засовываем ссылку на файл
4. На серверной стороне переносим файл на постоянное место, обрабатываем при желании
5. завершаем обработку формы
6. Profit!

Comments

[Ninja Mate]

с первого пункта уже потерялся. что за скрытый фрейм?

[Ninja Mate]

Спасибо за помощь, с этим не разобрался, но сделал все через wp api

Answer 3

[Dmitry Pavlov]

Можно так (обратите внимание на new FormData(форма) )

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( $("#my-form")[0] ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

Comments

[Ninja Mate]

возникает ошибка, не пойму почему
TypeError: Illegal invocation
когда задаю data:
в консоле вижу объект FormData

var fd = new FormData();
    fd.append( 'userfile', $('#userfile')[0].files[0]);
...
      processData: false,
      contentType: false
      data: fd,

[Dmitry Pavlov]

Зачем эта строчка?

fd.append( 'userfile', $('#userfile')[0].files[0]);

[Ninja Mate]

Dmitry Pavlov: stackoverflow.com/questions/5392344/sending-multip... брал здесь или в похожем вопросе, везде так получают FormData

[Ninja Mate]

Спасибо за помощь, с этим не разобрался, но сделал все через wp api