Sending files in Reactjs Dropzone using multipart/form-data
I am working on an React application using a Dropzone npm package, which allows users to select multiple files. I would need to send these files as a multipart/form-data to my web service.
I don't have Form to post the data, I am using the an Ajax post request to send files to my WCF service.
I have configured the WCF to receive files as stream and I can successfully send files via PostMan as form-data in the body. But just trying to figure out how I can send my Dropzone files as multipart/form-data in the react app.
Any input would be appreciated.
javascript reactjs react-native dropzone.js react-dropzone
asked Nov 20 at 7:18
theITvideos
58411024
add a comment |
I am working on an React application using a Dropzone npm package, which allows users to select multiple files. I would need to send these files as a multipart/form-data to my web service.
I don't have Form to post the data, I am using the an Ajax post request to send files to my WCF service.
I have configured the WCF to receive files as stream and I can successfully send files via PostMan as form-data in the body. But just trying to figure out how I can send my Dropzone files as multipart/form-data in the react app.
Any input would be appreciated.
javascript reactjs react-native dropzone.js react-dropzone
asked Nov 20 at 7:18
theITvideos
58411024
add a comment |
I am working on an React application using a Dropzone npm package, which allows users to select multiple files. I would need to send these files as a multipart/form-data to my web service.
I don't have Form to post the data, I am using the an Ajax post request to send files to my WCF service.
I have configured the WCF to receive files as stream and I can successfully send files via PostMan as form-data in the body. But just trying to figure out how I can send my Dropzone files as multipart/form-data in the react app.
Any input would be appreciated.
javascript reactjs react-native dropzone.js react-dropzone
asked Nov 20 at 7:18
theITvideos
58411024
I am working on an React application using a Dropzone npm package, which allows users to select multiple files. I would need to send these files as a multipart/form-data to my web service.
I don't have Form to post the data, I am using the an Ajax post request to send files to my WCF service.
I have configured the WCF to receive files as stream and I can successfully send files via PostMan as form-data in the body. But just trying to figure out how I can send my Dropzone files as multipart/form-data in the react app.
Any input would be appreciated.
javascript reactjs react-native dropzone.js react-dropzone
javascript reactjs react-native dropzone.js react-dropzone
asked Nov 20 at 7:18
theITvideos
58411024
asked Nov 20 at 7:18
theITvideos
58411024
asked Nov 20 at 7:18
theITvideos
58411024
asked Nov 20 at 7:18
theITvideos
58411024
asked Nov 20 at 7:18
theITvideos
58411024
58411024
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I don't have Form to post the data
Why not? As shown in the docs here you need to create a basic form like:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
<input type="file" name="file" />
</form>
In case you create Dropzone programmatically, that should already be present.
Having that, sending the Files via Ajax is easy, since all you need to do is:
//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));
fetch(<url>, {
method: 'POST',
body: fd
}).then(function (response) {
//...
});
as shown here. Not using a <form> cannot work, since you do not have a <input type="file" /> to give the user the opportunity to select files. Not taking advantage of using FormData is possible, but since that is complicated and error-prone, the FormData API was introduced.
That said, all you need to do is add event listener(s) to the dropzone object and do what is need to be done.
The simplest form to perform an React Integratio is to use componentDidMount() and componentWillUnmount() lifecycle methods to create and destroy the dropzone object. The needed form can be created within the render() method or, when used programmatically, with the callback of a ref.
answered Nov 20 at 7:51
philipp
8,63643568
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388023%2fsending-files-in-reactjs-dropzone-using-multipart-form-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I don't have Form to post the data
Why not? As shown in the docs here you need to create a basic form like:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
<input type="file" name="file" />
</form>
In case you create Dropzone programmatically, that should already be present.
Having that, sending the Files via Ajax is easy, since all you need to do is:
//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));
fetch(<url>, {
method: 'POST',
body: fd
}).then(function (response) {
//...
});
as shown here. Not using a <form> cannot work, since you do not have a <input type="file" /> to give the user the opportunity to select files. Not taking advantage of using FormData is possible, but since that is complicated and error-prone, the FormData API was introduced.
That said, all you need to do is add event listener(s) to the dropzone object and do what is need to be done.
The simplest form to perform an React Integratio is to use componentDidMount() and componentWillUnmount() lifecycle methods to create and destroy the dropzone object. The needed form can be created within the render() method or, when used programmatically, with the callback of a ref.
answered Nov 20 at 7:51
philipp
8,63643568
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
add a comment |
I don't have Form to post the data
Why not? As shown in the docs here you need to create a basic form like:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
<input type="file" name="file" />
</form>
In case you create Dropzone programmatically, that should already be present.
Having that, sending the Files via Ajax is easy, since all you need to do is:
//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));
fetch(<url>, {
method: 'POST',
body: fd
}).then(function (response) {
//...
});
as shown here. Not using a <form> cannot work, since you do not have a <input type="file" /> to give the user the opportunity to select files. Not taking advantage of using FormData is possible, but since that is complicated and error-prone, the FormData API was introduced.
That said, all you need to do is add event listener(s) to the dropzone object and do what is need to be done.
The simplest form to perform an React Integratio is to use componentDidMount() and componentWillUnmount() lifecycle methods to create and destroy the dropzone object. The needed form can be created within the render() method or, when used programmatically, with the callback of a ref.
answered Nov 20 at 7:51
philipp
8,63643568
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
add a comment |
I don't have Form to post the data
Why not? As shown in the docs here you need to create a basic form like:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
<input type="file" name="file" />
</form>
In case you create Dropzone programmatically, that should already be present.
Having that, sending the Files via Ajax is easy, since all you need to do is:
//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));
fetch(<url>, {
method: 'POST',
body: fd
}).then(function (response) {
//...
});
as shown here. Not using a <form> cannot work, since you do not have a <input type="file" /> to give the user the opportunity to select files. Not taking advantage of using FormData is possible, but since that is complicated and error-prone, the FormData API was introduced.
That said, all you need to do is add event listener(s) to the dropzone object and do what is need to be done.
The simplest form to perform an React Integratio is to use componentDidMount() and componentWillUnmount() lifecycle methods to create and destroy the dropzone object. The needed form can be created within the render() method or, when used programmatically, with the callback of a ref.
answered Nov 20 at 7:51
philipp
8,63643568
I don't have Form to post the data
Why not? As shown in the docs here you need to create a basic form like:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
<input type="file" name="file" />
</form>
In case you create Dropzone programmatically, that should already be present.
Having that, sending the Files via Ajax is easy, since all you need to do is:
//create a FormData Object
//that will care about all
//the mimetypes etc
const fd = new FormData(document.getElementById('my-awesome-dropzone'));
fetch(<url>, {
method: 'POST',
body: fd
}).then(function (response) {
//...
});
as shown here. Not using a <form> cannot work, since you do not have a <input type="file" /> to give the user the opportunity to select files. Not taking advantage of using FormData is possible, but since that is complicated and error-prone, the FormData API was introduced.
That said, all you need to do is add event listener(s) to the dropzone object and do what is need to be done.
The simplest form to perform an React Integratio is to use componentDidMount() and componentWillUnmount() lifecycle methods to create and destroy the dropzone object. The needed form can be created within the render() method or, when used programmatically, with the callback of a ref.
answered Nov 20 at 7:51
philipp
8,63643568
edited Nov 20 at 8:11
answered Nov 20 at 7:51
philipp
8,63643568
answered Nov 20 at 7:51
philipp
8,63643568
answered Nov 20 at 7:51
philipp
8,63643568
8,63643568
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
add a comment |
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
Thank you for the reply. In my react .tsx file, although there is no <form> tag being using, I am using dropzone component like this: <Dropzone onDrop={this.onDrop.bind(this)} > <p>drop files here</p> </Dropzone> and it does generate an <input type="file" /> tag upon page render. Could I use data from this input tag and use in the FormData.append() method?
– theITvideos
Nov 20 at 22:04
1
1
YES. That should work as well…
– philipp
Nov 21 at 7:18
YES. That should work as well…
– philipp
Nov 21 at 7:18
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388023%2fsending-files-in-reactjs-dropzone-using-multipart-form-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
