I am trying to let users upload pictures of items that they are donating. For some reason, the name of the file that they are uploading is not displaying after they have selected it. I looked at this previously asked question and I still am having some trouble with my code. I'm just not sure why it is not displaying the file name.
Here is my code:
$(document).ready(function() {
$('#new-btn').on('click', function() {
$('#new-div').append($('.fileinputs').html());
});
$(document).on('fileselect', '.btn-file :file', function(event, numFiles, label) {
var input = $(this).closest('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if (input.length) {
input.val(log);
} else {
if (log) alert(log);
}
});
});
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
console.log('triggered');
});.container {
padding-bottom: 30px;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
input[readonly] {
background-color: white !important;
cursor: text !important;
}<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="container">
<div class="row">
<div class="col col-xs-12 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4>New Donation</h4>
</div>
<form class="form ws-validate" method="post" action="add.php" enctype="multipart/form-data">
<div class="panel-body">
<input type="hidden" name="add" value="1" />
<div class="form-group col col-md-6">
<label for="GroupID">Organization</label>
<select class="form-control" name="GroupID" readonly value="<?php echo $row['id']; ?>">
<option value="<?php echo $row['id']; ?>" readonly selected>
<?php echo $row[ "Name"]; ?>
</option>
</select>
</div>
<div class="form-group col col-md-6">
<label for="DonationType">Donation Type</label>
<select class="form-control" name="DonationType" value="<?php echo $_POST['donationType']; ?>" readonly>
<option readonly selected value="<?php echo $_POST['donationType']; ?>">
<?php echo $_POST[ 'donationType']; ?>
</option>
</select>
</div>
<div class="form-group required col col-md-6">
<label for="ItemName">Item Name</label>
<input type="text" class="form-control" name="ItemName" id="ItemName" required />
</div>
<div class="form-group required col col-md-6">
<label for="Date">Date Donated</label>
<input type="text" class="form-control datepicker" name="Date" id="Date" required autocomplete="off" />
</div>
<div class="form-group required col col-md-4">
<label for="ItemValue">Value per Item</label><span class="text-muted pull-right" style="cursor:pointer;" data-toggle="modal" data-target="#itemInfo"><span class="fa fa-info-circle"></span></span>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control sums num1" name="ItemValue" id="ItemValue" step="0.01" min="0" placeholder="0.00" />
</div>
</div>
<div class="form-group col col-md-4">
<label for="ItemQuantity">Quantity</label>
<input type="number" class="form-control sums num2" name="ItemQuantity" id="ItemQuantity" min="0" value="1" />
</div>
<div class="form-group col col-md-4">
<label for="Total">Total</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="Total" id="Total" step="0.01" readonly placeholder="-" />
</div>
</div>
<div class="form-group col col-md-8">
<label for="ItemDescription">Description</label>
<textarea class="form-control" name="ItemDescription" id="ItemDescription" style="height: 34px; max-height: 100px; resize: vertical;" required></textarea>
</div>
<div class="form-group col col-md-4">
<label for="ItemQuality">Item Quality</label>
<select class="form-control" name="ItemQuality" id="ItemQuality">
<option value="" selected disabled>-</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</div>
<div class="form-group col col-xs-12">
<label for="file">Image Upload</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" name="uploadedfile" id="uploadedfile" >
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<span class="help-block">
</span>
</div>
</div>
<div class="panel-footer">
<span onclick="history.go(-1);" class="btn btn-default">Back</span>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>Any help on the subject would be greatly appreciated.
