Ни на сайте emberjs.com, ни в еще какой документации я так и не нашел описания - как загрузить файл с использование Ember js. И действительно, средствами Ember js - никак. Поэтому нужно использовать либо js XMLHttpRequest, либо jQuery ajax.
Я разрабатываю - фронтэнд на Ember js, бакэнд на Django. Мне надо загрузить файлы на бакэнд.
Порядок загрузки файла на фронэнде следующий:
1) Находится файл на странице:
2) Создается formData и в нее добавляются все необходимые для отправки данные, в том числе и файл:
3) Собранная formData отсылается (POST) на url бакэнда с добавлением дополнительных заголовков.
Сначала пример POST запроса с использованием XMLHttpRequest
//1
А теперь пример отправки файла с использованием jQuery ajax, взятого из рабочего кода:
route.js
template.hbs
На 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)
Вроде и не сложно.
Я разрабатываю - фронтэнд на 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];
//2let formData = new FormData();
formData.append('creator', creator_id);
formData.append('attachment', fileUpload); 
//3let 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)
Вроде и не сложно.
 
Комментариев нет:
Отправить комментарий