Fix #106 and #213: better web uploader, that supports Flac files

changes/changelog.d/106.bugfix

@@ -0,0 +1 @@
+File-upload importer should now work properly, assuming files are tagged (#106)

changes/changelog.d/213.bugfix

@@ -0,0 +1,9 @@
+File-upload import now supports Flac files (#213)
+
+Flac files imports via upload
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+You have nothing to do to benefit from this, however, since Flac files
+tend to be a lot bigger than other files, you may want to increase the
+``client_max_body_size`` value in your Nginx configuration if you plan
+to upload flac files.

front/src/components/library/import/FileUpload.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
     <div v-if="batch" class="ui container">
+      <div class="ui message">
+        {{ $t('Ensure your music files are properly tagged before uploading them.') }}
+        <a href="http://picard.musicbrainz.org/" target='_blank'>{{ $t('We recommend using Picard for that purpose.') }}</a>
+      </div>
       <file-upload-widget
         :class="['ui', 'icon', 'left', 'floated', 'button']"
         :post-action="uploadUrl"
@@ -8,7 +12,7 @@
         :size="1024 * 1024 * 30"
         :data="uploadData"
         :drop="true"
-        extensions="ogg,mp3"
+        extensions="ogg,mp3,flac"
         accept="audio/*"
         v-model="files"
         name="audio_file"
@@ -21,7 +25,7 @@
     </file-upload-widget>
       <button
         :class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
-        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
+        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="startUpload()">
         <i class="play icon" aria-hidden="true"></i>
         <i18next path="Start Upload"/>
       </button>
@@ -88,7 +92,7 @@ export default {
     inputFilter (newFile, oldFile, prevent) {
       if (newFile && !oldFile) {
         let extension = newFile.name.split('.').pop()
-        if (['ogg', 'mp3'].indexOf(extension) < 0) {
+        if (['ogg', 'mp3', 'flac'].indexOf(extension) < 0) {
           prevent()
         }
       }
@@ -114,6 +118,10 @@ export default {
       }, (response) => {
         logger.default.error('error while launching creating batch')
       })
+    },
+    startUpload () {
+      this.$emit('batch-created', this.batch)
+      this.$refs.upload.active = true
     }
   },
   computed: {

front/src/components/library/import/Main.vue

@@ -24,16 +24,25 @@
       <div class="ui hidden divider"></div>
       <div class="ui centered buttons">
         <button @click="currentStep -= 1" :disabled="currentStep === 0" class="ui icon button"><i class="left arrow icon"></i><i18next path="Previous step"/></button>
-        <button @click="currentStep += 1" v-if="currentStep < 2" class="ui icon button"><i18next path="Next step"/><i class="right arrow icon"></i></button>
+        <button @click="nextStep()" v-if="currentStep < 2" class="ui icon button"><i18next path="Next step"/><i class="right arrow icon"></i></button>
         <button
           @click="$refs.import.launchImport()"
-          v-if="currentStep === 2"
+          v-if="currentStep === 2 && currentSource != 'upload'"
           :class="['ui', 'positive', 'icon', {'loading': isImporting}, 'button']"
           :disabled="isImporting || importData.count === 0"
           >
             <i18next path="Import {%0%} tracks">{{ importData.count }}</i18next>
             <i class="check icon"></i>
           </button>
+        <button
+          v-else-if="currentStep === 2 && currentSource === 'upload'"
+          @click="$router.push({name: 'library.import.batches.detail', params: {id: importBatch.id}})"
+          :class="['ui', 'positive', 'icon', {'disabled': !importBatch}, 'button']"
+          :disabled="!importBatch"
+          >
+            {{ $t('Finish import' )}}
+            <i class="check icon"></i>
+          </button>
       </div>
       <div class="ui hidden divider"></div>
       <div class="ui attached segment">
@@ -100,6 +109,7 @@
         <div v-if="currentStep === 2">
           <file-upload
             ref="import"
+            @batch-created="updateBatch"
             v-if="currentSource == 'upload'"
             ></file-upload>
 
@@ -165,6 +175,7 @@ export default {
       currentSource: this.source,
       metadata: {},
       isImporting: false,
+      importBatch: null,
       importData: {
         tracks: []
       },
@@ -214,11 +225,22 @@ export default {
     updateId (newValue) {
       this.currentId = newValue
     },
+    updateBatch (batch) {
+      this.importBatch = batch
+    },
     fetchRequest (id) {
       let self = this
       axios.get(`requests/import-requests/${id}`).then((response) => {
         self.currentRequest = response.data
       })
+    },
+    nextStep () {
+      if (this.currentStep === 0 && this.currentSource === 'upload') {
+        // we skip metadata directly
+        this.currentStep += 2
+      } else {
+        this.currentStep += 1
+      }
     }
   },
   computed: {