Best practices for uploading images to AEM on with a React Frontend?

[mvotos]

I'm currently developing a React application that interacts with Adobe Experience Manager (AEM) for asset and content management. My setup involves using AEM to store assets and content fragments, with the React app serving as the frontend interface. 

I'd like for a way to upload images to a folder in Assets from the site itself, from what I have read, using the Assets API isn't possible for asset creation.

Using localhost rather than a cloud dev environment.

I've come across two main approaches for uploading images to AEM, especially in the context of local development environments:

• Using the AEM Asset Upload HTTP API: A method outlined in Adobe's blog post "Introduction to AEM as a Cloud Service Asset Upload HTTP API", which describes a process involving pre-signed URLs for direct blob storage uploads. 
• Utilising the aem-upload Library: An alternative provided by Adobe, which simplifies the upload process to AEM, especially for newer versions configured for direct binary uploads. The aem-upload tool abstracts some of the complexities involved in the upload process, potentially making it more straightforward for developers. More details can be found in the library's GitHub repository: aem-upload.

Given these options, I'm seeking guidance on best practices for uploading images to AEM in a local development setup. Specifically:

• Is the direct binary upload method feasible and recommended for local development scenarios, or is it primarily intended for cloud environments?
• How does the aem-upload library compare in terms of ease of use, especially for a React application interacting with AEM on localhost?
• Are there any significant advantages or limitations to either approach that I should be aware of before deciding on the best path forward?

Any insights, experiences, or recommendations from the community would be greatly appreciated as I navigate the best approach for integrating image uploads into my application.

Also if there any other ways of doing this, it would be appreciated.

[EstebanBustamante]

Hi @mvotos 

Given that the AEM Asset API is deprecated (but not removed), you could still use it for testing or learning purposes in your local environment. However, this won't work in a Cloud environment due to the architecture of how the Assets processing works. This also means that it could potentially work in an On-premise environment, although it is not recommended. On the other hand, the aem-upload project would be preferred in a real implementation, but it would depend fully on your use case. In most cases, revisiting the business use case can help to avoid uploading assets.

Hope this helps.

Please check this thread for more info: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/aem-assets-via-api/... 

[mvotos]

Thanks, my use case is just uploading an asset (an image) to a folder and using it as a content reference for a content fragment. I am looking more into the aem-upload at the moment, but mainly wondering what is best practice in this scenario as well. Why is it best to avoid uploading assets?