work on file upload

ffplayout/api/views.py

@@ -1,8 +1,9 @@
+from rest_framework.parsers import FileUploadParser, JSONParser
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
-from .utils import (SystemStats, get_media_path, read_yaml, write_yaml,
-                    read_json)
+from .utils import (SystemStats, get_media_path, read_json, read_yaml,
+                    write_yaml)
 
 
 class Config(APIView):
@@ -10,6 +11,7 @@ class Config(APIView):
     read and write config from ffplayout engine
     for reading endpoint is: http://127.0.0.1:8000/api/config/?config
     """
+    parser_classes = [JSONParser]
 
     def get(self, request, *args, **kwargs):
         if 'config' in request.GET.dict():
@@ -90,3 +92,15 @@ class Media(APIView):
             return Response({'tree': get_media_path()})
         else:
             return Response({"success": False})
+
+
+class FileUpload(APIView):
+    parser_classes = [FileUploadParser]
+
+    def put(self, request, filename, format=None):
+        file_obj = request.data['file']
+        print(filename)
+        with open(filename, 'wb+') as outfile:
+            for chunk in file_obj.chunks():
+                outfile.write(chunk)
+        return Response(status=204)

ffplayout/ffplayout/urls.py

@@ -14,7 +14,7 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import include, path
+from django.urls import include, path, re_path
 
 from rest_framework import routers
 from api import views
@@ -38,5 +38,6 @@ urlpatterns = [
     path('auth/token/', TokenObtainPairView.as_view(),
          name='token_obtain_pair'),
     path('auth/token/refresh/', TokenRefreshView.as_view(),
-         name='token_refresh')
+         name='token_refresh'),
+    re_path(r'^upload/(?P<filename>[^/]+)$',  views.FileUpload.as_view())
 ]

ffplayout/frontend/pages/media.vue

@@ -40,7 +40,8 @@
                                     class="browser-item"
                                 >
                                     <b-link>
-                                        <b-icon-film class="browser-icons" />  {{ file }}
+                                        <b-icon-film class="browser-icons" />  {{ file.file }}
+                                        <span class="duration">{{ file.duration | toMin }}</span>
                                     </b-link>
                                 </b-list-group-item>
                             </b-list-group>
@@ -49,6 +50,20 @@
                 </b-row>
             </div>
         </b-container>
+        <b-form @submit="onSubmit">
+            <b-form-file
+                v-model="inputFile"
+                :state="Boolean(inputFile)"
+                placeholder="Choose a file or drop it here..."
+                drop-placeholder="Drop file here..."
+            />
+            <b-button type="submit" variant="primary">
+                Submit
+            </b-button>
+        </b-form>
+        <div class="mt-3">
+            Selected file: {{ inputFile ? inputFile.name : '' }}
+        </div>
     </div>
 </template>
 
@@ -60,6 +75,12 @@ export default {
 
     components: {},
 
+    data () {
+        return {
+            inputFile: null
+        }
+    },
+
     computed: {
         ...mapState('media', ['crumbs', 'folderTree'])
     },
@@ -72,6 +93,22 @@ export default {
         async getPath (path) {
             await this.$store.dispatch('auth/inspectToken')
             await this.$store.dispatch('media/getTree', path)
+        },
+
+        onSubmit (evt) {
+            evt.preventDefault()
+            console.log(this.inputFile)
+            const config = {
+                onUploadProgress: (progressEvent) => {
+                    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+                    console.log(percentCompleted)
+                },
+                headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken }
+            }
+
+            this.$axios.put('/upload/?path=/ffplayout/test.mp4', this.inputFile, config)
+                .then(res => console.log(res))
+                .catch(err => console.log(err))
         }
     }
 }