GithubHelp home page GithubHelp logo

Comments (2)

BeinRain06 avatar BeinRain06 commented on June 26, 2024

I bump into the same issue using pinia store for input file

I manage rewritng a ref() input (called inputFile) with <script setup></script> and set the name of the input in <template></template>tag as name="file"

here is what i have done in front end app :

`<template>
  <div class="form_control">
            <label for="image">Image</label>
            <input
              type="file"
              id="image"
              name="file" // <-- here
              accept="image/png, image/jpeg, image/webp"
              ref="inputFile" // <-- here
            />
  </div>

</template>`

script

`<script setup>
  import { ref } from 'vue'

  const inputFile = ref(null) <-- Here

  async function createPost() {
    const myInputFile = inputFile.value  //reactivity fundamentals

    //send img post
  const image = await primarimageapi(myInputFile)
  }
</script>`

On the api function primarimageapi i make this:

`export const primarimageapi = async (myInputFile) => {
  try {
    const file = myInputFile.files[0]   <--   Here File Grabbed

    //formData instance
    const formData = new FormData()

    //add element
    formData.append('file', file)

    const prePostImg = await fetch(`${base_url}/post/image/create`, {
      method: 'POST',
      body: formData
    })
      .then((res) => res.json())
      .then((newres) => newres.image_url)

      return prePostImg
   } catch (err) {
    console.log(err)}}`

my blog-app three elements
was organized like below:

`blog*app --|
            |
            |* \_ _client
            |
            |
            |_ \_ _server
            |
            |_ _src
                  |
                  |_ _public
                  | |
                  | |_ _images
                  |
                  |
                  |_ _routes
                            |
                            |_ \_post-routes.js (file)`

In post-route.js file i wrote this :

//multer

`const storage = multer.diskStorage({destination: function (req, file, callback) {
callback(null, path.join(__dirname, "../public/images"));
},
filename: function (req, file, callback) {
const filename = `${file.fieldname}_${Date.now()}${path.extname(
  file.originalname
)}`;

callback(null, filename);},
})

const upload = multer({
  storage: storage,
  limits: { fileSize: 1000000 },
  });
`

//middleware destination image - express

`router.use(`/images`, express.static(path.join(__dirname, "../public/images")))`

//router

`router.post("/image/create", upload.single("file"), (req, res) => {
  try {
    const base_url = process.env.API_URL;

    res.status(200).json({
      success: true,
      image_url: `/${base_url}/images/${req.file.filename}`,
    });
    } catch (err) {
      console.log(err);
      }
 })`

then i obtain inside src/public/images my first image : file_1717587794699.jpg

from multer.

sooooooooooooooooootheby avatar sooooooooooooooooootheby commented on June 26, 2024

Looking your code, I found that the problem was in my middleware.
now, The problem was solved. thank you and your code.

from multer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.