CODEWITHSUNDEEP
javascriptjavajquery
Fadil
Fadil

Reputation: 57

jQuery Getting uploaded image's name

//Picture upload
$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};
<form id="form_roomtype" class="form-horizontal" style="padding-top: 57px;" action="roomtype" method="POST" enctype="multipart/form-data">
  <input type="hidden" id="current_roomtype_id" name="current_roomtype_id" value="0">
  <input type="hidden" id="roomtype_id_to_remove" name="roomtype_id_to_remove" value="0">
  <input type="hidden" id="chk_tarif_applicable" name="chk_tarif_applicable" value="0">
  <input type="hidden" id="photo_name" name="photo_name">

  <div>
    <span style="font-size: 16.85px; font-family: Arial, Helvetica, sans-serif; color: #757575;">ROOM PICTURE</span>
    <br />
    <br />
    <input type="file" name="file" id="file" />
    <br/>

    <img id="myImg" src="<%=request.getContextPath()%>/images/insert_images.png" alt="room image" height="175" width="285" onclick="file" />
    <br />Destination:
    <input type="text" value="C:\Project\Booking_Engine\Java\booking\src\main\webapp\data" name="destination" />
    </br>
    <br />
    <input type="submit" value="Upload" name="upload" id="upload" />
  </div>
</form>

I need to take the id of the input (#file) and assign it to the hidden input with id (#photo_name) using the picture upload js on top.

I need to take the id of (<input type="file" name="file" id="file" />) and assign it to the id of (<input type="hidden" id="photo_name" name="photo_name">).

I already have the JS that I posted before... I need to use it to do the assigning of id.

I already have the id of the input file though the JS... (this.file[0]) already gives me the name of the uploaded files... now what I need is take this name and assign it to the id of the hidden input.

I need the value of photo_name in my java code below:

@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String currentRoomTypeIdStr = request.getParameter("current_roomtype_id");
    Integer currentRoomTypeId = Integer.valueOf(currentRoomTypeIdStr);

    String photoName = request.getParameter("photo_name");

if (!Objects.equals(currentRoomTypeId, null) || !Objects.equals(roomtypeIdToRemove, null)) { try { mUserTransaction.begin();

            if (currentRoomTypeId == 0) { // Add mode
                ChambreTypeEntity typeChambreEntity = new ChambreTypeEntity();
                typeChambreEntity.setLibelle(inputTypeRoom);
                typeChambreEntity.setCode(inputCodeRoom);
                typeChambreEntity.setDescription(inputDescriptionRoom);
                typeChambreEntity.setNbMinPers(inputMinPerson);
                typeChambreEntity.setNbMaxPers(inputMaxPerson);
                typeChambreEntity.setNbEnfGratuit(inputChild);
                mEntityManager.persist(typeChambreEntity);


                ChambrePhotoEntity chambrePhotoEntity = new ChambrePhotoEntity();
                chambrePhotoEntity.setNomPhoto(photoName);
                chambrePhotoEntity.setTypeChambre(currentRoomTypeId);
                mEntityManager.persist(chambrePhotoEntity);

            }
            else { // Modification mode
                Query query = mEntityManager.createQuery("FROM ChambreTypeEntity WHERE id=:pId")
                        .setParameter("pId", currentRoomTypeId);
                List<ChambreTypeEntity> typeChambreEntityList = query.getResultList();
                if (!typeChambreEntityList.isEmpty()) {
                    ChambreTypeEntity typeChambreEntity = typeChambreEntityList.get(0);
                    typeChambreEntity.setLibelle(inputTypeRoom);
                    typeChambreEntity.setCode(inputCodeRoom);
                    typeChambreEntity.setDescription(inputDescriptionRoom);
                    typeChambreEntity.setNbMinPers(inputMinPerson);
                    typeChambreEntity.setNbMaxPers(inputMaxPerson);
                    typeChambreEntity.setNbEnfGratuit(inputChild);
                    mEntityManager.persist(typeChambreEntity);
                    mEntityManager.persist(chambreTypeTarifTypeEntity);

                    ChambrePhotoEntity chambrePhotoEntity = new ChambrePhotoEntity();
                    chambrePhotoEntity.setNomPhoto(photoName);
                    chambrePhotoEntity.setTypeChambre(currentRoomTypeId);
                    mEntityManager.persist(chambrePhotoEntity);


                }
            }
            mUserTransaction.commit();
        }

But right now the value of photo_name is "". I need it to be the value that i chose while doing the picture selection.

Upvotes: 0

Views: 2660

Answers (1)

Aswin Ramakrishnan
Aswin Ramakrishnan

Reputation: 3213

Is the following is what you're looking for?

//Picture upload
$(function() {
  // This is a better way of selecting the input field
  $("input[name^=file]").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);

      // This is what you should do
      $('#photo_name').val(this.files[0].name);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_roomtype" class="form-horizontal" style="padding-top: 57px;" action="roomtype" method="POST" enctype="multipart/form-data">
  <input type="hidden" id="current_roomtype_id" name="current_roomtype_id" value="0">
  <input type="hidden" id="roomtype_id_to_remove" name="roomtype_id_to_remove" value="0">
  <input type="hidden" id="chk_tarif_applicable" name="chk_tarif_applicable" value="0">
  <input type="hidden" id="photo_name" name="photo_name">

  <div>
    <span style="font-size: 16.85px; font-family: Arial, Helvetica, sans-serif; color: #757575;">ROOM PICTURE</span>
    <br />
    <br />
    <input type="file" name="file" id="file" />
    <br/>

    <img id="myImg" src="<%=request.getContextPath()%>/images/insert_images.png" alt="room image" height="175" width="285" onclick="file" />
    <br />Destination:
    <input type="text" value="C:\Project\Booking_Engine\Java\booking\src\main\webapp\data" name="destination" />
    </br>
    <br />
    <input type="submit" value="Upload" name="upload" id="upload" />
  </div>
</form>

Upvotes: 1

Related Questions