Как показать страницу подтверждения перед сохранением изображения с несущей в рельсах?

Question

У меня есть форма, в которой пользователь может загрузить изображение, и я использую несущую волну для ее обработки. В настоящее время пользователь делает сообщение, заполняя форму и нажав кнопку. Это приведет пользователя к странице подтверждения, где вся информация отображается еще раз после прохождения проверки рельсов, включая предварительный просмотр изображения, до фактического создания сообщения. Мне нужно отобразить изображение на этой странице, прежде чем фактически сохранить и отправить его на S3.

@topic_picture_uploader = TopicPictureUploader.new 
@topic_picture_uploader.cache!(params[:topic_picture]) 

Я попытался кэшировать его таким образом, но попытка получить доступ к чему-либо только возвращает нуль. Как я могу просто отобразить изображение, прежде чем сохранять его в модели?

Answer 1

Не нужно отправлять страницу. Просто нажмите кнопку предварительного просмотра в форме и, щелкнув по ней, покажите все данные, которые вы хотите показать, и вместе с ними также покажите кнопку отправки, чтобы завершить запись. посмотрите пример кода JS ниже:

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 
and the associated HTML: 

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" /> 
</form>