Ни на сайте 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)
Вроде и не сложно.
