Показать изображение после того, как изображение было загружено с использованием CollectionFS

Question

Изображения загружаются в AWS S3 с использованием Meteor.js и CollectionFS. Загружаемое изображение выбирается через поле ввода файла.

'change .upload-input': function() {
    Images.insert(imageFile, function(err, fileObj) {
        Albums.update({_id: albumId}, {$set: { 
            'photo': BASE_URL + fileObj._id + 'photo.jpg'
        }})
    })
}

На той же странице у нас есть img с src установите для отображения URL недавно загруженного изображения.

{{#with album}}
    <img src="{{ photo }}">
{{/with}}

Проблема: Однако страница пытается загрузить это новое изображение до завершения его загрузки на S3 AWS, выдавая ошибку

GET https://s3.amazonaws.com/myBucket/images/2nkLHcHsqxYrqW3hM-photo.jpg 403 (Forbidden)

Изображение загружается на страницу после обновления страницы.

Как мы можем избежать загрузки изображения до его полной загрузки в S3?

Answer 1

Боюсь, я не использовал CollectionFS, но, как подсказывает user3452997, вы можете использовать API-интерфейс HTML5 FileReader для предварительного просмотра изображения примерно так:

'change .upload-input': function(e) {
    var file = e.target.files[0];
    // Rudimentary check that we're dealing with an image
    if (file && file.type.substring(0,6) === 'image/') {
        var reader = new FileReader();
        reader.onload = function() {
            $('#imgId').attr('src', reader.result);
        }
    }
}

Затем пользователь будет видеть локальную версию изображения до тех пор, пока он не обновит браузер, и к этому времени, мы надеемся, удаленное изображение будет загружено.

В качестве альтернативы, я думаю, вам нужен какой-то обратный вызов, когда CollectionFS завершит загрузку.

Если CollectionFS не предоставляет этого, я думаю, что действительно удачным решением было бы создать помощника, который вернул фотографию после задержки (например, в пределах setTimeout), чтобы у нее было время для загрузки.

Answer 2

В случае с AWS-S3 вы можете попробовать https://atmospherejs.com/edgee/slingshot

См. Раздел "Показать загруженный файл до его загрузки"