[Resolved] Upload image layout

[Author]

Posts

[arisG]

Hello,

we would like to change the default layout of "Upload Image"

we have followed this article and add the code

hidden link

 <div class="container">
          <div class="col-md-6">
              <div class="form-group">
                  <label>Επιλογή Φωτογραφίας</label>
                  <div class="input-group">
                      <span class="input-group-btn">
                          <span class="btn btn-default btn-file">
                              Αναζήτηση… <input type="file" id="_featured_image_file" name="_featured_image">
                          </span>
                      </span>
                      <input type="text" class="form-control" readonly>
                  </div>
                  <img id='img-upload'/>
              </div>
          </div>
        </div>

It works but we can't find how to add a reset button to clear/delete the uploaded feature image.

How we can do that?

Thank you.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi there,

Thank you for contacting us and I'd be happy to assist.

Although 1-1 customization assistance is beyond the scope of the support that we provide, we do our best to guide in the right direction, whenever possible.

To clear/remove the selected image, you can include a reset button inside your form like this:
( ref: hidden link )

<input type="reset" id="reset-btn">

Clicking this button will automatically remove the selected image from the image upload field.

To remove the image from the preview container below, you'll need to include some additional script, that triggers when the reset button is clicked:
( screenshot: hidden link )

$("#reset-btn").click(function(){
	$('#img-upload').attr('src', '');
});

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[arisG]

Hello Waqar,

appreciate your help.

Thank you.