Currently, I have an image upload form that provides the option to either select a file or paste a URL.
After selecting one of these options, the image is previewed and the filename is displayed below.
However, there seems to be an issue when pasting a URL. Upon inspecting the HTML, it appears that the element containing the filename keeps flashing purple, indicating continuous updates through JavaScript.
Is this behavior normal? It seems unusual to me. Can anyone clarify if this is expected or if there might be an error in my implementation?
You can try pasting an image URL like this: https://i.sstatic.net/C3zHJ.jpg
Update: To illustrate further, here is a demo: https://i.sstatic.net/a0ydd.png
jQuery(function($) {
$('input[type="file"]').change(function() {
if ($(this).val()) {
error = false;
var filename = $(this).val();
filename = filename.replace(/.*[\/\\]/, '');
$(this).closest('.file-upload').find('.file_name').html(filename);
if (error) {
parent.addClass('error').prepend.after(
'<div class="alert alert-error">' + error + '</div>');
}}});
});
var imageLoader = document.getElementById('myfile');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$('#cancel').show();
$('#click_or').hide();
$('input:file').attr('disabled', true);
$('#uploader').addClass('disabled_');
$('#bg_img').addClass('disabled_');
$('#bg_img').attr('src', event.target.result);
$('.file_name').show();
$('#url').hide();
$('#image_file').show();
$('#crop_file').show();
}
reader.readAsDataURL(e.target.files[0]);}
$('#cancel').click(function(e){
$('#myfile').val("");
$('#click_or').show();
$('#cancel').hide();
$('input:file').removeAttr('disabled');
$('#uploader').removeClass('disabled_');
$('#bg_img').removeClass('disabled_');
$('#bg_img').attr('src', "https://i.imgur.com/j0KblIu.png");
$('.file_name').hide();
$('#url').show();
$('#image_file').hide();
$('#crop_file').hide();
});
var myInput = document.getElementById("url");
setInterval(function(){
if (myInput && myInput.value){
$('#cancel_url').show();
$('#image_url').show();
$('#crop_url').show();
$('#bg_img').attr('src', myInput.value);
$('input:file').attr('disabled', true);
$('#uploader').addClass('disabled_');
$('#bg_img').addClass('disabled_');
$('#url').hide();
$('#click_or').hide();
var url_filename = myInput.value;
url_filename = url_filename.replace(/.*[\/\\]/, '');
$('.file_name').html(url_filename);
$('.file_name').show();
}
},0);
$('#cancel_url').click(function(e){
$('#url').val("");
$('#bg_img').attr('src', "https://i.imgur.com/j0KblIu.png");
$('input:file').removeAttr('disabled');
$('#uploader').removeClass('disabled_');
$('#bg_img').removeClass('disabled_');
$('#url').show();
$('#cancel_url').hide();
$('#image_url').hide();
$('#crop_url').hide();
$('.file_name').hide();
$('#click_or').show();
});
var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
//you can check e's properties
//console.log(e);
var dt = e.dataTransfer;
var files = dt.files;
//this code line fires your 'handleImage' function (imageLoader change event)
imageLoader.files = files;
}#uploader {
position: relative;
width: 250px;
height: 250px;
line-height: 250px;
background: transparent;
border: 2px dashed #e8e8e8;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
text-shadow: 0 0 10px white;
-webkit-transition: text-shadow 0.1s linear;
-moz-transition: text-shadow 0.1s linear;
-ms-transition: text-shadow 0.1s linear;
-o-transition: text-shadow 0.1s linear;
transition: text-shadow 0.1s linear;
overflow-x: hidden;
overflow-y: hidden;
opacity: 1;
}
#uploader:hover {
color: #999;}
#myfile {display: none;}
#click_or {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
#bg_img {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
background-color: #eee;
}
#uploader.disabled_ {
cursor: default;
}
img.disabled_ {
object-fit:contain;
image-rendering: pixelated;
}
#cancel, #cancel_url
{display: none;}
.file_name {
font-family: 'Arial';
font-weight: bold;
font-size: 13px;
color:#555;
}
button[type='submit'] {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-upload">
<div id="uploader" onclick="$('#myfile').click()">
<span id = 'click_or'>Click or drag and drop<br>to select an image</span>
<img id="bg_img" src="https://i.imgur.com/j0KblIu.png">
</div>
<input type="file" name="myfile" id="myfile" accept="image/*">
<span class="file_name"></span>
<button type="button" id="cancel">Cancel</button>
<input type="text" name="url" id="url" placeholder=" ... or paste URL to image" autocomplete="off" class="clearable">
<button type="button" id="cancel_url">Cancel</button>
<br>
<button type="submit" name='image_file' id="image_file">Upload</button>
<button type="submit" name='crop_file' id="crop_file">Crop</button>
<button type="submit" name='image_url' id="image_url">Upload</button>
<button type="submit" name='crop_url' id="crop_url">Crop</button>
<span class="url_name"></span>
</div>