Skip to content

Commit

Permalink
fix: Modify image uploader #72
Browse files Browse the repository at this point in the history
  • Loading branch information
@jungissei
jungissei committed Nov 9, 2020
1 parent 1bf5138 commit 5b88b35
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 26 deletions.
40 changes: 38 additions & 2 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,21 @@ img {
------------------------------------------------------*/
.form-image-uploader {
@at-root {
#{&}__flex {
display: flex;
align-items: center;
width: 100%;
}

#{&}__col-preview {
width: 50px;
}

#{&}__col-input {
width: calc(100% - 50px);
padding: 1em;
}

#{&}__saved-img {
margin-bottom: 1em;

Expand All @@ -379,16 +394,37 @@ img {
cursor: pointer;

img {
max-width: 100px;
max-width: 50px;
width: auto;
max-height: 100px;
max-height: 50px;
height: 100%;

&:hover {
opacity: 0.7;
}
}
}

#{&}__cancel {
font-size: inherit;
}

@include mq("md") {
#{&}__col-preview {
width: 100px;
}

#{&}__col-input {
width: calc(100% - 100px);
}

#{&}__preview {
img {
max-width: 100px;
max-height: 100px;
}
}
}
}
}

Expand Down
33 changes: 28 additions & 5 deletions app/javascript/custom/imgUploader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,18 @@ $(document).on('turbolinks:load', () =>{

const imgUplorader = new ImgUplorader;
imgUplorader.copyToSaveInput();
imgUplorader.resetPreview();

});

