lunax/snipe_it
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity Actions

Added image preview for uploads

Browse source
This commit is contained in:
snipe 2018-02-17 00:51:22 -08:00
parent 9a4f5e0ba8
commit d2403cdadb
9 changed files with 49 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/css/build/all.css
View file

File diff suppressed because one or more lines are too long

2
public/css/dist/all.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/css/overrides.css
View file

File diff suppressed because one or more lines are too long

2
public/js/build/all.js
View file

File diff suppressed because one or more lines are too long

2
public/js/dist/all.js vendored
View file

File diff suppressed because one or more lines are too long

10
public/mix-manifest.json
View file

@ -2,13 +2,13 @@
"/js/build/vue.js": "/js/build/vue.js?id=25049a0c0eb736e1c883",
"/css/AdminLTE.css": "/css/AdminLTE.css?id=b8be19a285eaf44eec37",
"/css/app.css": "/css/app.css?id=407edb63cc6b6dc62405",
"/css/overrides.css": "/css/overrides.css?id=33d8f8fea649acea5f9c",
"/css/overrides.css": "/css/overrides.css?id=c289c71c08df753ebc45",
"/js/build/vue.js.map": "/js/build/vue.js.map?id=6b79d08f1decca72957c",
"/css/AdminLTE.css.map": "/css/AdminLTE.css.map?id=99f5a5a03c4155cf69f6",
"/css/app.css.map": "/css/app.css.map?id=bdbe05e6ecd70ccfac72",
"/css/overrides.css.map": "/css/overrides.css.map?id=898c91d4a425b01b589b",
"/css/dist/all.css": "/css/dist/all.css?id=dc1449877e0f8abedc47",
"/js/dist/all.js": "/js/dist/all.js?id=d3af8331997bd82e4ec4",
"/css/build/all.css": "/css/build/all.css?id=dc1449877e0f8abedc47",
"/js/build/all.js": "/js/build/all.js?id=d3af8331997bd82e4ec4"
"/css/dist/all.css": "/css/dist/all.css?id=5fdad90c2d445e4a1a2c",
"/js/dist/all.js": "/js/dist/all.js?id=6e959b16034ab00e3007",
"/css/build/all.css": "/css/build/all.css?id=5fdad90c2d445e4a1a2c",
"/js/build/all.js": "/js/build/all.js?id=6e959b16034ab00e3007"
}

30
resources/assets/js/snipeit.js
View file

@ -322,19 +322,42 @@ $(document).ready(function () {
// ------------------------------------------------
// Image preview
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function formatBytes(bytes) {
if(bytes < 1024) return bytes + " Bytes";
else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KB";
else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MB";
else return(bytes / 1073741824).toFixed(3) + " GB";
};
// File size validation
$('#uploadFile').bind('change', function() {
$('#upload-file-status').removeClass('text-success').removeClass('text-danger');
$('.goodfile').remove();
$('.badfile').remove();
$('.badfile').remove();
$('.previewSize').hide();
var max_size = $('#uploadFile').data('maxsize');
var actual_size = this.files[0].size;
if (actual_size > max_size) {
$('#upload-file-status').addClass('text-danger').removeClass('help-block').prepend('<i class="badfile fa fa-times"></i> ');
$('#upload-file-status').addClass('text-danger').removeClass('help-block').prepend('<i class="badfile fa fa-times"></i> ').append('<span class="previewSize">This file is ' + formatBytes(actual_size) + '.</span>');
} else {
$('#upload-file-status').addClass('text-success').removeClass('help-block').prepend('<i class="goodfile fa fa-check"></i> ');
readURL(this);
$('#imagePreview').fadeIn();
}
$('#upload-file-info').html(this.files[0].name);
@ -344,4 +367,9 @@ $(document).ready(function () {
});

6
resources/assets/less/overrides.less
View file

@ -330,3 +330,9 @@ img.navbar-brand-img, .navbar-brand>img {
#toolbar {
margin-top: 10px;
}
#uploadPreview {
border-color: grey;
border-width: 1px;
border-style: solid
}

5
resources/views/partials/forms/edit/image-upload.blade.php
View file

@ -1,6 +1,6 @@
<div class="form-group {{ $errors->has('image') ? 'has-error' : '' }}">
<label class="col-md-3 control-label" for="image">{{ trans('general.image_upload') }}</label>
<div class="col-md-9">
<div class="col-md-5">
<label class="btn btn-default">
{{ trans('button.select_file') }}
<input type="file" name="image" id="uploadFile" data-maxsize="{{ \App\Helpers\Helper::file_upload_max_size() }}" accept="image/gif,image/jpeg,image/png,image/svg" style="display:none">
@ -10,5 +10,8 @@
<p class="help-block" id="upload-file-status">{{ trans('general.image_filetypes_help', ['size' => \App\Helpers\Helper::file_upload_max_size_readable()]) }}</p>
{!! $errors->first('image', '<span class="alert-msg">:message</span>') !!}
</div>
<div class="col-md-4">
<img id="imagePreview" style="max-width: 200px;">
</div>
</div>