Allow only images in file upload form element in directory HTML5

Question

HTML Code

<input  type="file" accept="image/*" multiple webkitdirectory mozdirectory msdirectory odirectory directory id="fileURL"/>

Javascript Code:

var files, 
file, 
extension,
sum,
input = document.getElementById("fileURL"),
output = document.getElementById("fileOutput"),
holder = document.getElementById("fileHolder")
sizeShow = document.getElementById("filesSize");

input.addEventListener("change", function (e) {

    files = e.target.files;
    output.innerHTML = "";
    sum = 0;
    for (var i = 0, len = files.length; i < len; i++) {
        file = files[i];
        extension = file.name.split(".").pop();
        if(extension=="jpg"||extension=="png"){
            var size = Math.floor(file.size/1024 * 100)/100;
            sum = size+sum;
            output.innerHTML += "<li class='type-" + extension + "'>"+file.webkitRelativePath + file.name + " (" +  size + "KB)</li>";
        }else{
           file.remove();
        }
    }
    if(sum<1024*1024){
        sizeShow.innerHTML = Math.floor(sum/1024*100)/100 + " MB";
    }else if(sum>1024*1024){
        sizeShow.innerHTML = Math.floor(sum/1024*1024*100)/100 + " GB";
    }
}, false);

How do i get just the image in the file upload? accept="image/*" doesn't work for directory.

This does work but the statement file.remove() doesn't work at all. I guess the input:file is read-only.

How do i solve this?

Even if you did get this working, remember that file extensions do not necessarily indicate whether or not something is an image. Even if they did, you are missing a few. Even if you only wanted JPEG and PNG, you still need to add .jpeg to your extension list. — Brad
– Brad, Commented Nov 24, 2012 at 18:16
In Chrome, input.files is writable, but you can only set it to FileLists, which themselves are readonly (you cannot create one, nor can you do array-like manipulation on them). I guess you're out of luck. — pimvdb
– pimvdb, Commented Nov 24, 2012 at 18:31
@pimvdb : Yeah, but i seriously need it. But is there way to send just the selected files to the server? Using simple else. That would solve the entire problem. :) — iraycd
– iraycd, Commented Nov 25, 2012 at 4:39
If you send manually through ajax, you would be able to. But not with native form submitting, apparently. — pimvdb
– pimvdb, Commented Nov 25, 2012 at 9:08
Can you please write the code that is really every cool. I would appreciate it. Thank you in advance. — iraycd
– iraycd, Commented Nov 25, 2012 at 13:42

pimvdb · Accepted Answer · 2012-11-25 16:47:07Z

You can set input.files to a FileList (obtained from e.g. drag and drop), but you cannot create/modify a FileList. So you cannot modify the files of an input to e.g. only contain images.

What you can do, though, is uploading manually (through ajax), and only send files that have a type starting with "image/". See http://jsfiddle.net/WM6Sh/1/.

$("form").on("submit", function(e) {
    e.preventDefault();

    var files = $(this).find("input").prop("files");
    var images = $.grep(files, function(file) {
        return file.type.indexOf("image/") === 0;  // filter out images
    });

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/", true);

    $(xhr).on("readystatechange", function(e) {
        if(xhr.readyState === 4) {
            console.log("Done");
        }
    });

    var data = new FormData();
    $.each(images, function(i) {
        data.append(i, this);  // append each image file to the data to be sent
    });

    console.log(
        "Sending %d images instead of all %d files...",
        images.length,
        files.length
    );
    xhr.send(data);
});

Collectives™ on Stack Overflow

Allow only images in file upload form element in directory HTML5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related