uploading image to heroku using node and multer not work

Question

I am trying to upload image files to Heroku using Node backend and I can make it work, The same exact process work just fine on Localhost testing but after deploying my project to Heroku and testing it, there is an error in the process and the files wont upload

BACKEND:

let storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './uploads')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })

const upload = multer({storage: storage})


router.post('/', upload.single('carImage') ,(req, res) => {

    console.log(req.file);    
    let todayArr = today.slice(0, 4);

})

FRONT:

  uploadImageToServer = (imagePath, fileName) => {
      const photo = {
        fieldname:'carImage',
        uri: imagePath,
        name: fileName,
        type: 'image/jpeg',
      };
      const data = new FormData();
      data.append('carImage', photo);
      const config = {
        method: 'POST',
        body: data,
      };
      return fetch("https://foo.herokuapp.com/uploadcarimage", config);
    }

      this.uploadImageToServer(this.state.path, `${this.state.car.plate.toString()}-${date.join('-')}.jpg`)
        .then(resp => resp.json())
        .then(json => console.log(json))
        .catch(err => console.log(err))

SERVER ERROR:

 POST /uploadcarimage 500 2172.411 ms - 229
2018-05-28T11:39:53.045824+00:00 heroku[router]: at=info method=GET path="/6866866-Mon-May-28-2018.jpg" host=pure-journey-53428.herokuapp.com request_id=d6f6dfff-af19-4a6f-8f76-a0f14e3f812e fwd="12.34.567.890" dyno=web.1 connect=0ms service=2ms status=404 bytes=368 protocol=https

NOTE:

when trying this exact code only using return fetch("http://localhost:3000/uploadcarimage", config);

it work just fine.

Answer 1

If you uploaded the code with the images folder is empty, then the images folder is not created in the Heroku server. I've solved this issue by just uploaded my code by adding one image or any file inside the images folder. Now it's working fine :)

Note: The multer can't create a folder if the folder doesn't exist, so you need create it first.

Answer 2

I have also got the same problem that same process work just fine on Localhost testing but after deploying my project to Heroku and testing it shows error Access to XMLHttpRequest .....' has been blocked by CORS policy: Request header file x-auth-token is not allowed ' but I have added CORS

So when hit ( heroku logs -t ) in backend Terminal its shows that ' no such file or directory, open '

There's no problem with your code, the matter is that any changes to filesystem last until dyno is shut down or restarted, which means your images are uploaded successfully but when dyno is shut down or restarted Heroku goes back to the filesystem from the most recent deploy. read

store data HEROKU recommend using a database addon such as Postgres (for data) or a dedicated file storage service such as AWS S3 (for static files)

I have use cloudinary + multer to upload images