Uploader for track versions, admin only for now

app/Models/Track.php

@@ -534,7 +534,9 @@ class Track extends Model implements Searchable, Commentable, Favouritable
         $returnValue['username'] = User::whereId($track->user_id)->first()->username;
 
         // Seasonal
-        $returnValue['hwc_submit'] = Playlist::where('user_id', 22549)->first()->tracks()->get()->contains($track);
+        if (Playlist::where('user_id', 22549)->first()) {
+            $returnValue['hwc_submit'] = Playlist::where('user_id', 22549)->first()->tracks()->get()->contains($track);
+        }
 
         return $returnValue;
     }

public/templates/directives/track-editor.html

@@ -118,6 +118,19 @@
                 <input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Username" type="text" id="username" ng-model="track.username" />
                 <div class="error">{{errors.username}}</div>
             </div>
+
+            <div class="col-sm-6 form-row">
+                <label for="title" class="strong">Upload new version</label>
+                <input type="file" name="file" onchange="angular.element(this).scope().fileChanged(this)" ng-model="file" />
+            </div>
+
+            <span ng-repeat="upload in data.queue track by $index" ng-class="{'uploading': upload.isUploading, 'has-error': upload.error != null, 'is-processing': upload.isProcessing || (upload.progress >= 100 && upload.error == null)}" ng-show="!upload.success">
+                <strong ng-show="upload.isUploading && upload.error == null && upload.progress < 100">Uploading&hellip;</strong>
+                <strong ng-show="upload.isProcessing || (upload.isUploading && upload.progress >= 100)">Processing&hellip;</strong>
+                <strong ng-show="upload.error != null">Error</strong>
+                {{::upload.name}} -
+                <strong ng-show="upload.error != null">{{upload.error}}</strong>
+            </span>
         </div>
         <div class="form-row">
             <label class="strong">Choose a License:</label>

resources/assets/scripts/app/directives/track-editor.coffee

