Giter Site home page Giter Site logo

Support file uploads about axios HOT 22 CLOSED

axios avatar axios commented on March 29, 2024 3
Support file uploads

from axios.

Comments (22)

dzcpy avatar dzcpy commented on March 29, 2024 6

Need node.js version too

from axios.

stonexer avatar stonexer commented on March 29, 2024 3

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

from axios.

douglasjunior avatar douglasjunior commented on March 29, 2024 2

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)

from axios.

SheldonLaw avatar SheldonLaw commented on March 29, 2024 1

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

from axios.

justinbelcher avatar justinbelcher commented on March 29, 2024

👍

from axios.

esamattis avatar esamattis commented on March 29, 2024

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

from axios.

mzabriskie avatar mzabriskie commented on March 29, 2024

@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.

from axios.

jimthedev avatar jimthedev commented on March 29, 2024

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?

from axios.

nnarhinen avatar nnarhinen commented on March 29, 2024

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

from axios.

jimthedev avatar jimthedev commented on March 29, 2024

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

from axios.

mzabriskie avatar mzabriskie commented on March 29, 2024

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

from axios.

nnarhinen avatar nnarhinen commented on March 29, 2024

@mzabriskie oh yes, that is true

from axios.

luin avatar luin commented on March 29, 2024

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

from axios.

mzabriskie avatar mzabriskie commented on March 29, 2024

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.

from axios.

jimthedev avatar jimthedev commented on March 29, 2024

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.

from axios.

revolunet avatar revolunet commented on March 29, 2024

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

from axios.

dzcpy avatar dzcpy commented on March 29, 2024

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

from axios.

donaldparker avatar donaldparker commented on March 29, 2024

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

from axios.

yunlong-tang avatar yunlong-tang commented on March 29, 2024

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

from axios.

maotora avatar maotora commented on March 29, 2024

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.

from axios.

euroclydon37 avatar euroclydon37 commented on March 29, 2024

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

from axios.

maotora avatar maotora commented on March 29, 2024

@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.

from axios.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.