html value is truncating my string

Question

On my page I am using HTML5 to upload a file on my browser. The file is a PDF an have to show it in a <input type="text"/>

This is my code:

var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
for (var i = 0, f; f = files[i]; i++) {
    console.log(f.name);
    console.log(f.type);
    console.log(f.size);

    //Update document info
    $("#document_filename").find("input").val(f.name);
    $("#document_mimetype").find("input").val(f.type);


    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onloadend = (function(theFile) {
        return function(e) {
        content = e.target.result.replace(/^data:[^;]*;base64,/, "");
        console.log(content.length);
        $("#document_content").find("input").val(content);
        a = document.getElementById("document_content").getElementsByTagName("input")[0];
        a.value = content;
        console.log(a.value.length);
        };
    })(f);

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

}

When I upload a big file 1.5MB, my console is showing:

    contrat.pdf             // The file name
    application/pdf         // The file type
    1510788                 // The file size
    2014384                 // The length of the b64 content
    524288                  // The length of string once inserted in the input box??

Can someone explain to me what I am doing wrong to get this data truncated?

Thanks,

First thing would be to make sure that `document.getElementById("document_content").getElementsByTagName("input")[0]` returns the same element as `$("#document_content").find("input").val(content)`. Why are you doing that anyway? Second, do you have any validation around the ``? `maxlength`? — CodingIntrigue, Sep 24 '14 at 12:17
Hi, it's returning the same. I am doing that because I am writing Jquery and when I inputbox trucated I have written this line in native js to avoid jquery bug. And I am still having the same behavior... — hzrari, Sep 24 '14 at 12:20

Samuel Caillerie · Accepted Answer · 2014-09-24T12:38:30.270

2

As stated on this page, the maximum length possible for an input of type text seems to be 524288 at least on Chrome. And this is what you have...

I suggest you storing your value in another place!

EDIT :

The implementation varies across browsers : on FF (v32), I can have length greater than 524288 (I have tested up to 10.000.000), but on Chrome it is limitated to 524288 even though we increase the maxlength attribute.

There is also an open ticket for WebKit about this issue : https://bugs.webkit.org/show_bug.cgi?id=44883

edited Sep 24 '14 at 12:38

answered Sep 24 '14 at 12:19

Samuel Caillerie

8,259
1
27
33

Thx for the info. This is what I am looking for... but how do you understand it? That the default value of maxlength is 524288? Or the max value is 524288 absolutely? What do you suggest to store it? A textarea? – hzrari Sep 24 '14 at 12:23
Why do you need to display it? You can only store it to some JS variable? – Samuel Caillerie Sep 24 '14 at 12:24
I do need to display. The user may edit this value (for example copy/paste it from another input box...) – hzrari Sep 24 '14 at 12:26
Copy / paste binary data??? Perhaps propose a button that allow to add this value to the clipboard but the display of this value seems strange. BTW, I have updated my answer with some remarks... – Samuel Caillerie Sep 24 '14 at 12:29
1

Note that W3Schools makes that statement without reference to any specification or standard. There is no such limit in HTML5 or various DOM standards. The answers to [*is there a max size to the length of a hidden input in html*](http://stackoverflow.com/questions/1752768/is-there-a-max-size-to-the-length-of-a-hidden-input-in-html) might be useful. So while 524288 might be a limit in some browsers, it is not specified anywhere and likely is different in different browsers, or even different versions of the same browser. – RobG Sep 24 '14 at 12:30
@RobG, yes I know, but see my edit, it seems to be implemented like this on WebKit and the ticket looks like to be forgotten (always open)... – Samuel Caillerie Sep 24 '14 at 12:33
@SamuelCaillerie—yes, but better to say "you have likely hit the limit for input elements in that browser" or similar rather than state it as a limit for input elements in general. – RobG Sep 24 '14 at 12:35
@SamuelCaillerie : Copy/Paste b64 data => Text. Thanks for the test under FF. I am using Chrome and my app should run under Chrome. I have changed my input box into textarea and it's working then. – hzrari Sep 24 '14 at 12:36
@RobG I changed my implementation to use textarea. It's not acceptable in my case to show this kind of message. My app should allow the end user to edit a very long string. Thank you guys, I am happy with that :-) – hzrari Sep 24 '14 at 12:39

html value is truncating my string

1 Answers1

Linked