JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<html>
  <body>
    <h1>Upload to Cloudinary with FormData</h1>
    <form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
      <fieldset>
        <legend>Upload example</legend>
        <p>
          <label >Select your photo:
          <input type="file" name="file" id='fileinput'></label>
        </p>
        <p>
          <input type="submit" value="Submit" />
        </p>
        <img id="uploaded">
        <div id="results"></div>
      </fieldset>
    </form>
   
    <?php
      $cloud_name = "maor";
      $api_key = "157868752573338";
      $api_secret = "G8WJBHKhueUv6S3KU5cT4U6JV70";
      $timestamp = time();
      $signature = sha1("timestamp=".$timestamp.$api_secret);
    ?>

    <script>
        window.ajaxSuccess = function () {
    	    response = JSON.parse(this.responseText);
          console.log("ajaxSuccess", typeof this.responseText);
          document.getElementById('uploaded').setAttribute("src", response["secure_url"]);
          document.getElementById('results').innerText = this.responseText;
        }
        
        window.AJAXSubmit = function (formElement) {
          var chunkSize = 7000000;
          var XUniqueUploadId = "11123456789";
          var mediaSize = fileinput.files[0].size;
          var chunks = Math.ceil(mediaSize / chunkSize)
          console.log("file size is ");
          console.log(mediaSize);
          chunkReaderBlock = function(_offset, length, _file) {
          var r = new FileReader();
          var blob = _file.slice(_offset, length + _offset);
          r.onload = readEventHandler;
          r.readAsText(blob);
      }
          for (var index = 0; index < chunks; index++) {
            var start = index * chunkSize;
            var end = (start - 1 + chunkSize) < mediaSize ? (start - 1 + chunkSize) : mediaSize;
          console.log("starting AJAXSubmit");
          var xhr = new XMLHttpRequest();
          xhr.onload = ajaxSuccess;
          var...