publiclab/plots2

<% if current_user %>
<script>
  $D = {
    uid: <%= current_user.uid %>,
    type: 'note'
  }
</script>

<%= javascript_include_tag "editorToolbar" %>

<hr style="clear:both;" class="d-lg-none" />

<h3><%= translation('users._photo.profile_photo') %></h3>

<div class="profile-dropzone" id="profile-dropzone" style="margin-bottom:20px;">
    <img class="rounded" id="profile-pic" style="<% unless @user.photo_file_name %>display:none;<% end %>
    width:100%;
    margin-bottom:10px;
    margin-top:5%;
    opacity:0.2;
    filter: alpha(opacity=20);" src="<% if @user.photo %><%= @user.photo_path(:thumb) %><% end %>" />

    <p class="prompt">
      <span class="d-none d-lg-inline"> <%= translation('users._photo.drag_and_drop_image') %> </span>
      <span class="fileinput-button">
        <a style="cursor:pointer"> <i class="fa fa-upload d-md-none d-lg-inline float-left" style="padding-right:6px;"></i> <%= translation('users._photo.choose_image') %></a>
        
      </span>
    </p>
    <br class="d-md-none d-lg-inline" />
  </div>
  <% if current_user.photo.exists? %>
    <div style="float:right; margin-right:5px; margin-top:-63px;">
      <%= link_to "/profile/photo/delete/"+current_user.uid.to_s, method: :delete, class: "btn btn-default",
      data: { confirm: "Are you sure you want to delete the profile photo?"} do %>
        <i class="fa fa-trash"></i>
      <% end %>
    </div>
  <% end %>
  <input id="profile-fileinput" type="file" name="image[photo]" >

<div id="profile-progress" style="display:none;" class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
</div>
<p class="profile-uploading" style="display:none;padding-top:4px;color:#aaa;"><%= translation('users._photo.uploading') %>...</p>

<script>

  // file field trigger
  $("#profile-dropzone").click(function(e){
   $("#profile-fileinput").trigger("click"); 
  });
  $('#profile-fileinput').bind('focus',function(e) { $('#profile-dropzone').css('border-color','#4ac') })
  $('#profile-fileinput').bind('focusout',function(e) { $('#profile-dropzone').css('border-color','#ccc') })
  $('#profile-dropzone').bind('dragover',function(e) {
    e.preventDefault();
    $('#profile-dropzone').addClass('hover');
  })
  $('#profile-dropzone').bind('dragout',function(e) {
    $('#profile-dropzone').removeClass('hover');
  })
  $('#profile-dropzone').bind('drop',function(e) {
    e.preventDefault();
  })
  $('#profile-fileinput').fileupload({
    url: "/profile/photo",
    paramName: "photo",
    dropZone: $('#profile-dropzone'),
    dataType: 'json',
    formData: {
      'uid':$D.uid
    },
    start: function(e) {
      $('.profile-dropzone').css('border-color','#ccc')
      $('.profile-dropzone').css('background','none')
      $('#profile-progress').show()
      $('#profile-dropzone').removeClass('hover');
      $('.profile-uploading').show()
    },
    done: function (e, data) {
      $('#profile-progress').hide()
      $('.profile-uploading').hide()
      $('#profile-photo')[0].src = data.result.url
      $('#profile-pic')[0].src = data.result.url
      notyNotification('sunset', 3000, 'success', 'topRight', 'Profile photo was uploaded successfully!');
      location.reload();
      
    },
    // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
    fileuploadfail: function(e,data) {
      notyNotification('sunset', 3000, 'error', 'topRight', 'Error in uploading profile photo. Try again later!');
      
      
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#profile-progress .progress-bar').css(
        'width',
        progress + '%'
      );
    }
  });
  

</script>
<% end %>