2

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.

Cheer Up
  • 53
  • 1
  • 6
  • Does this help https://stackoverflow.com/questions/54519998/upload-multiple-file-with-vue-js-and-axios/54520177 – mk23 Sep 22 '21 at 06:18
  • @mk21: Please review my question. I've just update with some detail. – Cheer Up Sep 22 '21 at 07:17
  • as stated, 500 return code means the server does not know how to handle your request. Maybe the server does not know how to handle binary files? Maybe it is expecting simple strings inside `images[]` as image url? do you have access to server or any documentation of it so that you can verify what the server endpoint is expecting? – mcy Sep 22 '21 at 08:36
  • How can I access to server or any documentation of it? I use XAMPP phpmyadmin for my localhost server. I am trying to find another solution. Is this possible with this way? https://stackoverflow.com/questions/56215357/is-it-not-possible-to-use-formdata-append-in-a-loop/56217038 – Cheer Up Sep 22 '21 at 08:41
  • you are sending your `POST` request to `api/staff/products/store`. Do you own/maintain this api? what does it look like? This address is the one rejecting your request. – mcy Sep 23 '21 at 11:37
  • Yes. This is my API. Sending text is ok, but the problem in sending file. In `api/staff/products/store` controller, I only return the message. If it success it will return the message. That's it – Cheer Up Sep 23 '21 at 12:01
  • I see. do you see any exceptions, errors..etc. on this controller when an upload happens? The thing is the 500 error comes from your server, so the problem most likely lies within this api, not your vue section. It might be a good start to inspect the request within your api `/store` to see if there is anything wrong or misformed – mcy Sep 24 '21 at 07:26
  • @mcy: Thanks man, you direct me to another clue. Now, I am dealing with another solution. I'll inform you later. Huge thanks! – Cheer Up Sep 24 '21 at 07:35
  • np. for server, the most common issue is having errors while trying to save a file due to virtual/physical path issues or permissions. checking for these might help. – mcy Sep 24 '21 at 07:53
  • I've updated the question, please check it out. I decide to separate an image files, so I store that files in `imagesFile` variable. Also, I add `boundary` in this case because I got error message `Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0`. Still, I have an error. `variantsProd` return `null` in controller. I have no idea what's wrong? Also, I cant use `event.target.files[0];` because I need to store array files. – Cheer Up Sep 24 '21 at 15:15
  • @mcy: Seems it's working now. I am using `ajax` instead of `axios`. I will post the answer after everything is okey. – Cheer Up Sep 24 '21 at 16:09

2 Answers2

1

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

Ben Matela
  • 52
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 22 '21 at 06:12
  • Please review my question. I've just update with some detail. – Cheer Up Sep 22 '21 at 07:31
0
 <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.

IQBAL AHMED
  • 61
  • 1
  • 5