CODEWITHSUNDEEP
javascriptvue.jsaxios
Cheer Up
Cheer Up

Reputation: 53

500 (Internal Server Error) when sending file using Axios

I am trying to send file using Axios in Laravel and Vuejs. All the data stored in variantsProd variable below:

data() {
    return {
        form: new Form({
            variantsProd: [],
            imagesFile: [],
        }),
        
    };
},

The variantsProd contains below data: enter image description here

The problem is in imagesFile attribute. It's contain a file. If I keep imagesFile with empty value [] it's working, all data can be sent. But if I attach an image/s, I always get 500 (Internal Server Error). I have no idea why does this happens?

 let getImg = [];
        this.form.variantsProd.forEach((item) => {
            let totalImagesFile = $('.images' + item.id)[0].files.length; //Total Images
            let imagesFile = $('.images' + item.id)[0];
            for (let i = 0; i < totalImagesFile; i++) {
                getImg.push(imagesFile.files[i]);
            }
            //this.imagesFile = getImg;
            this.form.imagesFile = getImg;
        });

        this.form
            .post('api/staff/products/store', {
                header: {
                    'Content-Type': 'content-type':
                        'multipart/form-data; boundary=---------------------------974767299852498929531610575',
                },
            })
            .then((response) => {
                console.log(response);
                if (this.form.isVariantExists > 0) {
                    this.validateVariants(response);
                } else {
                    this.$router.push({ name: 'products-index' });
                    this.showSuccessMsg(response);
                }
            })
            .catch((error) => {
                console.log(error);
                swal.fire({
                    icon: 'error',
                    title: 'Oouch...',
                    text: 'Something went wrong! Make sure you input the valid data!',
                    footer: '<a href>Why do I have this issue?</a>',
                });
            })
            .finally(() => {
                $('#loadingButton').attr('disabled', false);
                $('.proc-regis').remove();
                $('#loadingButton').html(`Save`);
            });

FYI: I am using bootstrap-fileinput in this case.

Upvotes: 2

Views: 4797

Answers (2)

Ben Matela
Ben Matela

Reputation: 72

Error 500 means that the server doesn't know how to process your request. Make sure your request matches the format the server expects.

Upvotes: 1

IQBAL AHMED
IQBAL AHMED

Reputation: 61

 <input type="file" ref="identity_card" />
 let identity_card = this.$refs.identity_card.files[0];
 form.append("identity_card_image", identity_card);
       axios.post(`api_url`, form)
         .then(response => {
       })

You can try it.

Upvotes: 0

Related Questions