Client Side Image Upload to AWS

s3-client.js

const dataURItoBlob = (dataURI, type) => {
    const byteString = atob(dataURI.split(',')[1]);
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ab], {
        type
    });
};

export const deleteObject = (key) => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('DELETE', `/admin/s3/deleteObject?key=${key}`);
        xhr.addEventListener('load', () => {
            let {
                response
            } = xhr;
            if (xhr.status >= 200 && xhr.status < 400) {
                resolve(JSON.parse(response));
            } else {
                const e = new Error('The server returned an error code');
                e.xhr = xhr;
                e.message = response;
                e.jsonResponse = response;
                e.status = xhr.status;
                reject(e);
            }
        });
        xhr.send();
    });
};

export const getSignedUrl = (fileName, fileType) => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', '/admin/s3/getSignedUrl');
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

        xhr.addEventListener('load', () => {
            let {
                response
            } = xhr;
            if (xhr.status >= 200 && xhr.status < 400) {
                resolve(JSON.parse(response));
            } else {
                const e = new Error('The server returned an error code');
                e.xhr = this;
                e.message = this.response;
                e.jsonResponse = response;
                e.status = this.status;
                reject(e);
            }
        });

        xhr.send(JSON.stringify({
            fileName,
            fileType
        }));
    });
};

export const upload = (fileName, fileType, dataURI) => {
    return new Promise((resolve, reject) => {
        fileName = `${fileName}`;
        getSignedUrl(fileName, fileType)
            .then(signedUrl => {
                let xhr = new XMLHttpRequest();

                xhr.open('PUT', signedUrl);
                xhr.setRequestHeader('x-amz-acl', 'public-read');
                xhr.setRequestHeader('Content-Type', fileType);

                xhr.addEventListener('load', () => {
                    const {
                        status
                    } = xhr;
                    if (status === 200) {
                        resolve(fileName);
                    } else {
                        reject(xhr);
                    }
                });

                let file = dataURItoBlob(dataURI, fileType);
                xhr.send(file);
            });
    });
};

s3-server.js

import {Router as expressRouter} from 'express';
import aws from 'aws-sdk';

const router = expressRouter();

router.delete('/s3/deleteObject', (req, res) => {
    if(!req.query.key){
        return res.status(409).send({
            error: 'Missing key',
        });
    }

    const s3 = new aws.S3({
        computeChecksums: false,
    });

    let Key = `${process.env.S3_PREFIX}/${process.env.S3_PATH}/${req.query.key}`;

    const s3Params = {
            Bucket: process.env.S3_BUCKET,
            Key
    };

    s3.deleteObject(s3Params, (err, data) => {
        if(err){
            return res.status(500).send(err);
        }

        res.json({
            success: true,
            data
        });
    });
});

router.post('/s3/getSignedUrl', (req, res) => {

    if(!req.isAuthenticated()){
        return res.sendStatus(401);
    }
    const s3 = new aws.S3({
        computeChecksums: false
    });

    const fileName = `${process.env.S3_PREFIX}/${process.env.S3_PATH}/${req.body.fileName}`;

    const s3Params = {
        Bucket: process.env.S3_BUCKET,
        Key: fileName,
        ACL: 'public-read',
        ContentType: req.body.fileType
    };

    s3.getSignedUrl('putObject', s3Params, (err, url) => {
        if(err){
            return res.status(422).send(err);
        } else{
            return res.json(url);
        }
    });

});

export default router;