I'm working on a house renting website, and in "submit property" page I have a input file (multiple) to upload the house images with an output to show the selected images.

My code :

add.ctp

<label>Images</label>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

upload.js

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb"  src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);

            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

What I want is to add a button inside the output to delete the selected image if I want to change them.

And in edit page, load the selected images from the folder and delete them if wanted.

I'm working on a house renting website, and in "submit property" page I have a input file (multiple) to upload the house images with an output to show the selected images.

My code :

add.ctp

<label>Images</label>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

upload.js

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb"  src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);

            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

What I want is to add a button inside the output to delete the selected image if I want to change them.

And in edit page, load the selected images from the folder and delete them if wanted.

• javascript
• html

• 3 You can use unlink() in PHP Server Side. But using JavaScript, you cannot access the file system. – Praveen Kumar Purushothaman Commented May 12, 2016 at 9:46
• 1 you cannot access the file system using JavaScript , JavaScript is client side. – Mohammad Olfatmiri Commented May 12, 2016 at 9:50
• 2 Thank you for your answers ! and if i want to delete the selected images only from the input file so they can't be uploaded !? – Youssef DRISSI Commented May 12, 2016 at 9:53

1 Answer 1

I think you are being misunderstood. I believe you want to remove files from the file upload control before uploading them, as in having a visual editor of what files are being in the file upload control currently. If that's the case, read on:

You can't edit them, you can only fully clear the file queue. - It's read only.

However, what you can do is push those items into a separate array and apply any changes to it, then proceeding to manually upload them. JQuery would facilitate the process here.

Read more about it here.