0

I have a html form to upload files. After uploading if user need to edit the details the form is shown again with the data values populated from the database. How could i possibly show previous values of the uploaded files in the input type=file.

To be more specific this is my form:

<form>
  <div class="form-row">
    <input id="equipmentname" type="text" value="<?php if(isset($equipment)){ echo $equipment[0]->equipmentname;} ?>" name="equipmentname" />
  </div>

  <div class="form-row">
    <input type="file" id="userfile" name="userfile" size="20" onChange="getImage(event);" />
  </div>

  <div class="form-row action_btnContainer">
    <input id="createEquipmentBtnCreate" name="file_upload" type="submit" value="Add" class="btnCreate" onclick="checkEquipmentCreateForm(event);" /> 
    <input id="createEquipmentBtnCancel" type="button" value="Cancel" class="btnCancel" onclick="closeSitePopUp('EquipmentCreateForm');" />
  </div>
</form>

Like i have echoed the 'equipmentname' in its textfield How could i possibly show the previous upload file value in its respective inputfield. Any suggestions are welcome. Thanks.

John
  • 889
  • 8
  • 16
  • I have one suggestion. You will show the file name below the file upload input. And if there is any new file uploaded then you will update it with the old else remain same. Like that... – Lakhan Dec 08 '14 at 09:14
  • @Lakhan. Thanks. I was on it, because that was the only way, I could think of! – John Dec 08 '14 at 09:20

1 Answers1

1

You can't pre-populate a file form field.

A possible solution is to have an extra field or bit of html to "show" the value.
For example, assuming your file upload is an image and you are storing the path in your database, add an image element to show the image.

<form>
  <div class="form-row">
    <input id="equipmentname" type="text" value="<?php if(isset($equipment)){ echo $equipment[0]->equipmentname;} ?>" name="equipmentname" />
  </div>

  <div class="form-row">
    <input type="file" id="userfile" name="userfile" size="20" onChange="getImage(event);" />
  </div>
  <?php 
  if (strlen($equipment[0]->imagePath) > 0) {
  ?>
  <img src="<?php $equipment[0]->imagePath; ?>" alt="image preview" />
  <?php
  }
  ?>

  <div class="form-row action_btnContainer">
    <input id="createEquipmentBtnCreate" name="file_upload" type="submit" value="Add" class="btnCreate" onclick="checkEquipmentCreateForm(event);" /> 
    <input id="createEquipmentBtnCancel" type="button" value="Cancel" class="btnCancel" onclick="closeSitePopUp('EquipmentCreateForm');" />
  </div>
</form>

If the upload was a doc file, then you could show a thumbnail image that represents a doc file, there are plenty about.

Rooneyl
  • 7,802
  • 6
  • 52
  • 81