Добро пожаловать в мою 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)
Оставайтесь с нами, чтобы узнать больше прохождений!