How to send files with superagent

Question

So about a month ago I asked a question regarding superagent and sending files, but got no response at all. I would still like to find out how to do this as I enjoy using superagent.

I am able to send files using plain ajax:

var fd = new FormData();
        fd.append( 'file', this.refs.File.getDOMNode().files[0] );

        $.ajax({
            url: 'http://localhost:8080/files',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data)
            }
        });

But when I try the same thing in superagent, nothing works:

var fd = new FormData();
fd.append( 'file', this.refs.File.getDOMNode().files[0] );

Request.post('http://localhost:8080/files')
    .set('Content-Type', false)
    .set('Process-Data', false)
    .attach('file', fd, 'file')
    .end((err, res) => {
        console.log(err);
        console.log(res);
    })

Can anyone, please, tell me whats going on.

Photoelasticity

Answer 1

This should work.

var file = this.refs.File.getDOMNode().files[0];


Request.post('http://localhost:8080/files')
    .set("Content-Type", "application/octet-stream")
    .send(file)
    .end((err, res) => {
        console.log(err);
        console.log(res);
    })

Orlene

attach can only be used server side. You need o specify the path of the file as a second parameter, and the browser can't access the filesystem. – Orlene

@CodrinIftimie, your comment is misguiding. "attach" works perfectly well on the front-end side. I've just used "attach" to upload files here on one of my projects. The theoretical implementation is very well explained here: abandon.ie/notebook/simple-file-uploads-using-jquery-ajax. – Plod

@Plod this thread is about superagent, not jquery ajax. superagent's "attach" method is only supported in nodejs. – Preengage

@fisch2, you might want to try and read my comment one more time – Plod

my bad, i was confused as the link didn't have anything to do with the comment and until yesterday superagent's attach+progress didn't work in the browser. huzzah for progress :) – Preengage

Another thing to note: .attach sends the file as multi-part. That works for web-servers but if uploading to S3 or other object stores, you'll need to send the files as .send(file). – Scheer

Answer 2

Attach should work.
Example using express/multer:

client:

superagent.post('http://localhost:3700/upload').attach('theFile',file);

server:

 const storage = multer.memoryStorage();
 const upload = multer({ storage: storage });
 router.post("/upload", upload.single('theFile'), (req, res) => {
   debug(req.file.buffer);
   res.status(200).send( true );
   res.end();
 });

Wholewheat

This works like a charm, and multer helps a lot on the server side. – Lathing

For me, this works well. On the server, I used async-busboy to parse the multiform data. – Milkandwater

Answer 3

To complete previous answers and provide a reference, check this page: https://ladjs.github.io/superagent/#multipart-requests

According to it:

When you use .field() or .attach() you can't use .send() and you must not set Content-Type (the correct type will be set for you).

Edited 01/30/2023: updated source url

Melany

Answer 4

No one asked, but I think this might benefit a few.

Using async/await

describe('My App - Upload Module', function(){
  it('Upload Module - ERROR - upload an expired file', async function(){
    try{
      let res = await _upload_license_file("/tmp/test_license.xml");
    }catch(err){
      err.should.have.status(422);
    }
  });
});

async function _upload_license_file(fileLocation){
  return superAgent.post(base_url + "/upload")
          .set('Authorization', 'Bearer '+API_TOKEN)
          .set('Content-Type', 'multipart/form-data')
          .attach('xml_file', fileLocation)
}

I have worked here the error module, you can process the response object the similar way for pass cases.

Andonis