-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat($UI): add large file upload demo page
- Loading branch information
1 parent
17cbdf0
commit 8d51be4
Showing
18 changed files
with
204 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
72 changes: 72 additions & 0 deletions
72
universal-ui/src/main/resources/static/large-file-upload/index.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| -webkit-box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Montserrat', sans-serif; | ||
| background: #535c68; | ||
| } | ||
|
|
||
| .wrapper { | ||
| margin: auto; | ||
| max-width: 640px; | ||
| padding-top: 60px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .container { | ||
| background-color: #f9f9f9; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| /*border: 0.5px solid rgba(130, 130, 130, 0.25);*/ | ||
| /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), | ||
| 0 0 0 1px rgba(0, 0, 0, 0.1);*/ | ||
| } | ||
|
|
||
| h1 { | ||
| color: #130f40; | ||
| font-family: 'Varela Round', sans-serif; | ||
| letter-spacing: -.5px; | ||
| font-weight: 700; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .upload-container { | ||
| background-color: rgb(239, 239, 239); | ||
| border-radius: 6px; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .border-container { | ||
| border: 5px dashed rgba(198, 198, 198, 0.65); | ||
| /* border-radius: 4px; */ | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .border-container p { | ||
| color: #130f40; | ||
| font-weight: 600; | ||
| font-size: 1.1em; | ||
| letter-spacing: -1px; | ||
| margin-top: 30px; | ||
| margin-bottom: 0; | ||
| opacity: 0.65; | ||
| } | ||
|
|
||
| #file-browser { | ||
| text-decoration: none; | ||
| color: rgb(22,42,255); | ||
| border-bottom: 3px dotted rgba(22, 22, 255, 0.85); | ||
| } | ||
|
|
||
| #file-browser:hover { | ||
| color: rgb(0, 0, 255); | ||
| border-bottom: 3px dotted rgba(0, 0, 255, 0.85); | ||
| } | ||
|
|
||
| .icons { | ||
| color: #95afc0; | ||
| opacity: 0.55; | ||
| } |
33 changes: 33 additions & 0 deletions
33
universal-ui/src/main/resources/static/large-file-upload/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Large File Upload Demo</title> | ||
| <link href="../asset/favicon.ico" rel="icon"> | ||
| <link href="index.css" rel="stylesheet"> | ||
| <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <div id="app"> | ||
| <div class="wrapper"> | ||
| <div class="container"> | ||
| <h1>Upload a file</h1> | ||
| <div class="upload-container"> | ||
| <div class="border-container"> | ||
| <div class="icons fa-4x"> | ||
| <i class="fas fa-file-image" data-fa-transform="shrink-3 down-2 left-6 rotate--45"></i> | ||
| <i class="fas fa-file-alt" data-fa-transform="shrink-2 up-4"></i> | ||
| <i class="fas fa-file-pdf" data-fa-transform="shrink-3 down-2 right-6 rotate-45"></i> | ||
| </div> | ||
| <input @change="onFilePicked" id="file-input" type="file"> | ||
| <p>Drag and drop files here, or <a href="#" id="file-browser">browse</a> your computer.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | ||
| <script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script> | ||
| <script src="index.js"></script> | ||
| </html> |
85 changes: 85 additions & 0 deletions
85
universal-ui/src/main/resources/static/large-file-upload/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| // 64 megabytes | ||
| const BYTES_PER_CHUNK = 64 * 1048576 | ||
| // noinspection JSUnresolvedFunction | ||
| new Vue({ | ||
| el: '#app', | ||
| data: { | ||
| appInfo: null, | ||
| videoSource: '', | ||
| split: window.location.href.split('/') | ||
| }, | ||
| methods: { | ||
| async onFilePicked(event) { | ||
| const files = event.target.files | ||
| const blob = files[0] | ||
| console.info('blob', blob) | ||
| let startByte = 0 | ||
| let endByte = 0 | ||
| let index = 0 | ||
| const slices = Math.ceil(blob.size / BYTES_PER_CHUNK) | ||
| const uploadResourceChunkPayload = { | ||
| bucket: '', | ||
| filename: blob.name | ||
| } | ||
| const objectList = [] | ||
| while (startByte < blob.size) { | ||
| endByte = startByte + BYTES_PER_CHUNK | ||
| if (endByte > blob.size) { | ||
| endByte = blob.size | ||
| } | ||
| const response = await this.uploadResourceChunk(blob, index, startByte, endByte, uploadResourceChunkPayload) | ||
| objectList.push(response.data.object) | ||
| console.info('response', response) | ||
| if (index === 0) { | ||
| uploadResourceChunkPayload.bucket = response.data.bucket | ||
| console.warn('Set uploadResourceChunkPayload', uploadResourceChunkPayload) | ||
| } | ||
| startByte = endByte | ||
| index++ | ||
| if (index >= slices) { | ||
| if (slices === 1) { | ||
| console.error(`The slices count is ${slices}, should not be Uploaded by chunk`) | ||
| } | ||
| console.info(`Finished uploading all chunks. index >= slices. index = ${index}, slice = ${slices}`); | ||
| const mergeResponse = await this.mergeResourceChunk(uploadResourceChunkPayload.bucket, objectList); | ||
| console.info('Finished merging all chunks', mergeResponse); | ||
| } | ||
| } | ||
| }, | ||
| async uploadResourceChunk(blob, index, start, end, uploadResourceChunkPayload) { | ||
| console.info(`uploadFile blog: ${blob}, index: ${index}, start: ${start}, end: ${end}, uploadResourceChunkPayload: `, uploadResourceChunkPayload) | ||
| const formData = new FormData() | ||
| formData.append('bucket', uploadResourceChunkPayload.bucket) | ||
| formData.append('chunkNumber', index) | ||
| formData.append('filename', uploadResourceChunkPayload.filename) | ||
| formData.append('file', blob.slice(start, end)) | ||
| const url = `${this.split[0]}//${this.split[2]}/upload/chunk` | ||
| const resp = await fetch(url, { | ||
| method: 'POST', | ||
| body: formData, | ||
| headers: { | ||
| 'Content-Disposition': `form-data; name="file"; filename="${blob.name}"` | ||
| } | ||
| }) | ||
| return await resp.json() | ||
| }, | ||
| async mergeResourceChunk(bucket, objectList) { | ||
| const mergeResourcePayload = { | ||
| 'bucket': bucket, | ||
| 'objectList': objectList | ||
| } | ||
| const url = `${this.split[0]}//${this.split[2]}/merge/chunk` | ||
| const resp = await fetch(url, { | ||
| method: 'PUT', | ||
| body: JSON.stringify(mergeResourcePayload), | ||
| headers: { | ||
| 'Content-Type': 'application/json' | ||
| } | ||
| }) | ||
| return await resp.json() | ||
| } | ||
| }, | ||
| mounted() { | ||
| console.log('mounted') | ||
| } | ||
| }); |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.