File handling

This code snippet shows how to incorporate file upload to our server.

Caution, files are only accessible for a maximum of 7 days through the URL. After that you need to go through development to access them.

Usage

Layout

Add file upload functionality to your page.

<label for="image">Choose a picture:</label>
<input type="file" id="image" name="image" accept="image/png, image/jpeg">
<ion-button id="upload">Upload</ion-button>

Logic

Please note to include the type=”module” attribute.

<script type="module">
    import { AWS } from 'https://cdn.skimcloud.com/libs/skim/<version>/skim/index.esm.js';

    // click handler
    upload.onclick = async function() {
        const name = image.files[0].name, data = image.files[0]; // name can also include a subfolder

        const { Bucket, Key, Location, SignedURL } = await AWS.upload(name, data); 
        // SignedURL is the only publicly accessible reference to the file
    }
</script>

Example

In this example we are going to upload a voice recording using the microphone from the device.

<audio id="audio" controls></audio>
<button id="record">Record</button>
<button id="end">Stop</button>
<button id="upload">Upload</button>

<script type="module">
    import { AWS } from 'https://cdn.skimcloud.com/libs/skim/<version>/skim/index.esm.js';

    let recorder;   // the recorder object
    let recording;   // the recorded data
    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(
        function(stream) {
            recorder = new MediaRecorder(stream);
            recorder.addEventListener('dataavailable', function({ data }) {
                recording = data;
                audio.src = URL.createObjectURL(data);
            });
        }
    );

    // record click handler
    record.onclick = function() {
        recorder.start()
    }

    // stop recording click handler
    end.onclick = function() {
        recorder.stop();
    }

    upload.onclick = async function() {
        const { Bucket, Key, Location, SignedURL } = await AWS.upload(`some-unique-id-recording.wav`, recording);
        console.log(Bucket, Key, Location, SignedURL);
    }
</script>