JSFiddle - React, Tailwind, and code Playground

by dheffernan

HTML

<div id="imagesholder">
						<input type="file" name="images[]" id="i1" class="imageup" multiple />
						</div>
						<div id="selectedimages"></div>

<div id="1st">1st test</div>
<br>
    <div id="2nd">2nd test</div>
    
at moment reading cannot read files of undefined

CSS

.deletebutton {
	 float:left;
    cursor:pointer;
    color: #fa052b;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 7px 3px; 
    font-size: 8px;
        
}

.deletebutton:before {
    content: "x";
}

JavaScript

Array.prototype.closest = function(value) {
        var res = 0;
        for (var i=0; i<this.length; i++) {
            if (this[i] > res && this[i] < value) res=this[i];
        }
        return res;
    }

jQuery(document).ready(function() {
var i=1;
	jQuery(document).on('change', '.imageup', function(){
		
		numberofimages=jQuery("#selectedimages > div").length;
		
		if(numberofimages<10){
			var id= jQuery(this).attr('id');
		
			jQuery('#'+id).css("display", "none");

			var length= this.files.length;
		
			if(length>1) {
			
				for(var r=0; r< this.files.length; r++) {
			
				var name= this.files.item(r).name;
				jQuery('#selectedimages').append('<div id="delete'+i+'">'+name+'<input name="'+r+'" type="submit" class="deletebutton" value="Delete" id="delete/i'+i+'"/></div>');

				//increase numbers as slots are used. 
				numberofimages++;
				i++;
		
				}//end for
			
			} else {
			
				var value= jQuery(this).val();
				//single
				var name= value.replace(/^.*\\/, "");
	
				jQuery('#selectedimages').append('<div id="delete'+i+'">'+name+'<input type="submit" class="deletebutton" value="Delete" id="delete/i'+i+'"/></div>');
				numberofimages++;
				i++;
			}
		
		
			if(numberofimages<10) {
				jQuery('#imagesholder').append('<input type="file"  name="images[]" id="i'+i+'" class="imageup" multiple/>');
				
			} else {
				jQuery('#imagesholder').append('<div id="fullimages"><h3>Images quota full, please delete some to add more!');
			}
		} else {
			alert('Image quota full, delete some to change them');
		}
		
	});
    
    
    
    
    
  //---------------delete code starts here!! look a little further down for the relevant code---------------  
  jQuery(document).on('click', '.deletebutton', function(){
		event.preventDefault();
		
		if(jQuery(this).attr('name') || jQuery(this).attr('name')===0) {
		var inputname= jQuery(this).attr('name');
		var id= jQuery(this).attr('id');
		var id= id.replace('delete/i','');
		var idarray= new...