Upload the image and save it in public folder in NuxtJs

Question

How to let users upload img and store it in public folder?

I'm making simple application that enables the user (restaurant manager) to insert new foods and their images.

I let the user upload an img using a form, and I need to save it in the public folder of the Nuxt project.

Food information is inserted via $fecth and POST methods, then extracted from POST and inserted into the database

INSERT INTO menu (food_name, price, course ) 
        VALUES (?, ?, ?)`,
[plateName, platePrice, course]

FORM:
<input class="form-control" type="file" v-on:change="uploadImg()" id="formFile">
<label for="formFile" class="form-label">Add Image</label>

methods {
    uploadImg(){

        ???

    },
    addFood() {
      $fetch("/api/insert/", {
        method: "POST",
        body: {
            plateName: this.plateName,
            platePrice: this.platePrice,
            course: this.plateSelect,
            }
      })
      .then(() => window.location.href = "/inserimento")
      .catch((e) => alert(e))

    },

Answer 1

This is not a viable solution as end users may behave maliciously and send spam queries. So, overfill your server and crash it or fill up the entire disk.

The bottom line is that it won't be optimized, served properly or anything else (no bundling step).
Instead, I recommend that you upload it to some backend, optimize it (this can be done using a service like Cloudinary) and host it on AWS S3 or similar (preferably on a CDN).

This is a more scalable, secure and durable solution.