Uploading image from nuxt to strapi

Questions and Answers
1
System Information
  • 3.1.4:
  • windows:
  • mongoDB:
  • 12.18.3:
  • 6.14.6:

I have a project that I need Users to add 10 pictures from frontend(nuxt) to their profile as their id but in 10 deferent fields (single pictures) . and I want the old picture to be deleted when they add a picture to the same field again . i’m using axios to post that image from frontend like so

handleFileUpload(){
        this.file = this.$refs.file[0];
        
    },
    async upload(){
        if (process.browser) {
            let formData = new FormData();
            formData.append('file', this.file);
            await Axios.post ("http://localhost:1337/upload",
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            }
        )}
    },

im sure this.file has been set to the right value coz i 'console.log’ed maby something is wrong with my api request . im getting a 400 bad request with a message of

errors: [{ id: ‘Upload.status.disabled’, message: ‘File upload is disabled’ }]

2

Hello, seems that your file upload is disabled inside plugins config.
Can you check in ./config/plugins.js or in ./config/env/{{env}}/plugins.js, it should be enabled:

module.exports = ({ env }) => ({
  upload: {
    //...
    enabled: true,
    //...
  },
});
3

hi im so sorry i accidently pasted the wrong err
errors: [{ id: 'Upload.status.empty', message: 'Files are empty' }],
this is the error im receiving . i dont think its a sever error or something like a 403 forbiden . this is the code i saw in strapi-plugin-upload/controllers/upload.js the error is coming from here and something is wrong with my api request but i dont know what

if (_.isEmpty(files) || files.size === 0) { throw strapi.errors.badRequest(null, { errors: [{ id: 'Upload.status.empty', message: 'Files are empty' }], }); }

and console.log(this.file) gives me

  1. File {name: “404-2.png”, lastModified: 1605551263377, lastModifiedDate: Mon Nov 16 2020 10:27:43 GMT-0800 (Pacific Standard Time), webkitRelativePath: “”, size: 318110, …}
  1. lastModified: 1605551263377
  2. lastModifiedDate: Mon Nov 16 2020 10:27:43 GMT-0800 (Pacific Standard Time) {}
  3. name: “404-2.png”
  4. size: 318110
  5. type: “image/png”
  6. webkitRelativePath: “”
  7. proto: File
1. lastModified: 1605551263377
2. lastModifiedDate: Mon Nov 16 2020 10:27:43 GMT-0800 (Pacific Standard Time)
3. name: "404-2.png"
4. size: 318110
5. type: "image/png"
6. webkitRelativePath: (...)
7. constructor: ƒ File()
8. Symbol(Symbol.toStringTag): "File"
9. get lastModified: ƒ lastModified()
10. get lastModifiedDate: ƒ lastModifiedDate()
11. get name: ƒ name()
12. get webkitRelativePath: ƒ webkitRelativePath()
13. __proto__: Blob
4

got it the problem was from this part (FILES, this.file) not file, this.file