Strapi: How to upload image and link it to Model?
Say I have a model Restaurant, and I want to upload an image and link it to the model.
From documentation this should happen in two steps:
- Create new entity
- Upload and link image
Currently, after I create the entity and try to do step 2 it fails.
Note: Image is obtained from React-Native image picker
Here is what I am doing:
const data = new FormData();
data.append('files', image.uri);
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What I see is that the image is not uploaded. Furthermore, debugging from Strapi side, I see the request with all these data as fields.
I am using FormData as mentioned in the documentation, what am I missing?
javascript react-native strapi
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
add a comment |
Say I have a model Restaurant, and I want to upload an image and link it to the model.
From documentation this should happen in two steps:
- Create new entity
- Upload and link image
Currently, after I create the entity and try to do step 2 it fails.
Note: Image is obtained from React-Native image picker
Here is what I am doing:
const data = new FormData();
data.append('files', image.uri);
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What I see is that the image is not uploaded. Furthermore, debugging from Strapi side, I see the request with all these data as fields.
I am using FormData as mentioned in the documentation, what am I missing?
javascript react-native strapi
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
add a comment |
Say I have a model Restaurant, and I want to upload an image and link it to the model.
From documentation this should happen in two steps:
- Create new entity
- Upload and link image
Currently, after I create the entity and try to do step 2 it fails.
Note: Image is obtained from React-Native image picker
Here is what I am doing:
const data = new FormData();
data.append('files', image.uri);
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What I see is that the image is not uploaded. Furthermore, debugging from Strapi side, I see the request with all these data as fields.
I am using FormData as mentioned in the documentation, what am I missing?
javascript react-native strapi
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
Say I have a model Restaurant, and I want to upload an image and link it to the model.
From documentation this should happen in two steps:
- Create new entity
- Upload and link image
Currently, after I create the entity and try to do step 2 it fails.
Note: Image is obtained from React-Native image picker
Here is what I am doing:
const data = new FormData();
data.append('files', image.uri);
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What I see is that the image is not uploaded. Furthermore, debugging from Strapi side, I see the request with all these data as fields.
I am using FormData as mentioned in the documentation, what am I missing?
javascript react-native strapi
javascript react-native strapi
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
asked Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
344515
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Turned out that I need to add some extra information to the files key so that FormData recongnize it as a file and Strapi can handle file upload.
Here is what works:
const data = new FormData();
data.append('files', {
uri: logo.uri,
name: `test.jpg`,
type: 'multipart/form-data'
});
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What matters really is the type: 'multipart/form-data.
One more remark, in the documentation, there is another key called source. I didn't use it and it seems not to affect anything. Note sure if it needed.
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
add a comment |
Trying to do something similar. But upload fails even without linking the file to the model. Strangely, the response is "SUCCESS" but nothing is uploaded to the Strapi upload folder. What am I missing? My code (here I simply try to save a random file from the Internet) is below:
const bodyFormData = new FormData();
const token = localStorage.getItem('token');
bodyFormData.append('files', {
uri: "https://www.w3schools.com/bootstrap/newyork.jpg",
name: "test.jpg",
type: "multipart/form-data"
});
// console.log(data.Attachment.rawFile.preview);
axios.post( 'http://localhost:1337/upload',
bodyFormData,
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log('SUCCESS');
})
.catch(function(){
console.log('Fail!');
});
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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%2f54260800%2fstrapi-how-to-upload-image-and-link-it-to-model%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Turned out that I need to add some extra information to the files key so that FormData recongnize it as a file and Strapi can handle file upload.
Here is what works:
const data = new FormData();
data.append('files', {
uri: logo.uri,
name: `test.jpg`,
type: 'multipart/form-data'
});
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What matters really is the type: 'multipart/form-data.
One more remark, in the documentation, there is another key called source. I didn't use it and it seems not to affect anything. Note sure if it needed.
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
add a comment |
Turned out that I need to add some extra information to the files key so that FormData recongnize it as a file and Strapi can handle file upload.
Here is what works:
const data = new FormData();
data.append('files', {
uri: logo.uri,
name: `test.jpg`,
type: 'multipart/form-data'
});
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What matters really is the type: 'multipart/form-data.
One more remark, in the documentation, there is another key called source. I didn't use it and it seems not to affect anything. Note sure if it needed.
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
add a comment |
Turned out that I need to add some extra information to the files key so that FormData recongnize it as a file and Strapi can handle file upload.
Here is what works:
const data = new FormData();
data.append('files', {
uri: logo.uri,
name: `test.jpg`,
type: 'multipart/form-data'
});
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What matters really is the type: 'multipart/form-data.
One more remark, in the documentation, there is another key called source. I didn't use it and it seems not to affect anything. Note sure if it needed.
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
Turned out that I need to add some extra information to the files key so that FormData recongnize it as a file and Strapi can handle file upload.
Here is what works:
const data = new FormData();
data.append('files', {
uri: logo.uri,
name: `test.jpg`,
type: 'multipart/form-data'
});
data.append('refId', id);
data.append('ref', 'Restaurants');
data.append('field', 'Logo');
What matters really is the type: 'multipart/form-data.
One more remark, in the documentation, there is another key called source. I didn't use it and it seems not to affect anything. Note sure if it needed.
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
answered Jan 18 at 20:10
Mohamed MoanisMohamed Moanis
344515
344515
add a comment |
add a comment |
Trying to do something similar. But upload fails even without linking the file to the model. Strangely, the response is "SUCCESS" but nothing is uploaded to the Strapi upload folder. What am I missing? My code (here I simply try to save a random file from the Internet) is below:
const bodyFormData = new FormData();
const token = localStorage.getItem('token');
bodyFormData.append('files', {
uri: "https://www.w3schools.com/bootstrap/newyork.jpg",
name: "test.jpg",
type: "multipart/form-data"
});
// console.log(data.Attachment.rawFile.preview);
axios.post( 'http://localhost:1337/upload',
bodyFormData,
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log('SUCCESS');
})
.catch(function(){
console.log('Fail!');
});
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Trying to do something similar. But upload fails even without linking the file to the model. Strangely, the response is "SUCCESS" but nothing is uploaded to the Strapi upload folder. What am I missing? My code (here I simply try to save a random file from the Internet) is below:
const bodyFormData = new FormData();
const token = localStorage.getItem('token');
bodyFormData.append('files', {
uri: "https://www.w3schools.com/bootstrap/newyork.jpg",
name: "test.jpg",
type: "multipart/form-data"
});
// console.log(data.Attachment.rawFile.preview);
axios.post( 'http://localhost:1337/upload',
bodyFormData,
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log('SUCCESS');
})
.catch(function(){
console.log('Fail!');
});
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Trying to do something similar. But upload fails even without linking the file to the model. Strangely, the response is "SUCCESS" but nothing is uploaded to the Strapi upload folder. What am I missing? My code (here I simply try to save a random file from the Internet) is below:
const bodyFormData = new FormData();
const token = localStorage.getItem('token');
bodyFormData.append('files', {
uri: "https://www.w3schools.com/bootstrap/newyork.jpg",
name: "test.jpg",
type: "multipart/form-data"
});
// console.log(data.Attachment.rawFile.preview);
axios.post( 'http://localhost:1337/upload',
bodyFormData,
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log('SUCCESS');
})
.catch(function(){
console.log('Fail!');
});
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Trying to do something similar. But upload fails even without linking the file to the model. Strangely, the response is "SUCCESS" but nothing is uploaded to the Strapi upload folder. What am I missing? My code (here I simply try to save a random file from the Internet) is below:
const bodyFormData = new FormData();
const token = localStorage.getItem('token');
bodyFormData.append('files', {
uri: "https://www.w3schools.com/bootstrap/newyork.jpg",
name: "test.jpg",
type: "multipart/form-data"
});
// console.log(data.Attachment.rawFile.preview);
axios.post( 'http://localhost:1337/upload',
bodyFormData,
{
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log('SUCCESS');
})
.catch(function(){
console.log('Fail!');
});
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Jan 22 at 10:59
endrusendrus
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Jan 22 at 10:59
endrusendrus
12
answered Jan 22 at 10:59
endrusendrus
12
12
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
endrus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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%2f54260800%2fstrapi-how-to-upload-image-and-link-it-to-model%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
