如何使用AJAX将图像发送到Symfony Controller？

Question

I have sent cropped images to Symfony controllers with AJAX using Symfony 3, however I can't achieve the same using Symfony 4 webpack. I achieved it previously using the on('change') method, however that, along with on('click) and on('submit') don't seem to work.

My code is below:

JavaScript app.js

 Routing.setRoutingData(Routes)
 var routeUrl = Routing.generate('getImage');
 .....................

 $('#upload_btn').on('click', function(){

            var block = getResponse.split(";");
            // Get the content type
            var contentType = block[0].split(":")[1];// In this case "image/gif"
            // get the real base64 content of the file
            var realData = block[1].split(",")[1];// In this case "iVBORw0KGg...."

            // Convert to blob
            var blob = b64toBlob(realData, contentType);

                    let formData = new FormData(form);
                    formData.append('image_path', blob);
                    $.ajax({
                    url: routeUrl,
                    method: 'POST',
                    data:  formdata,
                    contentType: false,
                    cache: false,
                    processData:false,
                    headers: {'X-Requested-With':'XMLHttpRequest'},
                    success:  function(data){

                                  $("#previewImg").attr('src', getResponse);
                }
          });
    });

Symfony Controller

    /**
* @Route("/getImage", name="getImage", methods={"POST"}, options={"expose"=true})
 * @param Request $request
 * @return JsonResponse
 * @Cache(vary={"X-Requested-With"})
*/

public function gteImageAjax(Request $request){


    if($request->isXmlHttpRequest()){

        $event = new Members();

        $form = $this->createForm(EventType::class, $event);
        $form->handleRequest($request);
        /** @var Symfony\Component\HttpFoundation\File\UploadedFile $file */
       // $file = $request->get('image');
        $file = $request->files->get('image_path');

       // $file = new UploadedFile($file['tmp_name'], $file['name'], $file['type']);

        $filename = md5(uniqid()).'.'.$file->guessExtension();

        $file->move($this->getParameter('image_directory'), $filename);

        $event->setImage($filename);  
        $em = $this->getDoctrine()->getManager(); 
        $em->persist($event);

        $em->flush();

        return $this->redirectToRoute('createEvent');
    }

    return new JsonResponse("This is not Ajax");
 }

To clarify I want to send the cropped image to my symfony controller using AJAX. Any help will be appreciated.

Answer 1

Give your form to FormData, specifying the data or not

// whole form    
let formData: new FormData($(form)[0]);

//specifying
var formData = new FormData();
formData.append('category', 'general');

// file
var blob = $('input[type=file]')[0].files[0]);
formData.append('image_path', blob);

//send the request via AJax
$.ajax({
    url: routeUrl,
    data: formData,
    type: 'POST',
    contentType: false, // requires jQuery 1.6+
    processData: false, // required
    cache: false,
    success:  function(data){

    $("#previewImg").attr('src', getResponse);
    }
});

You're doing good, just check your var formData in your ajax request, you are declaring formData and sending formdata

change this

data:  formdata,

to this

data: formData,