Ajax image update error!!!

function updateTodo() {
        let category_image = $('#category_image').val();
        let category_icon = $('#category_icon').val();
        let category_name_en = $('#category_name_en').val();
        let category_name_it = $('#category_name_it').val();
        let category_name_tr = $('#category_name_tr').val();
        let id = $('#edit_id').val();
        let _url     = `/admin/categories-update/${id}`;
        let _token   = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            type:'PUT',
            url: _url,
            data: {
                category_image:category_image,
                category_icon:category_icon,
                category_name_en:category_name_en,
                category_name_it:category_name_it,
                category_name_tr:category_name_tr,
                _token:_token,
            },
        });
        }

Hello to everyone; I don't upload image is Everything working fine. But when I select a picture, I get an error.

The error I got on the console:

xhr.send( options.hasContent && options.data || null );

tykus

5 years ago

Level 104

If you're uploading a file using XHR,, use the FormData API:

function updateTodo() {
	let formData = new FormData();
	formData.append('category_image', $('#category_image').prop('files')[0]);
	formData.append('category_icon', $('#category_icon').val());
	formData.append('category_name_en', $('#category_name_en').val());
	formData.append('category_name_it', $('#category_name_it').val());
	formData.append('category_name_tr', $('#category_name_tr').val());
	let id = $('#edit_id').val();
	let _url     = `/admin/categories-update/${id}`;
	let _token   = $('meta[name="csrf-token"]').attr('content');
	$.ajax({
		type:'PUT',
		url: _url,
		data: formData,
	});
}

1 like

caglayantolga35

5 years ago

Level 1

Thank but not working My new code working now correctly

 $('#imageUpload').on('submit',(function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        e.preventDefault();
        let formData = new FormData(this);

        let id = $('#edit_id').val();
        let _url = `/admin/categories-update/${id}`;
        $.ajax({
            type: 'POST',
            url: _url,
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (response) => {
                if (response) {
                    setTimeout(function(){// wait for 5 secs(2)
                        window.location.assign('{{route('categories.view')}}')
                    }, 1000);
                    Swal.fire({
                        position: 'top-end',
                        icon: 'success',
                        title: '{{ Session::get("success") }}',
                        showConfirmButton: false,
                        timer: 1500,
                        width: 350,
                        height: 50,
                    })
                }
            },
            error: function(response){
                console.log(response);
                $('#image-input-error').text(response.responseJSON.errors.file);
            }
        });
    }));

Please or to participate in this conversation.