Changeset 35898 for main/trunk


Ignore:
Timestamp:
2022-01-07T13:16:27+13:00 (2 years ago)
Author:
cstephen
Message:

Allow files to be dropped onto the upload bar

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue

    r35885 r35898  
    5656            this.$refs.audioFileInput.click();
    5757        },
     58        onFilesDropped(ev) {
     59            ev.preventDefault();
     60
     61            if (ev.dataTransfer.items) {
     62                for (let i = 0; i < ev.dataTransfer.items.length; i++) {
     63                    if (ev.dataTransfer.items[i].kind !== "file") {
     64                        continue;
     65                    }
     66
     67                    const file = ev.dataTransfer.items[i].getAsFile();
     68                    this.files.push(file);
     69                }
     70            }
     71            else {
     72                this.files.push(ev.dataTransfer.files);
     73            }
     74        },
    5875        onFilesChanged() {
    59             this.files = [];
    6076            const files = this.$refs.audioFileInput.files;
    6177
    62             if (files?.length !== undefined && files?.length > 0) {
    63                 for (const file of files) {
    64                     this.files.push(file);
    65                 }
    66             }
    67         },
     78            if (files?.length === undefined || files?.length === 0) {
     79                return;
     80            }
     81
     82            for (const file of files) {
     83                this.files.push(file);
     84            }
     85        },
     86
    6887        async doTranscription() {
    6988            this.isTranscribing = true;
    … …  
    7695            // Else call getTranscriptions();
    7796            // Then, we don't have to worry about preventing the user from transcribing multiple items.
     97        },
     98        /**
     99         * Gets the transcription of each submitted audio file.
     100         * @param {File[]} files The files to transcribe.
     101         */
     102        async getTranscriptions(files) {
     103            const validFiles = [];
     104
     105            // Skip any files that have already been transcribed
     106            for (const file of files) {
     107                if (this.$store.getters.hasTranscriptionOfFile(file)) {
     108                    this.createFailure(file.name, this.translations.get("AudioUpload_AlreadyTranscribed"));
     109                }
     110                else {
     111                    validFiles.push(file);
     112                }
     113            }
     114
     115            if (validFiles.length === 0) {
     116                return;
     117            }
     118
     119            try {
     120                for await (const batch of transcribeService.batchTranscribeFiles(validFiles)) {
     121                    for (const t of batch) {
     122                        if (!t.success) {
     123                            this.createFailure(t.file_name, t.log);
     124                            continue;
     125                        }
     126
     127                        const f = files.find(f => f.name === t.file_name);
     128                        if (f === undefined) {
     129                            this.createFailure(t.file_name, this.translations.get("ErrorTryAgain"));
     130                            continue;
     131                        }
     132
     133                        const tvm = new TranscriptionViewModel(t, f);
     134
     135                        try {
     136                            this.$store.commit("rawTranscriptionAdd", tvm);
     137                        }
     138                        catch (TranscriptionExistsError) {
     139                            this.createFailure(t.file_name, this.translations.get("AudioUpload_AlreadyTranscribed"));
     140                        }
     141                    }
     142                }
     143            }
     144            catch (e) {
     145                log("Failed to transcribe files", "error");
     146                log(e);
     147
     148                this.createFailure(e.fileName, e.message)
     149            }
     150        },
     151
     152        createFailure(fileName, reason) {
     153            const failure = new TranscriptionViewFailure(fileName, reason);
     154            this.failures.set(failure.id, failure);
    78155        },
    79156        /**
    … …  
    83160        dismissFailure(id) {
    84161            this.failures.delete(id);
    85         },
    86         /**
    87          * Gets the transcription of each submitted audio file.
    88          * @param {File[]} files The files to transcribe.
    89          */
    90         async getTranscriptions(files) {
    91             const validFiles = [];
    92 
    93             // Skip any files that have already been transcribed
    94             for (const file of files) {
    95                 if (this.$store.getters.hasTranscriptionOfFile(file)) {
    96                     this.createFailure(file.name, this.translations.get("AudioUpload_AlreadyTranscribed"));
    97                 }
    98                 else {
    99                     validFiles.push(file);
    100                 }
    101             }
    102 
    103             if (validFiles.length === 0) {
    104                 return;
    105             }
    106 
    107             try {
    108                 for await (const batch of transcribeService.batchTranscribeFiles(validFiles)) {
    109                     for (const t of batch) {
    110                         if (!t.success) {
    111                             this.createFailure(t.file_name, t.log);
    112                             continue;
    113                         }
    114 
    115                         const f = files.find(f => f.name === t.file_name);
    116                         if (f === undefined) {
    117                             this.createFailure(t.file_name, this.translations.get("ErrorTryAgain"));
    118                             continue;
    119                         }
    120 
    121                         const tvm = new TranscriptionViewModel(t, f);
    122 
    123                         try {
    124                             this.$store.commit("rawTranscriptionAdd", tvm);
    125                         }
    126                         catch (TranscriptionExistsError) {
    127                             this.createFailure(t.file_name, this.translations.get("AudioUpload_AlreadyTranscribed"));
    128                         }
    129                     }
    130                 }
    131             }
    132             catch (e) {
    133                 log("Failed to transcribe files", "error");
    134                 log(e);
    135 
    136                 this.createFailure(e.fileName, e.message)
    137             }
    138         },
    139         createFailure(fileName, reason) {
    140             const failure = new TranscriptionViewFailure(fileName, reason);
    141             this.failures.set(failure.id, failure);
    142162        }
    143163    }
    … …  
    149169    <div class="audio-file-picker">
    150170        <div class="input-bar">
    151             <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
     171            <div class="text-input-sl" style="cursor: pointer;"
     172                @click="openFilePicker" @drop="onFilesDropped" @dragover="$event.preventDefault()">
    152173                <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
    153174                <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</span>
Note: See TracChangeset for help on using the changeset viewer.