Comments (22)
Need node.js version too
from axios.
maybe try form-data on the node side? like what node-fetch did.
from axios.
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.
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.
👍
from axios.
I'd like to see window.fetch style api for uploads https://github.com/github/fetch#file-upload
from axios.
@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.
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.
After #22 file uploads using FormData should work just fine. There's an usage example in the PR.
from axios.
@nnarhinen Thanks. I'll give it a shot.
from axios.
@nnarhinen @jimthedev #22 takes care of XHR file upload, but still need to handle file upload for node.js
from axios.
@mzabriskie oh yes, that is true
from axios.
really looking forward to the support for uploading file in node.js. any updates?
from axios.
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.
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.
hey...i'm a little confused. is it possible to upload a file from node using axios+streams ?
from axios.
👍 It's good to hear that file uploading will be implemented soon. Thanks for your efforts!
from axios.
I copied this example, and it's working for me.
https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
from axios.
@donaldparker this only work for browser. Do you know how to make it on node.js?
from axios.
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.
This was closed after having the in progress tag removed. Has an alternative been found?
from axios.
@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)
- 0.28 changes params in GET request HOT 2
- whether to use the Fetch API or XHR based on browser support(根据浏览器是否支持fetch API 优先使用fetch来实现请求)
- An error occurred when using the system proxy environment in Linux
- Unable to get the value of Content-Type
- Axios Preventing Constant Contact from running checklist
- Axios request automatically fired a second time after a delay
- Axios sends boundary text even when form data is empty HOT 3
- Progress event does not have lengthComputable property
- test cases fails when the interceptor header exceeds 10 characters
- Form data key of "x-amz-security-token" changes from string key to object {x: { amz: {security: { token: <value> } } } }
- What is the correct version guide of Axios? HOT 2
- SSRF Vulnerability Arising from Axios URL Parsing HOT 3
- Why is the headers attribute of InternalAxiosRequestConfig mandatory?
- Security Vulnerability from follow-redirects HOT 1
- axios V0.28.0 Uncaught ReferenceError: req is not defined at AbortSignal.onCanceled HOT 7
- Network Error in React Native HOT 5
- Axios lib gets detected as a trojan HOT 3
- Can't find variable: axios error thrown on older browser (since v.1.6.8) HOT 1
- Invalid package attestation - 1.6.8 HOT 4
- Axios calculating wrong Content-Length HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from axios.