воскресенье, 19 февраля 2017 г.

Ember file upload to Django

Ни на сайте emberjs.com, ни в еще какой документации я так и не нашел описания - как загрузить файл с использование Ember js. И действительно, средствами Ember js - никак. Поэтому нужно использовать либо js XMLHttpRequest, либо jQuery ajax.

Я разрабатываю - фронтэнд на  Ember js, бакэнд на Django. Мне надо загрузить файлы на бакэнд.
Порядок загрузки файла на фронэнде следующий:

1) Находится файл на странице:
let fileUpload = document.getElementById('file-field').files[0]; 

2) Создается formData и в нее добавляются все необходимые для отправки данные, в том числе и файл:
let formData = new FormData();
formData.append('creator', creator_id);
formData.append('attachment', fileUpload); 

3) Собранная  formData отсылается (POST) на url бакэнда с добавлением дополнительных заголовков.

Сначала пример POST запроса с использованием XMLHttpRequest

//1
let fileUpload = document.getElementById('file-field').files[0];
//2
let formData = new FormData();
formData.append('creator', creator_id);
formData.append('attachment', fileUpload); 
//3
let req = new XMLHttpRequest();
req.open('POST', url);
let jwtoken = this.get('session.data.authenticated.access_token');
req.setRequestHeader('Authorization', 'Bearer ' + jwtoken);
req.send(formData)



А теперь пример отправки файла с использованием jQuery ajax, взятого из рабочего кода:

route.js

  actions: {
    saveFile() {
      let model = this.controller.get('model');
      let creator_id = this.get('session.data.authenticated.user.id');
      let fileUpload = document.getElementById('file-field').files[0];
 
      let host = this.store.adapterFor('application').get('host');
      let url = host + '/api/task/taskfiles/';
 
      let formData = new FormData();
      formData.append('task', model.get('task.id'));
      formData.append('creator', creator_id);
      formData.append('attachment', fileUpload);
 
      let jwtoken = this.get('session.data.authenticated.access_token');
 
      Ember.$.ajax({
        url: url,
        type: 'POST',
        beforeSend: function(request) {
          request.setRequestHeader('Authorization', 'Bearer ' + jwtoken);
        },
        data: formData,
        processData: false,
        contentType: false
      })
        .then((response)=>{
          console.log(response);
          this.store.findRecord('task/taskfile', response.id);
          this.transitionTo('task.taskfiles');
        })
        .catch(response => {
          //console.log(response);
          if (response.responseJSON.attachment) {
            this.controller.set('errorMessage', 'File do not selected');
          }
        });
 
    },

template.hbs

  <h3>Adding a new file</h3>
 
  <p>{{errorMessage}}</p>
  <input type='file' id='file-field' class="form-control" name="file"/>
  <button class="btn btn-success form-control" type="submit" {{action 'saveFile' model}}>{{t "Save"}}</button>

На Ember фронэнтде разобрались как отсылать.
Теперь настройка Django бакэнда, а точнее Django-rest-framework, для приема файла

В serializers.py все стандартно

class TaskFileSerializer(serializers.ModelSerializer):
    class Meta:
        model = TaskFile
        fields = ('id', 'creator', 'task','attachment')


А во views.py надо добавить:

from rest_framework.parsers import MultiPartParser, FormParser
 
TaskFileViewSet(viewsets.ModelViewSet):
    queryset = TaskFile.objects.all()
    serializer_class = TaskFileSerializer
    parser_classes = (MultiPartParser, FormParser)


Вроде и не сложно.

Комментариев нет:

Отправить комментарий

django-oscar tinymce 4 filebrowser

Задача: в дашборде django-oscar загружать изображения 1. Установка django-filebrowser-no-grappelli - Открываем проект, загружаем виртуа...