biheng
/
uppy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Uppy</title>
    <link
      href="https://releases.transloadit.com/uppy/v3.22.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.22.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>