Pass prop in input type file
I'm trying to implement a dowload and upload of files in react js. I'm having a problem taking a prop that I need.
<input
className="inputfile"
type="file"
id="file"
name="file"
onChange={event =>
this.handleUploadFile(event, numeroOfferta)
}
/>
<label for="file">
<i class="fa fa-upload" /> Carica File
</label>
Here I call the method that handle the data received from the input, in the end it calls axios and i make a simple GET call.
handleUploadFile = (event, numeroOfferta) => {
let file = new FormData();
file.append("file", event.target.files[0]);
console.log(file);
let name = event.target.files[0];
//calling async Promise and handling response or error situation
if (file === null) {
toast("scegli un file");
} else {
this.props.uploadTemplate(file, numeroOfferta, name);
}
};
After Render I call all the props so I can use them without writing this.props everytime. the props come from App.js and i receive them an array that i populate with a axios Get call to the backend(which is spring JPA) that takes the data from the database.
let {
id,
numeroOfferta,
accordo,
commerciale,
rifOffertaEsterno,
figureList,
descrizione,
tipoOfferta,
statoOfferta,
dataInizio,
dataFine,
delivery,
dataEmissione,
revisione,
cliente,
portafoglio,
imponibileTotale,
sconto
// giorniTotali
} = this.props.offerta;
As you can see on change I call a method that send to the axios call the props I need. The event is always right but I need to download or upload a file from a folder that has the name that I want. When I try to take the "numeroOfferta", that is a number, react takes the value of the first line of the table(I open a modal that has the id with the numeroOfferta so i can take all the props of that line). I have this problem only in the input type file.
Thank you for every answer.
reactjs input axios
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
add a comment |
I'm trying to implement a dowload and upload of files in react js. I'm having a problem taking a prop that I need.
<input
className="inputfile"
type="file"
id="file"
name="file"
onChange={event =>
this.handleUploadFile(event, numeroOfferta)
}
/>
<label for="file">
<i class="fa fa-upload" /> Carica File
</label>
Here I call the method that handle the data received from the input, in the end it calls axios and i make a simple GET call.
handleUploadFile = (event, numeroOfferta) => {
let file = new FormData();
file.append("file", event.target.files[0]);
console.log(file);
let name = event.target.files[0];
//calling async Promise and handling response or error situation
if (file === null) {
toast("scegli un file");
} else {
this.props.uploadTemplate(file, numeroOfferta, name);
}
};
After Render I call all the props so I can use them without writing this.props everytime. the props come from App.js and i receive them an array that i populate with a axios Get call to the backend(which is spring JPA) that takes the data from the database.
let {
id,
numeroOfferta,
accordo,
commerciale,
rifOffertaEsterno,
figureList,
descrizione,
tipoOfferta,
statoOfferta,
dataInizio,
dataFine,
delivery,
dataEmissione,
revisione,
cliente,
portafoglio,
imponibileTotale,
sconto
// giorniTotali
} = this.props.offerta;
As you can see on change I call a method that send to the axios call the props I need. The event is always right but I need to download or upload a file from a folder that has the name that I want. When I try to take the "numeroOfferta", that is a number, react takes the value of the first line of the table(I open a modal that has the id with the numeroOfferta so i can take all the props of that line). I have this problem only in the input type file.
Thank you for every answer.
reactjs input axios
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
1
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
It would be helpful if you could include more of the context around the example you have shown. If the problem is thatnumeraOffertais always the first value of a table, you should show the code wherenumeraOffertais initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.
– Tyler
Nov 15 '18 at 11:00
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05
add a comment |
I'm trying to implement a dowload and upload of files in react js. I'm having a problem taking a prop that I need.
<input
className="inputfile"
type="file"
id="file"
name="file"
onChange={event =>
this.handleUploadFile(event, numeroOfferta)
}
/>
<label for="file">
<i class="fa fa-upload" /> Carica File
</label>
Here I call the method that handle the data received from the input, in the end it calls axios and i make a simple GET call.
handleUploadFile = (event, numeroOfferta) => {
let file = new FormData();
file.append("file", event.target.files[0]);
console.log(file);
let name = event.target.files[0];
//calling async Promise and handling response or error situation
if (file === null) {
toast("scegli un file");
} else {
this.props.uploadTemplate(file, numeroOfferta, name);
}
};
After Render I call all the props so I can use them without writing this.props everytime. the props come from App.js and i receive them an array that i populate with a axios Get call to the backend(which is spring JPA) that takes the data from the database.
let {
id,
numeroOfferta,
accordo,
commerciale,
rifOffertaEsterno,
figureList,
descrizione,
tipoOfferta,
statoOfferta,
dataInizio,
dataFine,
delivery,
dataEmissione,
revisione,
cliente,
portafoglio,
imponibileTotale,
sconto
// giorniTotali
} = this.props.offerta;
As you can see on change I call a method that send to the axios call the props I need. The event is always right but I need to download or upload a file from a folder that has the name that I want. When I try to take the "numeroOfferta", that is a number, react takes the value of the first line of the table(I open a modal that has the id with the numeroOfferta so i can take all the props of that line). I have this problem only in the input type file.
Thank you for every answer.
reactjs input axios
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
I'm trying to implement a dowload and upload of files in react js. I'm having a problem taking a prop that I need.
<input
className="inputfile"
type="file"
id="file"
name="file"
onChange={event =>
this.handleUploadFile(event, numeroOfferta)
}
/>
<label for="file">
<i class="fa fa-upload" /> Carica File
</label>
Here I call the method that handle the data received from the input, in the end it calls axios and i make a simple GET call.
handleUploadFile = (event, numeroOfferta) => {
let file = new FormData();
file.append("file", event.target.files[0]);
console.log(file);
let name = event.target.files[0];
//calling async Promise and handling response or error situation
if (file === null) {
toast("scegli un file");
} else {
this.props.uploadTemplate(file, numeroOfferta, name);
}
};
After Render I call all the props so I can use them without writing this.props everytime. the props come from App.js and i receive them an array that i populate with a axios Get call to the backend(which is spring JPA) that takes the data from the database.
let {
id,
numeroOfferta,
accordo,
commerciale,
rifOffertaEsterno,
figureList,
descrizione,
tipoOfferta,
statoOfferta,
dataInizio,
dataFine,
delivery,
dataEmissione,
revisione,
cliente,
portafoglio,
imponibileTotale,
sconto
// giorniTotali
} = this.props.offerta;
As you can see on change I call a method that send to the axios call the props I need. The event is always right but I need to download or upload a file from a folder that has the name that I want. When I try to take the "numeroOfferta", that is a number, react takes the value of the first line of the table(I open a modal that has the id with the numeroOfferta so i can take all the props of that line). I have this problem only in the input type file.
Thank you for every answer.
reactjs input axios
reactjs input axios
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
edited Nov 15 '18 at 11:22
brunazzo
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
asked Nov 15 '18 at 10:27
brunazzobrunazzo
63
63
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
1
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
It would be helpful if you could include more of the context around the example you have shown. If the problem is thatnumeraOffertais always the first value of a table, you should show the code wherenumeraOffertais initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.
– Tyler
Nov 15 '18 at 11:00
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05
add a comment |
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
1
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
It would be helpful if you could include more of the context around the example you have shown. If the problem is thatnumeraOffertais always the first value of a table, you should show the code wherenumeraOffertais initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.
– Tyler
Nov 15 '18 at 11:00
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
1
1
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
It would be helpful if you could include more of the context around the example you have shown. If the problem is that
numeraOfferta is always the first value of a table, you should show the code where numeraOfferta is initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.– Tyler
Nov 15 '18 at 11:00
It would be helpful if you could include more of the context around the example you have shown. If the problem is that
numeraOfferta is always the first value of a table, you should show the code where numeraOfferta is initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.– Tyler
Nov 15 '18 at 11:00
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05
add a comment |
0
active
oldest
votes
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%2f53317320%2fpass-prop-in-input-type-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53317320%2fpass-prop-in-input-type-file%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
Please include your code in text format in your question instead of linking to external images.
– Tholle
Nov 15 '18 at 10:28
1
just done, sorry :)
– brunazzo
Nov 15 '18 at 10:31
It would be helpful if you could include more of the context around the example you have shown. If the problem is that
numeraOffertais always the first value of a table, you should show the code wherenumeraOffertais initialized. If it comes from a prop, also show the next component up so that others can help you trace the problem. From your explanation it sounds like this code is in a loop and the issue is likely where the loop is.– Tyler
Nov 15 '18 at 11:00
Sorry it's my first question ;). I will include more code in the next minutes. I take numeroOfferta from the props but it work because if I pass it to a button or a input text or everything else it works. I can take the value, the problem is in the input type file where the method is unable to take the value of numeroOfferta for that specific modal with that specific numeroOfferta(I show a lot of things in that modal and everything works right).
– brunazzo
Nov 15 '18 at 11:05