4

I'm facing issues for uploading local images to my google cloud storage.

I've already tried two methods. The first one is uploading with multer

var storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, './uploads/')
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now())
    }
});
var upload = multer({storage: storage}).single('image'); 

app.post('/upload',function(req,res,next){
  upload(req,res,(err) => {
    if(err){
      console.log(err)
    }else{
      console.log(req.file)
    }
  })

})

Then, i've tried directly with GCS

var bucket = admin.storage().bucket('mybucket')
app.post('/upload',function(req,res,next){
 bucket
.save(file)
.then(() => {



})

for both of these solutions , req.files is always undefined whereas req.body is a buffer like this :

<Buffer 2d 2d 2d 2d ...>

when i try to save this buffer on my GCS bucket, i the .jpg/png file is created in my bucket but it is corrupted.

I'm browsing the web seeking for a solution but i found nothing that helped me to overcome this situation.

Any advice ?

Artemis Georgakopoulou
  • 1,171
  • 4
  • 12
John doe
  • 3,680
  • 7
  • 31
  • 65
  • When using multer, make sure the storage engine is set up for the storage system you want to upload to. [You can try this one for Google Cloud Storage](https://www.npmjs.com/package/multer-google-storage ) – mgoya Dec 03 '18 at 17:14

2 Answers2

5

You need multer, multer-google-storage and ofcourse bodyParser if you have additional form values. You need to sent data in multipart/form-data

In your .env file 

GCS_BUCKET = <bucket name>
GCLOUD_PROJECT = <project id>
GCS_KEYFILE = <key file location>

You can download key file from GCP Console>Your Project>I AM & Admin>Service Accounts

In your route

const multer = require('multer');
const multerGoogleStorage = require("multer-google-storage");

var uploadHandler = multer({
  storage: multerGoogleStorage.storageEngine()
});

router.post('/', uploadHandler.single('image'), function (req, res, next) {
  const body = req.body;
  res.json({fileName: req.file.filename});
  res.end();

}

This will store file on to GCS with name [random-string-generated-by-gcs]_[YOUR FILE NAME WITH EXTENTION]. The same can be access under the route via req.file.filename.

Documentation

Anees Hameed
  • 5,916
  • 1
  • 39
  • 43
  • Hi, does it know alone that the GCS keys etc. are in dotenv file ? Because I have an error : EISDIR: illegal operation on a directory – Yoël Zerbib Jan 07 '21 at 15:09
  • Its documented here https://www.npmjs.com/package/multer-google-storage#default-method. The error that you are facing is not related to Google cloud storage. Is something else with npm https://stackoverflow.com/questions/34959038/npm-stuck-giving-the-same-error-eisdir-illegal-operation-on-a-directory-read-a – Anees Hameed Jan 07 '21 at 16:50
  • Hi brother @imjoymhnt, I am the same person who gave the answer and added the comment. The answer has 4 upvotes. The answer has the answer... :) – Anees Hameed Nov 27 '21 at 08:54
  • Can you please tell me where to pass the credentials like project id, bucket name, key file etc. I don't want to store them in my system environment. So is there any other solution? bcz you haven't pass any credential here. – imjoymhnt Nov 27 '21 at 09:36
0

Make sure you have added enctype="multipart/form-data" attribute to your form. A probable reason for req.files being undefined.

simmmplyAmit
  • 329
  • 2
  • 3