Amplify-js: Request Better Documentation/Question

[ballenwillis]

Do you want to request a feature or report a bug?
Request better documentation

To keep this short, I removed the rest of the questions. Simply put, there's no documentation on uploading an image without using the built-in inputType. We have been using react-native-image-picker and I just need to know what is Storage.put() expecting? I've tried uploading the local file uri and the base64 representation of the image with no luck.

What am I supposed to pass into Storage.put() in order to simply upload an image? I have the uri of the image on my local device as well. I've read a ton of your docs on Storage.put() and they use the example of a text file. I want to see how to do it with any type of file.

[richardzcode]

Hey @BWillis98 in this guide, https://aws.github.io/aws-amplify/media/storage_guide#put

Storage.put('test.txt', 'Private Content', {
    level: 'private',
    contentType: 'text/plain'
})
.then (result => console.log(result))
.catch(err => console.log(err));

Basically you can specify 'contentType' of the upload.

I agree it is not very obvious though.

[ballenwillis]

@richardzcode , perhaps this is just because of my lack of experience, but what do I do for images? It's fairly obvious that for text you send text as the content, but what about for images? Is there some universal understanding to send the base64 representation of the image or something?

I'm not understanding what exactly the second parameter is looking for when uploading an image.

const whatGoesHere = ???
Storage.put('test.png', whatGoesHere, {
    level: 'private',
    contentType: 'image/png'
})
.then (result => console.log(result))
.catch(err => console.log(err));

[ballenwillis]

I have a feeling this is one of those time where there's some universal understanding I'm not aware of for what data needs to be sent when uploading an image, and no one else is going to have this problem, but here's my solution.

1. Add the buffer npm module.
   yarn add buffer

2. Define the buffer by putting this in your App.js file
   global.Buffer = global.Buffer || require('buffer').Buffer

3. Buffer the data with base64 encoding
   const buf = new Buffer(imageData,'base64')

Now my code works perfectly. Here's my resultant function with my documentation. Forgive me if things aren't done perfectly or even blatantly wrong. I have no guidance and am just learning so I'm doing the best I can.

/*
    Description: Upload a file to AWS and return result
    Parameters:
        (String) fileName - Name of file to upload
        (String) imageData - Base64 string representation of image being uploaded
        (String) contentType - The content type to pass with request
        (String) access - Access level in AWS. Value must be `private`, `public`, or `protected`. Please use enum
            `Access` until we figure out how to enforce the use of the enum Todo: Enforce use of enum
*/
const storeImageInS3 = (fileName, base64Image, contentType, access) => {
    return new Promise((resolve, reject) => {
        const bufferedImageData = new Buffer(base64Image,'base64');
        const options = {
            level: access,
            contentType: contentType,
            ContentEncoding: 'base64',
        }
        Storage.put(fileName, bufferedImageData, options)
            .then(result => {
                resolve({
                    access,
                    key: result.key
                })
            })
            .catch(err => reject(err))
    })
}

[richardzcode]

@BWillis98 Glad you made it work! If you are building a web app, you may just assign event.target.files[0] to whatGoesHere on file input change event, and don't need ContentEncoding. PR #593 is going to address this in document.

[ballenwillis]

We actually use the react-native-image-picker module, so using event.target.files[0] wouldn't work in our case. It made much more sense to upload a file given the URI of the file on the local device than to figure out how to make it work with events. I have a feeling it's obvious to most others using AWS what kind of data needs to be inserted into the file, but I had no idea.

[yhenni1989]

I have a feeling this is one of those time where there's some universal understanding I'm not aware of for what data needs to be sent when uploading an image, and no one else is going to have this problem, but here's my solution.

1. Add the buffer npm module.
   yarn add buffer
2. Define the buffer by putting this in your App.js file
   global.Buffer = global.Buffer || require('buffer').Buffer
3. Buffer the data with base64 encoding
   const buf = new Buffer(imageData,'base64')

Now my code works perfectly. Here's my resultant function with my documentation. Forgive me if things aren't done perfectly or even blatantly wrong. I have no guidance and am just learning so I'm doing the best I can.

/*
    Description: Upload a file to AWS and return result
    Parameters:
        (String) fileName - Name of file to upload
        (String) imageData - Base64 string representation of image being uploaded
        (String) contentType - The content type to pass with request
        (String) access - Access level in AWS. Value must be `private`, `public`, or `protected`. Please use enum
            `Access` until we figure out how to enforce the use of the enum Todo: Enforce use of enum
*/
const storeImageInS3 = (fileName, base64Image, contentType, access) => {
    return new Promise((resolve, reject) => {
        const bufferedImageData = new Buffer(base64Image,'base64');
        const options = {
            level: access,
            contentType: contentType,
            ContentEncoding: 'base64',
        }
        Storage.put(fileName, bufferedImageData, options)
            .then(result => {
                resolve({
                    access,
                    key: result.key
                })
            })
            .catch(err => reject(err))
    })
}

Hi, when you say: 'buffer image data', What data are you referring to? the uri or something else?