0

I have a react app where I use react-dropzone-component. When I drop images to it, I send a POST request for each image (in future bulk upload, but one step a time) on a firebase function to process the file and save it in functions local tmp storage. When ever I use remote url, it always fails on cors with Access-Control-Allow-Origin http://localhost:3000. But when I serve the functions locally and use localhost url for the upload function it works.

Express functions for upload:

const storage = multer.diskStorage({
  destination: './tmp/',
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage });

export default () => {
  const app = express();
  app.use(cors(), upload.single('file'), (req, res) => {
    if (req.file) {
      res.send({ path: req.file.path });
    } else {
      res.send({ responseText: 'no file' });
    }
  });
  return app;
};

Also tried to use cors({ origin: true }) and cors({ origin: 'http://localhost:3000' }), but no luck.

The response I get from the function is 'no file' and when I put console.log in it the file is null. On localhost it works as expected.

Mangu
  • 3,160
  • 2
  • 25
  • 42
parohy
  • 2,070
  • 2
  • 22
  • 38
  • You can't write to disk, everything will be destroyed once your functions ends. See https://firebase.google.com/docs/storage/extend-with-functions – Cisco May 18 '18 at 10:40
  • @FranciscoMateo Ok, thats a good point. I could upload the image to storage during the function execution, but still the function cannot access the uploaded image due `Access-Control-Allow-Origin` – parohy May 18 '18 at 10:48
  • I think firebase functions currently does not support multer. See https://stackoverflow.com/questions/47242340/how-to-perform-an-http-file-upload-using-express-on-cloud-functions-for-firebase?noredirect=1&lq=1 @Doug_Stevenson's answer is to use busboy instead. – Tom Nov 27 '18 at 20:21

0 Answers0