JSFiddle - React, Tailwind, and code Playground

by bibhuti

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js"></script>
<input type="text" id="url" placeholder="Input Lamda URL">
<br><br>
<input type="file" id="fileInput">
<p>Upload percentage: <span id="uploadPercent"></span> </p>
<br><br>
<img src="" id="imgPreview" height="400" width="600" />

JavaScript

document.getElementById("fileInput").addEventListener('change', handleFileChange);

async function handleFileChange(e) {

  const URL = document.getElementById("url").value;

  try {

    // take the first file from FilesList
    const file = e.target.files[0];

    // Extract Content-Type & filename
    const {
      type,
      name
    } = file;

    // Get upload URL
    let resp = await axios.post(
      URL, {
        contentType: type,
        ext: name.split(".").pop(), // take only file extension
        isPublic: true, // let's make it public so we can preview here
      }
    );

    // Upload at URL
    const {
      url,
      fileUrl
    } = resp.data;
    await axios.put(url, file, {
      headers: {
        "Content-Type": file.type
      },
      onUploadProgress: (e) => {
        //  Show progress
        var percentCompleted = Math.round((e.loaded * 100) / e.total);
        document.getElementById("uploadPercent").innerHTML = percentCompleted;
      },
    });

    // suuccessfully uploaded
    document.getElementById("uploadPercent").innerHTML = "Completed";
    document.getElementById("imgPreview").setAttribute("src", fileUrl);

  } catch (e) {

    // Log errors
    console.log(e);
  }
}