Changeset 64249d6 in uz for src/UploadTest.vue


Ignore:
Timestamp:
2022.10.05 19:45:19 (2 years ago)
Author:
js29a <js29a@…>
Branches:
master
Children:
d45005e
Parents:
4b96189
Message:

UZ upgrade

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/UploadTest.vue

    r4b96189 r64249d6  
    1212const max_jobs = ref(3)
    1313
     14const can_reset = ref(false)
     15const can_start = ref(false)
     16const can_pick = ref(false)
     17const can_abort = ref(false)
     18
    1419const reset = (): void => {
    1520  (inst as any).refs.uploader.reset()
    … …  
    2025}
    2126
     27const pick = (): void => {
     28  (inst as any).refs.uploader.pick()
     29}
     30
     31const abort = (): void => {
     32  (inst as any).refs.uploader.abort()
     33}
     34
    2235</script>
    2336
    2437<template>
    25   <component class='uploader' :is='UploadZone' target='https://vite.js29a.usermd.net/upload.php'
    26              :max-jobs='max_jobs' :auto-start='auto_start' :auto-reset='auto_reset'
    27              :keep-going='keep_going' ref='uploader'>
    28     <template #idle='{ pick }'>
    29       <div class='idle'>
    30         idle
    31         <br />
    32         <button @click='pick()'>pick</button>
    33       </div>
    34     </template>
    35 
    36     <template #hover>
    37       <div class='hover'>
    38         hover
    39       </div>
    40     </template>
    41 
    42     <template #wait='{ start, queue }'>
    43       <div class='wait'>
    44         wait
    45         <br />
    46         <button @click='pick()'>pick</button>
    47         <br />
    48         <button @click='start()'>start</button>
    49         <br/>
    50         <div v-for='file in queue'>{{ file.name }}</div>
    51       </div>
    52     </template>
    53 
    54     <template #uploading='{ progress, current, queue, abort, errors }'>
    55       <div class='uploading'>
    56         uploading
    57         <br />
    58         <button @click='abort()'>abort</button>
    59         <br />
    60         {{ progress.length }} / {{ current.length }} / {{ queue.length }}
    61         <br />
    62         <button @click='abort()'>abort</button>
    63         <b>errors:</b> <span v-for='error in errors'>{{ error.file.name }}</span>
    64         <b>progress:</b> <div v-for='item in progress'>{{ item }}</div>
    65         <b>current:</b>
    66         <div v-for='item in current'>
    67           {{ item.file.name }}: {{ item.current }} of {{ item.total }}
    68         </div>
    69         <b>remaining:</b>
    70         <div v-for='file in queue'>{{ file.name }}</div>
    71       </div>
    72     </template>
    73 
    74     <template #done='{ result, reset }'>
    75       <div class='done'>
    76         done
    77         <br />
    78         <button @click='reset()'>reset</button>
    79         <br />
    80         <div v-for='item in result'>{{ item }}</div>
    81       </div>
    82     </template>
    83 
    84     <template #error='{ error, reset }'>
    85       <div class='error'>
    86         error
    87         <br />
    88         <button @click='reset()'>reset</button>
    89         <div>{{ error }}</div>
    90       </div>
    91     </template>
    92 
    93     <template #aborted='{ result, reset }'>
    94       <div class='aborted'>
    95         aborted
    96         <br />
    97         <button @click='reset()'>reset</button>
    98         <div v-for='item in result'>{{ item }}</div>
    99       </div>
    100     </template>
    101 
    102     <template #with-errors='{ result, errors }'>
    103       <div class='with-errors'>
    104         with errors
    105         <br />
    106         <b>errors(s):</b>
    107         <div v-for='item in errors'>{{ item.file.name }} / {{ item.error }}</div>
    108         <b>ok:</b>
    109         <div v-for='item in result'>{{ item }}</div>
    110       </div>
    111     </template>
    112   </component>
     38  <div class='over'>
     39    <button @click='pick' :disabled='!can_pick'>pick</button>
     40    <span>&nbsp;</span>
     41    <button @click='start' :disabled='!can_start'>start</button>
     42    <span>&nbsp;</span>
     43    <button @click='abort' :disabled='!can_abort'>abort</button>
     44    <span>&nbsp;</span>
     45    <button @click='reset' :disabled='!can_reset'>reset</button>
     46    <p />
     47    <input type='checkbox' v-model='auto_start' id='auto-start' />
     48    <label for='auto-start'>&nbsp;auto-start</label><br />
     49    <input type='checkbox' v-model='auto_reset' id='auto-reset' />
     50    <label for='auto-reset'>&nbsp;auto-reset</label><br />
     51    <input type='checkbox' v-model='keep_going' id='keep-going' />
     52    <label for='keep-going'>&nbsp;keep-going</label><br />
     53    <p />
     54
     55    <component class='uploader' :is='UploadZone' target='https://vite.js29a.usermd.net/upload.php'
     56               :max-jobs='max_jobs' :auto-start='auto_start' :auto-reset='auto_reset'
     57               :keep-going='keep_going' ref='uploader'
     58               @update:canPick='(flag: boolean) => can_pick = flag'
     59               @update:canStart='(flag: boolean) => can_start = flag'
     60               @update:canAbort='(flag: boolean) => can_abort = flag'
     61               @update:canReset='(flag: boolean) => can_reset = flag'>
     62      <template #idle='{ pick }'>
     63        <div class='idle'>
     64          idle
     65          <br />
     66          <button @click='pick()'>pick</button>
     67        </div>
     68      </template>
     69
     70      <template #hover>
     71        <div class='hover'>
     72          hover
     73        </div>
     74      </template>
     75
     76      <template #wait='{ start, queue }'>
     77        <div class='wait'>
     78          wait
     79          <br />
     80          <button @click='pick()'>pick</button>
     81          <br />
     82          <button @click='start()'>start</button>
     83          <br/>
     84          <div v-for='file in queue'>{{ file.name }}</div>
     85        </div>
     86      </template>
     87
     88      <template #uploading='{ progress, current, queue, abort, errors }'>
     89        <div class='uploading'>
     90          uploading
     91          <br />
     92          <button @click='abort()'>abort</button>
     93          <br />
     94          {{ progress.length }} / {{ current.length }} / {{ queue.length }}
     95          <br />
     96          <button @click='abort()'>abort</button>
     97          <b>errors:</b> <span v-for='error in errors'>{{ error.file.name }}</span>
     98          <b>progress:</b> <div v-for='item in progress'>{{ item }}</div>
     99          <b>current:</b>
     100          <div v-for='item in current'>
     101            {{ item.file.name }}: {{ item.current }} of {{ item.total }}
     102          </div>
     103          <b>remaining:</b>
     104          <div v-for='file in queue'>{{ file.name }}</div>
     105        </div>
     106      </template>
     107
     108      <template #done='{ result, reset }'>
     109        <div class='done'>
     110          done
     111          <br />
     112          <button @click='reset()'>reset</button>
     113          <br />
     114          <div v-for='item in result'>{{ item }}</div>
     115        </div>
     116      </template>
     117
     118      <template #error='{ error, reset }'>
     119        <div class='error'>
     120          error
     121          <br />
     122          <button @click='reset()'>reset</button>
     123          <div>{{ error }}</div>
     124        </div>
     125      </template>
     126
     127      <template #aborted='{ result, reset }'>
     128        <div class='aborted'>
     129          aborted
     130          <br />
     131          <button @click='reset()'>reset</button>
     132          <div v-for='item in result'>{{ item }}</div>
     133        </div>
     134      </template>
     135
     136      <template #with-errors='{ result, errors }'>
     137        <div class='with-errors'>
     138          with errors
     139          <br />
     140          <b>errors(s):</b>
     141          <div v-for='item in errors'>{{ item.file.name }} / {{ item.error }}</div>
     142          <b>ok:</b>
     143          <div v-for='item in result'>{{ item }}</div>
     144        </div>
     145      </template>
     146    </component>
     147  </div>
    113148</template>
    114149
    115150<style scoped>
    116151
    117 .uploader {
    118   border: 3px dashed #fff;
    119   width: 512px;
    120   height: 384px;
     152.over {
    121153  position: absolute;
    122154  border-radius: 20px;
    … …  
    124156  left: 50%;
    125157  transform: translate(-50%, -50%);
     158}
     159
     160.uploader {
     161  border: 3px dashed #fff;
     162  width: 512px;
     163  height: 384px;
     164  display: inline-block;
    126165}
    127166
Note: See TracChangeset for help on using the changeset viewer.