Multer not saving file as file

Question

I have setup multer as middleware on a route. When that route is hit, multer doesn't download the file. This is what console.log reports:

{ firstname: 'foo',
  lastname: 'foo',
  username: 'foo10',
  password: 'test1234',
  file: '/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAAB.....

}

I have the following setup for multer:

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null,  '../images/profile');
  },
  filename: function(req, file, cb) {
    cb(null, req.body.username + '.jpeg');
  }
});

var upload = multer({storage: storage});

router.post('/auth/signup', upload.single('file'), function(req,res) {
  console.log(req.body);
});

So the issue is that instead of saving the file as a file it simply treats it as another key-value pair in the form.

To clarify further, i obtain this image from cordova API: http://ionicframework.com/docs/v2/native/camera/

import { Camera } from 'ionic-native';

Camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64:
   let base64Image = 'data:image/jpeg;base64,' + imageData;

   let formData: FormData = new FormData(),
        xhr: XMLHttpRequest = new XMLHttpRequest();     
        formData.append("file", base64Image);

        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                observer.next(JSON.parse(xhr.response));
                observer.complete();
            } else {
                observer.error(xhr.response);
            }
          }
        };
      xhr.open('POST', 'http://localhost:8080/auth/signup', true);
      xhr.send(formData); 

}, (err) => {
 // Handle error
});

I don't get it? You are trying to save a file and it isn't working properly? what is happening? — Gandalf the White, Aug 04 '16 at 15:02
That looks like a Base64-encoded JPEG. Are you sure your client-side code is uploading the form data properly? — robertklep, Aug 04 '16 at 15:51
@robertklep yes.. i guess it is base64.. so what is wrong about that ? — runtimeZero, Aug 04 '16 at 15:54
Can you add the code that you're using to upload the data? Are you using [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) or something? The Base64 suggests that you may not be adding a `File` field. — robertklep, Aug 04 '16 at 15:58
@robertklep ..code I am utilizing to transmit is added up. As far as I understand, the 'file' field is like any other field in form-data — runtimeZero, Aug 04 '16 at 16:16
@runtimeZero check out [this answer](http://stackoverflow.com/a/5100158/893780) to convert `base64Image` to a `Blob` (and subsequently add it to a `FormData` instance). I think that right now, the image is transferred as a regular string, so `multer` thinks it's a simple form field and not a file. — robertklep, Aug 04 '16 at 16:23
@robertklep if you can place your comment as a "answer", I can mark it so — runtimeZero, Aug 04 '16 at 17:25

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

The file data is being uploaded as a Base64 string, which suggests that it's not being uploaded as a proper File form data field. That's why multer treats it as a regular field, and doesn't attempt to save it to a file.

In this answer, some client side code is presented to handle data-URI strings (like base64Image) to the right format to upload to the server.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 04 '16 at 17:31

robertklep

198,204
35
394
381

Multer not saving file as file

1 Answers1