Enhancing Frontend User Experience with OCI Object Storage in Staging Environment
I've encountered a strange issue with Hey everyone, I'm running into an issue that's driving me crazy. I'm relatively new to this, so bear with me. Recently started working on a project that requires integrating OCI Object Storage with our frontend application for image uploads. While developing the staging environment, I've set up the necessary policies and created a bucket for our assets. However, user experience isn't as smooth as I anticipated. After implementing basic upload functionality using Fetch API, the response time feels sluggish, and I suspect my approach to handling the upload process might be the culprit. Here's a snippet of the current code: ```javascript async function uploadImage(file) { const url = 'https://objectstorage.<region>.oraclecloud.com/n/<namespace>/b/<bucket>/o'; const formData = new FormData(); formData.append('file', file); try { const response = await fetch(url, { method: 'POST', body: formData, headers: { 'Authorization': 'Bearer ' + <token> } }); if (!response.ok) { throw new Error('Upload failed with status: ' + response.status); } return await response.json(); } catch (error) { console.error('Error uploading image:', error); throw error; } } ``` The original implementation used direct POST requests, but I read about the potential benefits of using multipart uploads for larger files, especially large images. So, I switched to a multipart approach, but the latency still seems high. Is there a better way to handle this? Could using a client-side library such as AWS SDK for JavaScript improve the upload speed? I’ve also tried pre-signed URLs for direct uploads to bypass some of the backend interactions, but that added complexity hasn't yielded better results. Could someone shed light on best practices for optimizing image uploads to OCI Object Storage from a frontend perspective? Are there configurations or strategies I might be overlooking that can enhance the user experience in this staging setup? I'm working on a service that needs to handle this. This is part of a larger web app I'm building. Thanks in advance! Could this be a known issue? For context: I'm using Javascript on Linux.