1

I have the following in a Zoo Visitor Update form:

<label class="control-label" for="member_photo">Performer / Band Photo</label>

    <input type="hidden" name="member_photo[]" value="0"/>

    {member_photo}<div><img src="{url}" width="150" /><input type="hidden" name="member_photo[]" value="{file_id}"/> (To delete this just remove the hidden input for this image)</div>{/member_photo}

    <p><input type="file" name="member_photo[]" id="member_photo" multiple></p>

    <input type="hidden" name="member_photo_filedir" value="8">

I need users to be able to remove images as well as adding new ones.

As per the bracketed comment, P&T have suggested that in order to remove the input I need something like a 'delete' checkbox that toggles the name of the input but this is beyond my limited js-fu and will no doubt be useful to others too.

Any jquery ninjas able to offer up a solution?

1

I think you need to output a delete button/checkbox alongside each image/input. You can then use jQuery to remove that img/input from the DOM so when you submit the form it's no longer there.

Maybe something like this:

<input type="hidden" name="member_photo[]" value="0"/>

{member_photo}<div><img src="{url}" width="150" /><input type="hidden" name="member_photo[]" value="{file_id}"/> (To delete this just remove the hidden input for this image) <button class="delete-img">Delete</button> </div>{/member_photo}

<p><input type="file" name="member_photo[]" id="member_photo" multiple></p>

<input type="hidden" name="member_photo_filedir" value="8">



$('.delete-img').click(function(){
    $(this).siblings().remove();
    $(this).remove();
})

Added '()' after function from first post.

  • This works - just needed to add () after function :) Thanks so much. – Damien Buckley Mar 11 '15 at 6:10
  • Heh, I wasnt writing in a code editor :) – Readio Mar 11 '15 at 6:50
  • Just looking now you could use '$(this).parent().remove()' and get rid of the full div instead. – Readio Mar 11 '15 at 6:51
  • Yep, that works. Excellent – Damien Buckley Mar 11 '15 at 7:18
1

Darren used a button, which should work too, but here's the jQuery I came up with to remove the name attribute value:

HTML:

<label class="control-label" for="member_photo">Performer / Band Photo</label>

    <input type="hidden" name="member_photo[]" value="0"/>

    <div>
        <img src="http://placehold.it/150x150" width="150" />
        <input type="hidden" name="member_photo[]" value="{file_id}" id="photo" /> <br>
        (To delete this just remove the hidden input for this image)
    </div>

    <input type="checkbox" name="remove_file"> Remove file

    <p><input type="file" name="member_photo[]" id="member_photo" multiple></p>

    <input type="hidden" name="member_photo_filedir" value="8">

jQuery:

$('input[type="checkbox"]').click(function() {
    $('input#photo').val('');
});

(Note that I gave the image an ID.)

  • Hi Angie. This works for a single image but with multiple images, removes them all. I can see how this could be modified to work with multiple images but the below solution works so I'll move on for now. Thanks. – Damien Buckley Mar 11 '15 at 6:20
  • Didn't realize you were trying to remove multiple images. – Angie Herrera Mar 11 '15 at 15:27
  • Sorry, should have made that clear. Definitely keeping that one in the locker for next time though ; ) – Damien Buckley Mar 11 '15 at 23:46
1

Should use 'change' event instead of click. Cause user may not select any new file, then it will remove the existing file.

<img src="{url}" />
<input type="hidden" name="member_photo" value="{file_id}" id="cur_file_id">
<input type="file" name="member_photo" id="file_upload">
<input type="hidden" name="member_photo_filedir" value="8">`
<pre><code>{/member_photo}</code></pre>

<script type="text/javascript">
  $("#file_upload").change(function (){
    $('#cur_file_id').val('');
  });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.