By aiminaabee
-----------------BACK-END - CONFIG FILE---------------
import aws from 'aws-sdk'
import { authConfig } from '../appConfig/auth'
const regionName = authConfig.FILE_STORAGE.DO_FILES_REGION-----> //sgp1
const spacesEndpoint = new aws.Endpoint(`${regionName}.digitaloceanspaces.com`)
const doS3Client = new aws.S3({
endpoint: spacesEndpoint,
accessKeyId: authConfig.FILE_STORAGE.DO_FILES_KEY,
secretAccessKey: authConfig.FILE_STORAGE.DO_FILES_REGION,
region: authConfig.FILE_STORAGE.DO_FILES_REGION,
signatureVersion: 'v4',
})
export { doS3Client }
--------------BACK-END - SIGNED URL GENERATION------------
const s3Params = {
Bucket: DOBucket,
Key: data[i]?.fileName,
ContentType: data[i]?.fileType,
ACL: 'public-read',
Expires: 60,
}
const signedRequest = await doS3Client.getSignedUrl('putObject', s3Params)
------FRONT-END(REACT-NATIVE) -FILE UPLOAD-------
const uploadToDOSpaces = async (data: FileUploadInput[], signedUrls: any) => {
console.log('--signedUrls--', signedUrls[0].signedRequest);
console.log('--data--', data[0].file);
console.log('--data--', data[0].fileType);
Signed url
-------------
https://development.sgp1.digitaloceanspaces.com/products/905f9-20220614T144822607Z-beeimage.jpg?Content-Type=image%2Fjpg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=OL42EYV5C64X6D5RJI7E%2F20220614%2Fsgp1%2Fs3%2Faws4_request&X-Amz-Date=20220614T144822Z&X-Amz-Expires=60&X-Amz-Signature=9aedf1fad0ba57a47e618c3d0e575973f39f03532c1e3e4132c6611fd4447fbe&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read
File to Upload
-------------
file:///Users/drgrey/Library/Developer/CoreSimulator/Devices/5B16C844-7447-443A-AC8A-5F66D3729A45/data/Containers/Data/Application/623EA2EA-B9FA-490F-B966-8D78C3C6FC96/Library/Caches/5DFC3AD3-8DA3-4C29-87E9-06D36AC56BDF.jpg
File Type
-----------------
image/jpg
try {
for (let i = 0; i < data.length; i++) {
await fetch(signedUrls[i].signedRequest, {
headers: {
'Content-Type': data[i].fileType,
'Cache-Control': 'public,max-age=31536000,immutable',
'x-amz-acl': 'public-read',
},
method: 'PUT',
body: await upload(data[i].file),
});
}
} catch (error) {
console.log('error', error);
}
};
const upload = (file: string): any => {
try {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onerror = reject;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
resolve(xhr.response);
}
};
xhr.open('GET', file);
xhr.responseType = 'blob'; // convert type
xhr.setRequestHeader('x-amz-acl', 'public-read');
xhr.send();
});
} catch (error) {
console.log('error', error);
}
};
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
the upload xhr request in your upload function is incorrect. Signed urls should be sent as a put request not a get request.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.