Hey @brian,
Are you still facing this issue? We’ve had a few customers reporting a similar problem.
I agree that the documentation for this activity is NOT clear. In all the general documentation, providing an image is only described in terms of providing a url to the createAsset method. The only documentation (a blog post) that describes how to use the Upload API fails to provide a complete picture of all steps from upload, asset creation, associating upload to asset, processing, and publishing. Without that complete picture, this is far more difficult to implement than really needs to be.
Please provide a complete example (in JavaScript, ideally) and also please update the general API and SDK documentation to make it clear that images can be uploaded via url OR via the Upload API.
Thanks!
Charlie,
Do you have an example of this code for Javascript/Angular 6?
Thanks,
Ian
I struggled for hours before I managed to figure out how to upload/asset create my own local image file. I’ll post my working JS example first, then talk about what I had to do to get there. Disclaimer: I am NOT a JS dev. Please don’t think I’m posting code with best practices.
SOLUTION
const fileName = 'myFile.svg'
const fileToUpload = __dirname + '/' + fileName
// UPLOAD/CREATE ASSET PORTION
const space = client.getSpace(process.env.SPACE_ID)
const uploadedAsset = space
.then((s) => {
return s.createAssetFromFiles({ // this first posts the asset to 'uploads', then finally posts the asset to 'assets'
fields: {
title: {
'en-US': 'my file'
},
description: {
'en-US': 'file description'
},
file: {
'en-US': {
contentType: 'image/svg+xml',
fileName: fileName,
file: fs.createReadStream(fileToUpload)
}
}
}
})
.then((asset) => {
return asset.processForAllLocales() // this is the processing part
.then((asset) => asset.publish()) // this is what actually publishes the asset created
})
})
.catch(console.error)
// ASSET CREATION/UPLOAD ASSOCIATION PORTION
Promise.all([space, uploadedAsset])
.then(([space, assetToAttach]) => {
space.createAsset({ // a direct call to post the asset to 'assets' rather than uploads first
fields: {
title: {
'en-US': 'asset name'
},
file: {
'en-US': {
contentType: 'image/svg+xml',
fileName: fileName,
uploadFrom: {
'sys': {
'type': 'Link',
'linkType': 'Upload',
'id': assetToAttach.sys.id
}
}
}
}
}
})
.then((asset) => asset.processForAllLocales()) // im not publishing the asset like i did in the previous example
.then((asset) => console.log(asset))
.catch(console.error)
})
EXPLANATION
- So I was able to mostly copy from their CMA docs > Creating an upload resource
And they specifically write:
But they don’t exactly show you how to upload your own file; instead, their example draws an in-line svg image. After digging around in their code a bit (node_modules > contentful-management > dist > es-modules > create-space-api.js), I found an actual useful example:
Notice their use of the function called ‘createReadStream()’. I didn’t know what that was. A quick search led me to see it belonged to Node’s File System (fs). Great, now we’ve taken care of the upload doc’s specs to include binary data. - Going back to their CMA Uploads area, they have an area called ‘Associating an upload with an asset’, which points you to their asset area
- From here, I mostly followed their example, but they don’t use the ‘uploadFrom’ field in their example: instead they use ‘upload’.
- Another search led me to the blog post linked by charlie above, which covers an example using ‘uploadFrom’. The area they don’t link to (Associating an upload with an asset) also uses an example with this field.
Hope this helps.
2 Likes
