biheng
/
uppy


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://releases.transloadit.com/uppy/v3.14.0/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <section class="example">
    <div id="drag-drop-area"></div>
    <div class="for-ProgressBar"></div>
    <div class="uploaded-files">
      <h5>Uploaded files:</h5>
      <ol></ol>
    </div>
      <script type="module">
        import {Uppy, DragDrop, ProgressBar, AwsS3 } from "https://releases.transloadit.com/uppy/v3.14.0/uppy.min.mjs"

        // Function for displaying uploaded files
        const onUploadSuccess = (elForUploadedFiles) => (file, response) => {
          const url = response.uploadURL
          const fileName = file.name

          const li = document.createElement('li')
          const a = document.createElement('a')
          a.href = url
          a.target = '_blank'
          a.appendChild(document.createTextNode(fileName))
          li.appendChild(a)

          document.querySelector(elForUploadedFiles).appendChild(li)
        }

        var uppy = new Uppy({
            autoProceed: true,
            restrictions: {
              maxNumberOfFiles: 10,
            }
          })
          .use(DragDrop, {
              inline: true,
              target: '#drag-drop-area'
            })
          .use(ProgressBar, { target: '.example .for-ProgressBar', hideAfterFinish: true })
          .use(AwsS3, {
            getUploadParameters (file) {
              // Send a request to our PHP signing endpoint.
              return fetch('/sign-s3', {
                method: 'post',
                // Send and receive JSON.
                headers: {
                  accept: 'application/json',
                  'content-type': 'application/json',
                },
                body: JSON.stringify({
                  filename: file.name,
                  contentType: file.type,
                }),
              }).then((response) => {
                // Parse the JSON response.
                return response.json()
              }).then((data) => {
                // Return an object in the correct shape.
                return {
                  method: data.method,
                  url: data.url,
                  fields: data.fields,
                  // Provide content type header required by S3
                  headers: {
                    'Content-Type': file.type,
                  },
                }
              })
            },
        });

        uppy.on('complete', (result) => {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });

        uppy.on('upload-success', onUploadSuccess('.example .uploaded-files ol'));
      </script>
    </section>
  </body>
</html>