knubbe
2 months ago

How to add a file to serializeArray

Posted 2 months ago by knubbe

I have a wizard with different forms on every step. In one of the steps I have cropper for images and on next step I want to send crop data to controller method but I can't add that to serializeArray. This is my js part:

wizard.on('beforeNext', function (wizardObj) {
	wizardObj.stop();
        let wizardForm = $('#kt_form_' + wizardObj.currentStep)
        let dataForm = wizardForm.serializeArray()
        if (wizardObj.currentStep == 2) {
        	canvas = cropper.getCroppedCanvas({
                	width: 160,
                        height: 160,
                });
               canvas.toBlob(function (blob) {
                       url = URL.createObjectURL(blob);
                       var reader = new FileReader();
                       reader.readAsDataURL(blob);
                       reader.onloadend = function () {
                       		var base64data = reader.result;
                                dataForm.push({ name: "cropImage", value: base64data });
                            }
                       });
               }

              let url = wizardForm.attr('action')
              let method = wizardForm.attr('method')
              $.ajax({
                   url: url,
                   type: method,
                   data: dataForm,
              }).done(function (response) {
                    wizardObj.goNext();
              })

When I console log a dataForm I see that I have cropImage attribute but on controller method it's not part of request when I dd($request->all())

Please sign in or create an account to participate in this conversation.