Добро пожаловать в мою 4-ю серию о путешествии EmberJS+Firebase. В моей последней истории я рассказал вам, как загрузить файл csv для заполнения таблицы данных, а затем отправить его в Firebase. Сегодня мы кратко рассмотрим, как мы можем загружать изображения, используя тот же компонент; Emberx-Файл-Ввод.

Я разработал hbs, чтобы выглядеть так:

<div class=”form-group”>
 <label class=”col-sm-2 control-label”>Image<br>(200x200)</label>
 <div class=”col-sm-10"> 
 <img id=’output’ height=”200" width=”200" hidden={{shouldHideImage}}>
 <p></p>
 {{x-file-input class=”custom-class” multiple=false name=”files” action=(action “didSelectImage”) accept=”image/*” alt=”Upload Image”}}
 </div> 
 </div>

Здесь я установил тег ‹img›, чтобы иметь идентификатор dom 'output', чтобы мы могли просмотреть загруженное изображение позже с размером 200 на 200. Затем мы добавляем интервал между ними и вызываем компонент «x-file-input », запретить несколько файлов, так как в этом случае я разрешаю загрузку только одного файла. «files» требуется компоненту для хранения файла в массиве. Затем мы подключаем метод действия, я называю его «didSelectImage», который будет запускаться, когда пользователь выполняет загрузку. Я установил ограничение на «png», поэтому, когда пользователь выполняет загрузку, автоматически устанавливается формат «png».

После настройки внешнего вида, например, подключите их к нашему контроллеру! Во-первых, я создам несколько переменных, чтобы подготовить мою базу данных и файл:

firebaseApp: Ember.inject.service(),
storageRef: ‘’,
file: ‘’,

С настройкой этих переменных мы теперь создадим метод действия «didSelectImage»:

didSelectImage(files){
let reader = new FileReader();
// Ember.run.bind
 reader.onloadend = run.bind(this, function(){
 var dataURL = reader.result;
 var output = document.getElementById(‘output’);
 output.src = dataURL;
 this.set(‘file’, files[0]);
 });
 //debugger;
 reader.readAsDataURL(files[0]);
 
 },

У нас есть входные файлы из компонента загрузки файлов, который мы используем, так как по умолчанию компонент принимает массив файлов. Как и в предыдущей загрузке csv, мы создаем новый FileReader, вызываем onloadend (подробнее), после завершения загрузки мы ищем наш элемент с идентификатором 'output', если вы помните, это был наш ‹img›, поэтому мы загружаем данные из нашей программы чтения файлов для предварительного просмотра изображения в ‹img›. Затем мы устанавливаем файл изображения из первого элемента массива файлов в переменную файл.

Итак, здесь мы достигли 2 вещей:

1. Сохранение нашего файла в локальной переменной с вызовом «file».
2. Получение данных изображения и загрузка их в наш тег ‹img›.

Теперь, когда у нас есть готовый файл, давайте отправим его в наше хранилище Firebase! Есть несколько вещей, которые нам нужно сделать, чтобы подготовить его к отправке:

1. Создайте метаданные файла
2. Получите ссылку на хранилище Firebase
3. Создайте путь к новому файлу

// Create the file metadata
 var metadata = {
 contentType: ‘image/png’
 };
var storageRef = this.get(‘firebaseApp’).storage().ref();
 var path = ‘images/plans/’ + newPlan.get(‘id’) + ‘.png’;

Теперь мы готовы отправить его в firebase!

Мы будем использовать API хранилища Firebase (UploadTask). Сначала мы создаем задачу с нашим файлом и метаданными.

var uploadTask = storageRef.child(path).put(this.get(‘file’), metadata);

Затем мы используем uploadTask.on и позволяем firebase творить чудеса!

uploadTask.on(‘state_changed’, function(snapshot){
 var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 console.log(‘Upload is ‘ + progress + ‘% done’);
 console.log(snapshot.state);
 }, function(error) {
 }, function() {
 var downloadURL = uploadTask.snapshot.downloadURL;
 newPlan.set(‘imageUrl’, downloadURL);
 newPlan.save().then(() => ctrl.transitionToRoute(‘plans’));
 ctrl.set(‘file’, ‘’);
 ctrl.set(‘selectedCategory’, ‘’);
 ctrl.set(document.getElementById(‘output’).src, ‘’);
 ctrl.set(‘days’, ‘’);
 ctrl.set(‘isDisabled’, true);
 });

Здесь мы можем фактически получить количество данных, переданных для обновления индикатора выполнения, и как только это будет сделано, мы вызовем «uploadTask.snapshot.downloadURL», чтобы получить URL-адрес нашего загруженного изображения, затем мы продолжим и отправим наши вновь созданные данные модель для firebase! А вот как это будет выглядеть в консоли:

Мы можем создавать папки для упорядочивания наших изображений по мере масштабирования системы, и я использовал идентификатор модели в качестве имени файла. Если ваша модель содержит более одного изображения, лучше использовать другие способы создания имени файла. Вот как выглядит модель с URL:

Итак, что мы сделали сегодня? :

1. Мы подготовили наше представление для загрузки изображения и предварительного просмотра изображения.
2. Мы подключили наше средство загрузки и предварительного просмотра изображений к нашему контроллеру.
3. Мы подключили хранилище Firebase и отправили файл изображения.
> 4. Мы устанавливаем URL-адрес изображения для нашей модели данных.

Это все на данный момент! Если вы следили за моим путешествием по EmberJS, к настоящему моменту вы уже должны были знать, как:

1. Настройте раскрывающийся список с помощью EmberJS+Firebase (#1 и #2)
2. Настройте загрузчик файлов с помощью EmberJS+Firebase (#3)

Оставайтесь с нами, чтобы узнать больше прохождений!