class ImgUplorader{
constructor(){
this.selectorPreview = '.form-image-uploader__preview';
this.selectorWrapAll = '.form-image-uploader';
this.selectorPreviewImg = '.form-image-uploader__preview-img';
this.selectorSave = '.form-image-uploader__save';
this.selectorCache = '.form-image-uploader__cache';
this.selectorLabel = '.form-image-uploader__label';
this.selectorCancel = '.form-image-uploader__cancel';
this.noPhotoImgPath = '/assets/nophoto-e1a743df0c155237d2677a50919e83279a8002ff93f24727582e52ffb2347dd1.jpg';

}
Expand Down Expand Up @@ -69,10 +73,11 @@ class ImgUplorader{

/*
* Change preview image to nophoto image when image is not selected
* @param input : Element of current target
* @param selector : Element of current target
*/
changeNoPhotoImg(input){
$(input).prev(this.selectorImg).children('img').attr('src', this.noPhotoImgPath);
changeNoPhotoImg(selector){
$(selector).closest(this.selectorWrapAll).find(this.selectorLabel).text('画像選択...');
$(selector).closest(this.selectorWrapAll).find(this.selectorPreviewImg).attr('src', this.noPhotoImgPath);
}

/*
Expand All @@ -82,10 +87,28 @@ class ImgUplorader{
changeSelectedImg(input){
const reader = new FileReader();
reader.onload = (progressEvent) => {
$(input).prev(this.selectorImg).children('img').attr('src', progressEvent.currentTarget.result);
$(input).closest(this.selectorWrapAll).find(this.selectorPreviewImg).attr('src', progressEvent.currentTarget.result);
}

const file = input[0].files[0];
$(input).closest(this.selectorWrapAll).find(this.selectorLabel).text(file.name);
reader.readAsDataURL(file);
}

/*
* Reset preview image, input, label
*/
resetPreview(){
$(document).on('click', this.selectorCancel, event => {

const cancelBtn = $(event.currentTarget);

//Make input value empty
$(cancelBtn).closest(this.selectorWrapAll).find(this.selectorSave).val('');

// Change preview image to nophoto image
this.changeNoPhotoImg(cancelBtn);

});
}
}
54 changes: 45 additions & 9 deletions app/views/devise/registrations/edit.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,55 @@
</div>
</div>
<div class="block-toggle__content" style="display:none;">

<div class="form-image-uploader__flex">
<div class="form-image-uploader__col-preview">
<label for="user_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg', class: 'form-image-uploader__preview-img' %>
</label>
</div>
<div class="form-image-uploader__col-input">
<div class="input-group">
<div class="form-file">
<%= f.file_field :image, class:'form-file-input form-image-uploader__save' %>
<%= f.hidden_field :image_cache, class:'form-image-uploader__cache' %>

<label class="form-file-label" for="user_image">
<span class="form-file-text form-image-uploader__label">画像選択...</span>
<span class="form-file-button">参照</span>
</label>

</div>
<span class="input-group-text form-image-uploader__cancel">取消</span>
</div>
</div>
</div>

</div>
</div>
<% else %>
<div class="form-image-uploader__flex">
<div class="form-image-uploader__col-preview">
<label for="user_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg' %>
<%= image_tag 'nophoto.jpg', class: 'form-image-uploader__preview-img' %>
</label>
<%= f.file_field :image, class:'form-image-uploader__save' %>
<%= f.hidden_field :image_cache, class:'form-image-uploader__cache' %>
</div>
<div class="form-image-uploader__col-input">
<div class="input-group">
<div class="form-file">
<%= f.file_field :image, class:'form-file-input form-image-uploader__save' %>
<%= f.hidden_field :image_cache, class:'form-image-uploader__cache' %>

<label class="form-file-label" for="user_image">
<span class="form-file-text form-image-uploader__label">画像選択...</span>
<span class="form-file-button">参照</span>
</label>

</div>
<span class="input-group-text form-image-uploader__cancel">取消</span>
</div>
</div>
</div>
<% else %>
<label for="user_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg' %>
</label>
<%= f.file_field :image, class:'form-image-uploader__save' %>
<%= f.hidden_field :image_cache, class:'form-image-uploader__cache' %>
<% end %>
</div>
</td>
Expand Down
58 changes: 48 additions & 10 deletions app/views/posts/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>
<% end %>

<div class="form-file custom-file mb-3">
<div class="form-image-uploader mb-3">
<% if post.image.present? %>
<div class="form-image-uploader__saved-img">
<span class="form-image-uploader__saved-img-inner">
Expand All @@ -27,19 +27,57 @@
</div>
</div>
<div class="block-toggle__content" style="display:none;">

<div class="form-image-uploader__flex">
<div class="form-image-uploader__col-preview">
<label for="post_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg', class: 'form-image-uploader__preview-img' %>
</label>
</div>
<div class="form-image-uploader__col-input">
<div class="input-group">
<div class="form-file">
<%= form.file_field :image, class:'form-file-input form-image-uploader__save' %>
<%= form.hidden_field :image_cache, class:'form-image-uploader__cache' %>

<label class="form-file-label" for="post_image">
<span class="form-file-text form-image-uploader__label">画像選択...</span>
<span class="form-file-button">参照</span>
</label>

</div>
<span class="input-group-text form-image-uploader__cancel">取消</span>
</div>
</div>
</div>

</div>
</div>
<% else %>

<div class="form-image-uploader__flex">
<div class="form-image-uploader__col-preview">
<label for="post_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg' %>
<%= image_tag 'nophoto.jpg', class: 'form-image-uploader__preview-img' %>
</label>
<%= form.file_field :image, class:'form-image-uploader__save' %>
<%= form.hidden_field :image_cache, class:'form-image-uploader__cache' %>
</div>
<div class="form-image-uploader__col-input">
<div class="input-group">
<div class="form-file">
<%= form.file_field :image, class:'form-file-input form-image-uploader__save' %>
<%= form.hidden_field :image_cache, class:'form-image-uploader__cache' %>

<label class="form-file-label" for="post_image">
<span class="form-file-text form-image-uploader__label">画像選択...</span>
<span class="form-file-button">参照</span>
</label>

</div>
<span class="input-group-text form-image-uploader__cancel">取消</span>
</div>
</div>
</div>
<% else %>
<label for="post_image" class="form-image-uploader__preview">
<%= image_tag 'nophoto.jpg' %>
</label>
<%= form.file_field :image, class:'form-image-uploader__save' %>
<%= form.hidden_field :image_cache, class:'form-image-uploader__cache' %>

<% end %>
</div>

Expand Down

0 comments on commit 5b88b35

Please sign in to comment.