Support file uploads

[kentcdodds]

As suggested by @geddski. See docs for superaget's api here

[justinbelcher]

👍

[esamattis]

I'd like to see window.fetch style api for uploads https://github.com/github/fetch#file-upload

[mzabriskie]

@epeli this is what I had in mind as well. Only difference is that it would be data instead of body since axios is already using data as the post body property.

[jimthedev]

This would be a fantastic feature. Since there is a polyfill already for fetch would it be a matter of adding a mapping for the property difference?

[nnarhinen]

After #22 file uploads using FormData should work just fine. There's an usage example in the PR.

[jimthedev]

@nnarhinen Thanks. I'll give it a shot.

[mzabriskie]

@nnarhinen @jimthedev #22 takes care of XHR file upload, but still need to handle file upload for node.js

[nnarhinen]

@mzabriskie oh yes, that is true

[luin]

really looking forward to the support for uploading file in node.js. any updates?

[mzabriskie]

Just a status update. I've looked into supporting file uploads with node.js. While it's not technically challenging, I'm trying to come up with a consistent API between node.js and the browser. While the browser uses FormData, node.js uses a Stream. For axios to be truly isomorphic it should allow using the same code in both environments.

[jimthedev]

Makes sense. It doesn't seem like there is any single standards-based or deprecated-standards based API for this, but there is flow.js (a fork of resumeablejs) which might provide at least a proven, successful API as a model. Although it looks primarily browser based, they seem to have a Node example although there is an ambiguous open issue about it.

[revolunet]

hey...i'm a little confused. is it possible to upload a file from node using axios+streams ?

[dzcpy]

👍 It's good to hear that file uploading will be implemented soon. Thanks for your efforts!

[stonexer]

maybe try form-data on the node side? like what node-fetch did.

[donaldparker]

I copied this example, and it's working for me.
https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

[yunlong-tang]

@donaldparker this only work for browser. Do you know how to make it on node.js?

[dzcpy]

Need node.js version too

[maotora]

Hi, I'm trying to upload a file from it's filename instead of uploading it as form-data using Electron.

I tried both the node.js solution & browser solution but both don't really workout as I get [object Object] as the file request on the server.

This is a sample code of what I'm doing ...

Getting the file from it's fileName Url.

export function generateContract(url, customer) {
    const data = new FormData()
    const file = fs.createReadStream(url)

    data.append('names', customer.names)
    data.append('email', customer.email)
    data.append('contract', file)
    const headers = data.getHeaders()

    return {data, headers}
}

Sending the returned formData using axios.

export function sendEmail({data, headers}) {
    return checkConnetion()
        .then(() => {
            return axios.post(emailUrl, data, {headers})
        })
        .catch(() => {
            return axios.post(emailUrlOffline, data, {headers})
        })
}

I also made this question on stackoverflow if someone can take a look.

EDIT

I wasn't placing form.getHeaders() in headers field on my post requests.

Now I'm doing it and I'm getting this error on the server instead.

  Error: MultipartParser.end(): stream ended unexpectedly: state = START_BOUNDARY
      at MultipartParser.end (/home/user/Projects/Electron/Mijengo/server/node_modules/formidable/lib/multipart_parser.js:326:12)
      at IncomingMessage.<anonymous> (/home/user/Projects/Electron/Mijengo/server/node_modules/formidable/lib/incoming_form.js:130:30)
      at emitNone (events.js:105:13)
      at IncomingMessage.emit (events.js:207:7)
      at endReadableNT (_stream_readable.js:1059:12)
      at _combinedTickCallback (internal/process/next_tick.js:138:11)
      at process._tickCallback (internal/process/next_tick.js:180:9)

Thanks.

[euroclydon37]

This was closed after having the in progress tag removed. Has an alternative been found?

[maotora]

@euroclydon37 I couldn't solve my issue.

So I ended up using superagent for just one request! I had deadlines to meet so I gave the evil smile & went for it.

I will be glad to hear a solution, will update my program if I can test and make it work.

[douglasjunior]

I made it work with FormData.

        // create the file object: https://developer.mozilla.org/en-US/docs/Web/API/File
        const file = {
            lastModifiedDate: ...,
            lastModified: ...,
            name: ...,
            size: ...,
            type: ...,
            uri: 'file:///path/to/file.txt', // required value
        };

        // create FormData
        const formData = new FormData();
        formData.append('field_name', file);

        // send with axios
        axios.post('http://your/url/', formData);

(Works on Node and React Native)

[SheldonLaw]

As mentioned above

I made it work with FormData.

        // create the file object: https://developer.mozilla.org/en-US/docs/Web/API/File
        const file = {
            lastModifiedDate: ...,
            lastModified: ...,
            name: ...,
            size: ...,
            type: ...,
            uri: 'file:///path/to/file.txt', // required value
        };

        // create FormData
        const formData = new FormData();
        formData.append('field_name', file);

        // send with axios
        axios.post('http://your/url/', formData);

(Works on Node and React Native)

It take some time to understand how to create file object, and I finally made it work:

const file = new File(
    [fs.readFileSync(YOUR_FILE_PATH)],
    fileName,
    { type: `image/${fileType}` } // what I upload is image.
  );

Thanks @douglasjunior