@@ -21,8 +21,8 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
         trackId: '=trackId'
 
     controller: [
-        '$scope', '$modal', 'auth', 'account-tracks', 'account-albums', 'taxonomies', 'images'
+        '$scope', '$modal', 'auth', 'account-tracks', 'account-albums', 'taxonomies', 'images', '$state', 'upload'
-        ($scope, $modal, auth, tracks, albums, taxonomies, images) ->
+        ($scope, $modal, auth, tracks, albums, taxonomies, images, $state, upload) ->
             $scope.isDirty = false
             $scope.isSaving = false
             $scope.taxonomies = taxonomies
@@ -33,6 +33,13 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
             $scope.isAdmin = auth.data.isAdmin
             albumsDb = {}
 
+            $scope.data = upload
+            $scope.userSlug = $state.params.slug
+
+            $scope.fileChanged = (e) ->
+                files = e.files
+                $scope.$apply -> upload.uploadNewVersion(files[0], $scope.userSlug, $scope.trackId)
+
             $scope.$watch 'trackId', (newValue, oldValue) ->
                 $scope.updateUI()
 

resources/assets/scripts/app/services/upload.coffee

@@ -20,18 +20,23 @@ module.exports = angular.module('ponyfm').factory('upload', [
         self =
             queue: []
 
-            finishUploadWrapper: (upload)->
+            finishUploadWrapper: (upload, versionUpdate)->
                 ()->
-                    self.finishUpload(upload)
+                    self.finishUpload(upload, versionUpdate)
 
             # Polls for the upload's status
-            finishUpload: (upload) ->
+            finishUpload: (upload, versionUpdate) ->
                 # TODO: update upload status
-                $http.get("/api/web/tracks/#{upload.trackId}/upload-status").then(
+                endpoint = "/api/web/tracks/#{upload.trackId}/upload-status"
+
+                if versionUpdate
+                    endpoint = "/api/web/tracks/#{upload.trackId}/version-upload-status"
+
+                $http.get(endpoint).then(
                     # handle success or still-processing
                     (response)->
                         if response.status == 202
-                            $timeout(self.finishUploadWrapper(upload), 5000)
+                            $timeout(self.finishUploadWrapper(upload, versionUpdate), 5000)
 
                         else if response.status == 201
                             upload.isProcessing = false
@@ -46,7 +51,73 @@ module.exports = angular.module('ponyfm').factory('upload', [
                             upload.error = 'There was an unknown error!'
             )
 
+            uploadProcess: (upload, formData, trackId) ->
+                versionUpdate = false
+                if trackId > 0
+                    versionUpdate = true
 
+                xhr = new XMLHttpRequest()
+                xhr.upload.onprogress = (e) ->
+                    $rootScope.$apply ->
+                        upload.uploadedSize = e.loaded
+                        upload.progress = e.loaded / upload.size * 100
+                        $rootScope.$broadcast 'upload-progress', upload
+
+                # TODO: Implement polling here
+                # event listener
+                xhr.onload = -> $rootScope.$apply ->
+                    upload.isUploading = false
+                    upload.isProcessing = true
+
+                    if xhr.status == 200
+                        # kick off polling
+                        upload.trackId = $.parseJSON(xhr.responseText).id
+                        self.finishUpload(upload, versionUpdate)
+
+                    else
+                        error =
+                            if xhr.getResponseHeader('content-type') == 'application/json'
+                                'Error: ' + $.parseJSON(xhr.responseText)?.errors?.track?.join ', '
+                            else
+                                'There was an unknown error!'
+
+                        upload.isProcessing = false
+                        upload.error = error
+                        $rootScope.$broadcast 'upload-error', [upload, error]
+
+                    accountTracks.refresh(null, true)
+                        .done($rootScope.$broadcast('upload-finished', upload))
+
+                endpoint = '/api/web/tracks/upload'
+
+                if versionUpdate
+                    endpoint = '/api/web/tracks/' + trackId + '/version-upload'
+
+                xhr.open 'POST', endpoint, true
+                xhr.setRequestHeader 'X-XSRF-TOKEN', $.cookie('XSRF-TOKEN')
+                xhr.send formData
+
+            uploadNewVersion: (file, userSlug, trackId) ->
+                upload =
+                    name: file.name
+                    progress: 0
+                    uploadedSize: 0
+                    size: file.size
+                    index: 0
+                    isUploading: true
+                    isProcessing: false
+                    trackId: trackId
+                    success: false
+                    error: null
+
+                self.queue.push upload
+                $rootScope.$broadcast 'upload-added', upload
+
+                formData = new FormData()
+                formData.append('track', file)
+                formData.append('user_slug', userSlug)
+
+                self.uploadProcess(upload, formData, trackId)
 
             upload: (files, userSlug) ->
                 _.each files, (file) ->
@@ -65,44 +136,9 @@ module.exports = angular.module('ponyfm').factory('upload', [
                     self.queue.push upload
                     $rootScope.$broadcast 'upload-added', upload
 
-                    xhr = new XMLHttpRequest()
-                    xhr.upload.onprogress = (e) ->
-                        $rootScope.$apply ->
-                            upload.uploadedSize = e.loaded
-                            upload.progress = e.loaded / upload.size * 100
-                            $rootScope.$broadcast 'upload-progress', upload
-
-                    # TODO: Implement polling here
-                    # event listener
-                    xhr.onload = -> $rootScope.$apply ->
-                        upload.isUploading = false
-                        upload.isProcessing = true
-
-                        if xhr.status == 200
-                            # kick off polling
-                            upload.trackId = $.parseJSON(xhr.responseText).id
-                            self.finishUpload(upload)
-
-                        else
-                            error =
-                                if xhr.getResponseHeader('content-type') == 'application/json'
-                                    'Error: ' + $.parseJSON(xhr.responseText)?.errors?.track?.join ', '
-                                else
-                                    'There was an unknown error!'
-
-                            upload.isProcessing = false
-                            upload.error = error
-                            $rootScope.$broadcast 'upload-error', [upload, error]
-
-                        accountTracks.refresh(null, true)
-                            .done($rootScope.$broadcast('upload-finished', upload))
-
-                    # send the track to the server
                     formData = new FormData()
                     formData.append('track', file)
                     formData.append('user_slug', userSlug)
 
-                    xhr.open 'POST', '/api/web/tracks/upload', true
+                    self.uploadProcess(upload, formData, 0)
-                    xhr.setRequestHeader 'X-XSRF-TOKEN', $.cookie('XSRF-TOKEN')
-                    xhr.send formData
 ])