how to set value in input type = file from database

Question

<div class="modal fade validate" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Edit Advertisement</h4>
                <label class="idhere"><?php echo $id; ?></label>
            </div>
            <?php $sel = $d->select('advertisements', 'ad_id=12');
            while ($result = mysqli_fetch_assoc($sel)) {
            ?>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label class="control-label">Image Upload</label>
                            <div>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
                                        <img src="<?php echo $result['photo']; ?>">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                    <div>
                                        <span class="btn btn-white btn-file">
                                            <span class="fileinput-new">Select image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="file" name="advertise_photo" accept="image/*">
                                        </span>
                                        <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info">Send</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                </div>
            <?php } ?>
        </div>
    </div>
</div>

I am unable to set the value of input type=file from database, and if the image is exits then change button appear instead of select image. when i am choosing new file it works properly,and change and remove button appear instead of select file. Please help me to solve it.

I am trying this using modal not using form.Can i do this??? — Shah Ankit, Mar 12 '16 at 10:42
Ok i use the
in modal but how i set the value of input type=file.I want to do this for edit or update record.so i need to get image from database. — Shah Ankit, Mar 12 '16 at 10:45
i m using now
but how i set the image from database in input type=file. — Shah Ankit, Mar 12 '16 at 10:55
You can't set the file input value for security reasons. See here: http://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html — ahuemmer, Mar 12 '16 at 11:05
When i perform the edit record and if want to change image.so how to i display the older image which is i previously added in database. — Shah Ankit, Mar 12 '16 at 11:11

score 1 · Accepted Answer · edited May 23 '17 at 12:31

Note: Above question is continuous of this question so the following answer is also continuous of this answer

You can skip the <label class="idhere"><?php echo $id;?></label>

in JS what yo need is ajax call method to fetch data from database against <?php $id;?> and display in modal

$(document).ready(function() {
  $('#modal-6').on('shown.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    $.ajax({
        type : 'post',
        url : 'file.php', //Here you will fetch records or images
        data :  'id='+ id, //Pass id
        success : function(data){
            $('#fetched-data').html(data);//Show fetched data from database
        }
    });
  });
});

Modal HTML will be

<div class="modal fade validate" id="modal-6">
  <div class="modal-dialog">
    <div class="modal-content">
        <div id="fetched-data"></div>
    </div>
  </div>
</div>

and file.php will be

<?php
//database connection
if($_POST['id']) {
     $id = $_POST['id']; //escape the string
    //run query
    //fetch data from database
    //poplutae the HTML with values
?>
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Edit Advertisement</h4>
  </div>
  <?php $sel = $d->select('advertisements','ad_id=12');
  while($result = mysqli_fetch_assoc($sel)){
  ?>
  <div class="modal-body">
    <div class="row">
      <div class="form-group col-md-6">
        <label class="control-label">Title</label>
        <input class="form-control" value="<?php echo $result['title'];?>" name="advertise_title" data-validate="required" data-message-required="Please Enter Title" placeholder="Enter Title" type="text">
      </div>
      <div class="form-group col-md-6">
        <label class="control-label">URL</label>
        <input class="form-control" name="advertise_url" value="<?php echo $result['url'];?>" data-validate="required" data-message-required="Please Enter URL" placeholder="Enter URL" type="text">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group no-margin">
          <label for="description" class="control-label">Description</label>
          <textarea class="form-control autogrow" id="description" name="advertise_desc" placeholder="Describe Description Regarding Query">
              <?php echo trim($result['description']); ?>
          </textarea>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-6">
        <label class="control-label">Image Upload</label>
        <div>
          <div class="fileinput fileinput-new" data-provides="fileinput">
            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput"> 
                <img src="<?php echo $result['photo']; ?>">
                <!-- <img src="images/thumbnail.jpeg" alt="...">  -->
            </div>
            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
            <div> 
                <span class="btn btn-white btn-file"> 
                    <span class="fileinput-new">Select image</span> 
                    <span class="fileinput-exists">Change</span>
                    <input type="file" name="advertise_photo" accept="image/*" >
                </span> 
                <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">Remove</a> 
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label class="control-label">Active Flag</label>
            <input type="checkbox">
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-info">Send</button>
    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
<?php } } ?>

As suggested by @devpro you need <form></form> to edit / update the populated data inside modal.

how to set value in input type = file from database

1 Answers1

Linked