How remove/replace/edit file in channel form?
How Do I?
I’ve uploaded an image using a channel form – {field:image_upload} – which is now displayed with the link “Remove File” automatically generated beneath it. But when the link is clicked nothing happens.
I see in the User Guide: “Note: If you want to allow users to change the file associated with the entry when editing, you will need to provide a way (typically Javascript) to reset the my_field_name_hidden_file to empty.”
So how exactly does one do that? Can anyone provide an example? I’m a novice coder and need some help figuring it out.
Thanks!
Nope, but I’m just a sittin’ here in front of my screen waiting for one….
When you already have a file uploaded the markup will look something like (this is just using the default tags):
Template:
{exp:channel:form channel="about" json="yes" id="publishForm" entry_id="{segment_2}"}
{custom_fields}
{if file}
{display_field}
{/if}
{/custom_fields}
<div class="mt-2">
<button type="submit" class="btn btn-primary btn-lg btn-block">Done</button>
</div>
{/exp:channel:form}Front End:
<div class="file_field">
<div class="file_set ">
<img src="https://ee60testing.test/themes/user/site/default/asset/img/blog/_thumbs/part_2-categories_4.png" alt="" />
part_2-categories_4.png <a href="#" title="Remove File" class="remove_file">Remove File</a>
<input type="hidden" name="testfile_hidden_file" value="part_2-categories_4.png">
<input type="hidden" name="testfile_hidden_dir" value="5">
</div>
<div class="file_upload">
<a href="#" class="undo_remove js_hide">Undo Remove</a>
<div class="no_file js_hide" none;">
<input type="file" name="testfile" value="part_2-categories_4.png" data-content-type="all" data-directory="5"></p>
<input type="hidden" name="testfile_directory" value="5">
<select name="testfile_existing">
<option value="">Select an existing file</option>
<option value="abstract.jpg">abstract.jpg</option>
<option value="asdfasdfasfs.png">asdfasdfasfs.png</option>
<option value="blog.jpg">blog.jpg</option>
</select>
</div>
</div>
</div>A couple important elements here are:
<input type="hidden" name="testfile_hidden_file" value="part_2-categories_4.png">is the hidden field that is submitted which contains the file’s name<div class="no_file js_hide" none;"> ... </div>is hidden when there is a file already selected. This section needs to be revelead to show the user an upload option again.
So what you would need to do is write some js that would empty the value of testfile_hidden_file and show the hidden divs in the file upload section). in this case, I would target the Remove File link.
If we are using jQuery that might look like:
$('.remove_file').on("click", function {
$('input[name="testfile_hidden_file"]').val("");
$('.filename').hide(); //for looks, we're also going to hide the previously uploaded file information
$('.no_file').show();
$('.undo_remove').show();
});If you want to get fancy you can also write something that would reverse the effect when the “Undo Remove” link is clicked. That would just involve storing the value of testfile_hidden_file and then adding that back as the value when requested.
This may not be perfect, but should get you going. Feel free to let me know if you have any issues.