biheng
/
uppy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Transloadit Example</title>
  </head>
  <body>
    <style>
      html {
        background: #f1f1f1;
      }
      main {
        padding: 20px;
        font: 12pt sans-serif;
        background: white;
        width: 800px;
        margin: auto;
      }
      hr {
        border: 0;
        background-color: #111e33;
        height: 1px;
      }
      .hidden {
        display: none;
      }
      .error {
        color: red;
      }
      #logo {
        height: 1em;
        vertical-align: middle;
      }
    </style>
    <main>
      <h1>
        Uppy Transloadit
        <img
          src="https://my-app.tlcdn.com/resize-img/canoe.jpg?w=300&h=300"
          alt="Transloadit"
          id="logo"
        />
        playground
      </h1>
      <p>
        This page contains small examples for different ways you can use Uppy
        with Transloadit. Please see the
        <a
          href="https://github.com/transloadit/uppy/tree/main/examples/transloadit"
          >Github repository</a
        >
        for the source code.
      </p>
      <hr />
      <h2>Form</h2>

      <p>
        The form API allows you to easily send files through Transloadit’s
        encoding backend. When the user submits the form, any files are uploaded
        to Transloadit. The form data is then sent to your own backend, with
        additional data about the Transloadit Assemblies that were started.
      </p>
      <form id="test-form" method="post" action="http://localhost:9967/test">
        <p><strong>leave a message</strong></p>
        <p>
          <label
            >name:
            <input type="text" name="name" />
          </label>
        </p>
        <p>
          <label
            >message: <br />
            <textarea name="message"></textarea>
          </label>
        </p>
        <p>
          <label>
            attachments:
            <!-- <input type="file" name="files" multiple> -->
            <strong id="uppy-form-selected-files"></strong>
            <button type="button" id="uppy-select-files">Select Files</button>
          </label>
          <span class="progress"></span>
        </p>
        <p>
          <button type="submit">Upload</button>
        </p>
        <span class="error"></span>
      </form>

      <hr />
      <h2>Form with inline Dashboard</h2>

      <p>You can also use the Dashboard UI inside a plain old HTML form.</p>
      <form
        id="dashboard-form"
        method="post"
        action="http://localhost:9967/test"
      >
        <p><strong>leave a message</strong></p>
        <p>
          <label
            >name:
            <input type="text" name="name" />
          </label>
        </p>
        <p>
          <label
            >message: <br />
            <textarea name="message"></textarea>
          </label>
        </p>
        <p>
          <label>
            attachments:
            <span class="dashboard"></span>
          </label>
        </p>
        <p>
          <button type="submit">Upload</button>
        </p>
        <span class="error"></span>
      </form>

      <hr />
      <h2>Inline Dashboard</h2>
      <p>
        The <code>robodog.dashboard</code> API allows you to embed a Dashboard
        at any location. Users can continuously upload files through this UI, so
        please make sure this fits your use case!
      </p>
      <div id="dashboard"></div>

      <hr />
      <h2>Dashboard Modal</h2>

      <p>
        This API is a one-shot upload UI using a modal overlay. Call the
        function and receive a listen to an event with upload results ✌️
      </p>
      <button onclick="openModal()">Open</button>

      <h2>uppy.upload()</h2>
      <p>An &lt;input type=file&gt; backed by <code>uppy.upload()</code>:</p>
      <p>
        <input type="file" multiple onchange="doUpload(event)" />
      </p>
      <div id="upload-progress"></div>
      <div id="upload-result-image"></div>
      <code>
        <pre
          id="upload-result"
          style="
            font-size: 12px;
            max-width: 100%;
            max-height: 300px;
            white-space: pre-wrap;
            overflow: auto;
          "
        ></pre>
        <pre id="upload-error" class="error"></pre>
      </code>
    </main>

    <script src="./main.js" type="module"></script>
  </body>
</html>