Why image is not upload to server with react?
I have to upload image with react to server but put request sent empty image object.
This is function to set state for image
...
fileUpload(event) {
const companyState = {...this.state.company};
companyState['image'] = event.target.files[0];
this.setState({company: companyState});
}
...
This is code to upload image
...
<input type="file" name="image" className="form-control" accept="image/*" onChange={this.fileUpload}/>
...
This service to send image and i have test it here i got image object with file but when i console requestOptions before
fetch request it make image object empty
...
function editCompany(id, companyData){
const requestOptions = {
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(companyData)
};
return fetch(baseUrl+'company/'+id, requestOptions)
.then(handleResponse)
.then(company => {
return company;
})
}
...
This is my auth header function.
...
export function authHeader() {
// return authorization header with jwt token
let AdminUser = JSON.parse(localStorage.getItem('admin-user'));
if (AdminUser && AdminUser.token) {
return { 'Authorization': 'Bearer ' + AdminUser.token , 'Content-Type': 'application/json' };
} else {
return {};
}
}
reactjs
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
add a comment |
I have to upload image with react to server but put request sent empty image object.
This is function to set state for image
...
fileUpload(event) {
const companyState = {...this.state.company};
companyState['image'] = event.target.files[0];
this.setState({company: companyState});
}
...
This is code to upload image
...
<input type="file" name="image" className="form-control" accept="image/*" onChange={this.fileUpload}/>
...
This service to send image and i have test it here i got image object with file but when i console requestOptions before
fetch request it make image object empty
...
function editCompany(id, companyData){
const requestOptions = {
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(companyData)
};
return fetch(baseUrl+'company/'+id, requestOptions)
.then(handleResponse)
.then(company => {
return company;
})
}
...
This is my auth header function.
...
export function authHeader() {
// return authorization header with jwt token
let AdminUser = JSON.parse(localStorage.getItem('admin-user'));
if (AdminUser && AdminUser.token) {
return { 'Authorization': 'Bearer ' + AdminUser.token , 'Content-Type': 'application/json' };
} else {
return {};
}
}
reactjs
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01
add a comment |
I have to upload image with react to server but put request sent empty image object.
This is function to set state for image
...
fileUpload(event) {
const companyState = {...this.state.company};
companyState['image'] = event.target.files[0];
this.setState({company: companyState});
}
...
This is code to upload image
...
<input type="file" name="image" className="form-control" accept="image/*" onChange={this.fileUpload}/>
...
This service to send image and i have test it here i got image object with file but when i console requestOptions before
fetch request it make image object empty
...
function editCompany(id, companyData){
const requestOptions = {
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(companyData)
};
return fetch(baseUrl+'company/'+id, requestOptions)
.then(handleResponse)
.then(company => {
return company;
})
}
...
This is my auth header function.
...
export function authHeader() {
// return authorization header with jwt token
let AdminUser = JSON.parse(localStorage.getItem('admin-user'));
if (AdminUser && AdminUser.token) {
return { 'Authorization': 'Bearer ' + AdminUser.token , 'Content-Type': 'application/json' };
} else {
return {};
}
}
reactjs
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
I have to upload image with react to server but put request sent empty image object.
This is function to set state for image
...
fileUpload(event) {
const companyState = {...this.state.company};
companyState['image'] = event.target.files[0];
this.setState({company: companyState});
}
...
This is code to upload image
...
<input type="file" name="image" className="form-control" accept="image/*" onChange={this.fileUpload}/>
...
This service to send image and i have test it here i got image object with file but when i console requestOptions before
fetch request it make image object empty
...
function editCompany(id, companyData){
const requestOptions = {
method: 'PUT',
headers: authHeader(),
body: JSON.stringify(companyData)
};
return fetch(baseUrl+'company/'+id, requestOptions)
.then(handleResponse)
.then(company => {
return company;
})
}
...
This is my auth header function.
...
export function authHeader() {
// return authorization header with jwt token
let AdminUser = JSON.parse(localStorage.getItem('admin-user'));
if (AdminUser && AdminUser.token) {
return { 'Authorization': 'Bearer ' + AdminUser.token , 'Content-Type': 'application/json' };
} else {
return {};
}
}
reactjs
reactjs
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
asked Nov 22 '18 at 14:57
hu7syhu7sy
3551318
3551318
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01
add a comment |
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01
add a comment |
1 Answer
1
active
oldest
votes
For uploading files, you shouldn't use JSON stringify (if you're not converting the file into base64) build your request as the sample given below.
let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files', params.files); // where params.files is of type FileList
once the data is built, you can make the request as you generally do.
You might have to put a condition in your authHeader method to change the header if needed. Like, adding a param to the method hasFiles as authHeader(hasFiles=false) and change the header if needed.
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
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%2f53433605%2fwhy-image-is-not-upload-to-server-with-react%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
For uploading files, you shouldn't use JSON stringify (if you're not converting the file into base64) build your request as the sample given below.
let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files', params.files); // where params.files is of type FileList
once the data is built, you can make the request as you generally do.
You might have to put a condition in your authHeader method to change the header if needed. Like, adding a param to the method hasFiles as authHeader(hasFiles=false) and change the header if needed.
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
add a comment |
For uploading files, you shouldn't use JSON stringify (if you're not converting the file into base64) build your request as the sample given below.
let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files', params.files); // where params.files is of type FileList
once the data is built, you can make the request as you generally do.
You might have to put a condition in your authHeader method to change the header if needed. Like, adding a param to the method hasFiles as authHeader(hasFiles=false) and change the header if needed.
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
add a comment |
For uploading files, you shouldn't use JSON stringify (if you're not converting the file into base64) build your request as the sample given below.
let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files', params.files); // where params.files is of type FileList
once the data is built, you can make the request as you generally do.
You might have to put a condition in your authHeader method to change the header if needed. Like, adding a param to the method hasFiles as authHeader(hasFiles=false) and change the header if needed.
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
For uploading files, you shouldn't use JSON stringify (if you're not converting the file into base64) build your request as the sample given below.
let data = new FormData();
data.append('name', params.name);
data.append('age', params.age);
data.append('files', params.files); // where params.files is of type FileList
once the data is built, you can make the request as you generally do.
You might have to put a condition in your authHeader method to change the header if needed. Like, adding a param to the method hasFiles as authHeader(hasFiles=false) and change the header if needed.
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
answered Nov 22 '18 at 15:09
Vishal SharmaVishal Sharma
1,2731028
1,2731028
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
add a comment |
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
on server end i am using laravel it didn't get values with $request->all()
– hu7sy
Nov 22 '18 at 15:31
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.
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%2f53433605%2fwhy-image-is-not-upload-to-server-with-react%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
For uploading files the content-type should be multipart/form-data
– Vishal Sharma
Nov 22 '18 at 15:00
but when i set multipart/form-data it didn't work for other form in my app because i have auth header file is common
– hu7sy
Nov 22 '18 at 15:01