how to remove existing image in jQuery.filer <p>I'm using a great plugin: <a href="https://github.com/CreativeDream/jquery.filer" rel="nofollow">https://github.com/CreativeDream/jquery.filer</a></p> <p>Only uploaded file can be Deleted, but added image file can Not be removed from server</p> <pre><code> files: [{ name: "photo_2016-09-23_21-25-48dfdgr.jpg", size: 5453, type: "image/jpg", file: ".php/uploads/photo_2016-09-23_21-25-48.jpg", },{ name: "photo_2016-09-23_21-25-48dfdf.jpg", size: 9503, type: "image/png", file: "./php/uploads/photo_2016-09-23_21-25-48.jpg", }], </code></pre> <p>remove file and delete in php does not work.</p> <p>all codes</p> <pre><code>$(document).ready(function(){ //Example 2 $("#filer_input2").filer({ limit: null, maxSize: null, extensions: null, changeInput: '&lt;div class="jFiler-input-dragDrop"&gt;&lt;div class="jFiler-input-inner"&gt;&lt;div class="jFiler-input-icon"&gt;&lt;i class="icon-jfi-cloud-up-o"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="jFiler-input-text"&gt;&lt;h3&gt;Drag&amp;Drop files here&lt;/h3&gt; &lt;span style="display:inline-block; margin: 15px 0"&gt;or&lt;/span&gt;&lt;/div&gt;&lt;a class="jFiler-input-choose-btn blue"&gt;Browse Files&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;', showThumbs: true, theme: "dragdropbox", templates: { box: '&lt;ul class="jFiler-items-list jFiler-items-grid"&gt;&lt;/ul&gt;', item: '&lt;li class="jFiler-item"&gt;\ &lt;div class="jFiler-item-container"&gt;\ &lt;div class="jFiler-item-inner"&gt;\ &lt;div class="jFiler-item-thumb"&gt;\ &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\ &lt;div class="jFiler-item-thumb-overlay"&gt;\ &lt;div class="jFiler-item-info"&gt;\ &lt;div style="display:table-cell;vertical-align: middle;"&gt;\ &lt;span class="jFiler-item-title"&gt;&lt;b title="{{fi-name}}"&gt;{{fi-name}}&lt;/b&gt;&lt;/span&gt;\ &lt;span class="jFiler-item-others"&gt;{{fi-size2}}&lt;/span&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ {{fi-image}}\ &lt;/div&gt;\ &lt;div class="jFiler-item-assets jFiler-row"&gt;\ &lt;ul class="list-inline pull-left"&gt;\ &lt;li&gt;{{fi-progressBar}}&lt;/li&gt;\ &lt;/ul&gt;\ &lt;ul class="list-inline pull-right"&gt;\ &lt;li&gt;&lt;a class="icon-jfi-trash jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\ &lt;/ul&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/li&gt;', itemAppend: '&lt;li class="jFiler-item"&gt;\ &lt;div class="jFiler-item-container"&gt;\ &lt;div class="jFiler-item-inner"&gt;\ &lt;div class="jFiler-item-thumb"&gt;\ &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\ &lt;div class="jFiler-item-thumb-overlay"&gt;\ &lt;div class="jFiler-item-info"&gt;\ &lt;div style="display:table-cell;vertical-align: middle;"&gt;\ &lt;span class="jFiler-item-title"&gt;&lt;b title="{{fi-name}}"&gt;{{fi-name}}&lt;/b&gt;&lt;/span&gt;\ &lt;span class="jFiler-item-others"&gt;{{fi-size2}}&lt;/span&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ {{fi-image}}\ &lt;/div&gt;\ &lt;div class="jFiler-item-assets jFiler-row"&gt;\ &lt;ul class="list-inline pull-left"&gt;\ &lt;li&gt;&lt;span class="jFiler-item-others"&gt;{{fi-icon}}&lt;/span&gt;&lt;/li&gt;\ &lt;/ul&gt;\ &lt;ul class="list-inline pull-right"&gt;\ &lt;li&gt;&lt;a class="icon-jfi-trash jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\ &lt;/ul&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/div&gt;\ &lt;/li&gt;', progressBar: '&lt;div class="bar"&gt;&lt;/div&gt;', itemAppendToEnd: false, canvasImage: true, removeConfirmation: true, _selectors: { list: '.jFiler-items-list', item: '.jFiler-item', progressBar: '.bar', remove: '.jFiler-item-trash-action' } }, dragDrop: { dragEnter: null, dragLeave: null, drop: null, dragContainer: null, }, uploadFile: { url: "./php/ajax_upload_file.php", data: null, type: 'POST', enctype: 'multipart/form-data', synchron: true, beforeSend: function(){}, success: function(data, itemEl, listEl, boxEl, newInputEl, inputEl, id){ var parent = itemEl.find(".jFiler-jProgressBar").parent(), new_file_name = JSON.parse(data), filerKit = inputEl.prop("jFiler"); filerKit.files_list[id].name = new_file_name; itemEl.find(".jFiler-jProgressBar").fadeOut("slow", function(){ $("&lt;div class=\"jFiler-item-others text-success\"&gt;&lt;i class=\"icon-jfi-check-circle\"&gt;&lt;/i&gt; Success&lt;/div&gt;").hide().appendTo(parent).fadeIn("slow"); }); }, error: function(el){ var parent = el.find(".jFiler-jProgressBar").parent(); el.find(".jFiler-jProgressBar").fadeOut("slow", function(){ $("&lt;div class=\"jFiler-item-others text-error\"&gt;&lt;i class=\"icon-jfi-minus-circle\"&gt;&lt;/i&gt; Error&lt;/div&gt;").hide().appendTo(parent).fadeIn("slow"); }); }, statusCode: null, onProgress: null, onComplete: null }, addMore: true, files: [{ name: "photo_2016-09-23_21-25-48dfdgr.jpg", size: 5453, type: "image/jpg", file: ".php/uploads/photo_2016-09-23_21-25-48.jpg", },{ name: "photo_2016-09-23_21-25-48dfdf.jpg", size: 9503, type: "image/png", file: "./php/uploads/photo_2016-09-23_21-25-48.jpg", }], allowDuplicates: false, clipBoardPaste: true, excludeName: null, beforeRender: null, afterRender: null, beforeShow: null, beforeSelect: null, onSelect: null, afterShow: null, onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){ var filerKit = inputEl.prop("jFiler"), file_name = filerKit.files_list[id].name; console.log(file_name); $.post('./php/ajax_remove_file.php', {file: file_name}); }, onEmpty: null, options: null, dialogs: { alert: function(text) { return alert(text); }, confirm: function (text, callback) { confirm(text) ? callback() : null; } }, captions: { button: "Choose Files", feedback: "Choose files To Upload", feedback2: "files were chosen", drop: "Drop file here to Upload", removeConfirmation: "Are you sure you want to remove this file?", errors: { filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.", filesType: "Only Images are allowed to be uploaded.", filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.", filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB." } } }); }) </code></pre> <p>please guide me. </p>