Showing uploaded image after successful upload

Question

I am using the Carrierwave gem inside of Magnific Popup (lightbox). What I want to do is that after uploading a image that it will show the newly uploaded image.

Currently after a image is uploaded from the lightbox, it will continue displaying the image you were originally viewing with a "success" message that your image was successfully uploaded.

The current setup is Users click on a photo that will open a lightbox with their gallery photos. Inside the lightbox you can delete the current photo, upload a new photo, or make it your avatar.

photos.js.coffee:

jQuery ->
  $('form#new_photo').fileupload
    dataType: "script"
    add: (e, data) ->
      file = data.files[0]
      data.context = $(tmpl("template-upload", file))
      $('#new_photo').append(data.context)
      data.submit()
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')
    stop: (e, data) ->
      $('.upload').hide()

Photos controller:

 def create
    @photo = Photo.create(params[:photo])
    @photo.user = current_user
    if @photo.save
      flash[:notice] = "Successfully created photos."
      redirect_to :back
    else
      render :action => 'new'
    end
  end

show.html.slim:

   -if @user.photos.present?  
        .slider_container
          h4 Photos
          a.left_arrow href="#" 
            img alt="" src="/assets/left_arrow.png" /
          ul.slider.parent-container
            = hidden_field_tag 'current_index',0
            [e-mail]_with_index do |photo, index|
              li class="#{index > 2 ? 'hide' : ''}"
                = link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo)
                div id="#{dom_id(photo)}" class="mfp-hide"
                  center
                    = image_tag(photo.image_url(:popup))
                    - if  @user == current_user
                      = button_to('Set as Profile Image', [:avatar, photo], class: 'btn')
                      '
                      = button_to "remove", photo, :confirm => 'Are you sure?', :method => :delete, class: 'btn'
                      = form_for Photo.new do |f|
                        = f.label :image, "Upload photos:"
                        = f.file_field :image, multiple: true, name: "photo[image]"
                      script#template-upload type="text/x-tmpl" 
                        .upload
                          | {%=o.name%}
                          .progress
                            .bar style=("width: 0%") 

Answer 1

Personally i would prefer to use http://blueimp.github.io/jQuery-File-Upload/

• complicated tasks like stop upload request.
• uploads with browsers without XHR file uploads
• async upload

It also has documentation https://github.com/blueimp/jQuery-File-Upload/wiki/API

---

If you want to do it yourself send json back with the image url.

var imageurl = "";
$('#inputValue').attr("src", imageurl);

For example i bind input value to url

$('#inputName').bind('input',function(){ 
   $('#inputValue').attr("src", $(this).val());
});

Demo http://jsfiddle.net/margusmartsepp/83w51u85/

Answer 2

you are doing this very complicatedly..

this is the simple solution.Write javascript function to send the selected image using ajax.

<script>
   var client = new XMLHttpRequest();  
   function upload_banner() 
   {
        var file = document.getElementById("file");
        var formdata = new FormData();
        formdata.append("file", file.files[0]);
        var files=document.getElementById('file').files;
        var file_name=files[0].name;
        //alert(file_name);
        var file_extension=file_extension_get(file_name);

        if( file_extension == "jpg" || file_extension == "JPG" || file_extension == "jpeg" || file_extension == "JPEG" || file_extension == "gif" || file_extension == "GIF" || file_extension == "png" || file_extension == "PNG" )
        {
            client.open("post", "small_img.php", true);
            client.send(formdata);  /* Send to server */    

        }
        else
        {
            alert("Wrong file format");
        }
    }
   /* Check the response status */  
   client.onreadystatechange = function() 
   {
    alert(client.readyState+"sssss"+client.status);
      if (client.readyState == 4 && client.status == 200) 
      {

         var m=client.responseText.toString();

          $("#upload_img_view").html(m);
  upload_id();

        }
   }   
   function file_extension_get(file)
   {
        return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
    }

function upload_id()
    {

        var uploadid=document.getElementById('upload_id').value;
        $("#banner_id").val(uploadid);
        return true;
    }

</script>

++++++++++++++++++++++++++++++++++++++++++++++++++++

In Html file write the below code to upload the file..

<input type="file" id="file"  name="file" onchange="upload_banner()" required name="file_create_video">             <br>

<div class="uplod-img" id="upload_img_view">

++++++++++++++++++++++++++++++++++++++++++++++++++

in php file use the below code small_img.php

$path = "/var/www/upload/profile_pic/";

if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "<img src='$u' height='100%' width='100%'> <input type='hidden' id='upload_id' name='upload_id' value='$k' >";
}

this works for me...try it.. make some changes according to your code