3

I have been working on this for days now with no avail :( Any help would be greatly appreciated.

I am trying to download a file as a typed array using this method below:

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true); //This is the path to my file 
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
 var arrayBuffer = oReq.response; 
 var array = new Uint8Array(arrayBuffer ); //This is the array I retrieve from my file
};

oReq.send(null);

When I do this with all assets being on my computer's hard drive it works perfectly and I'll get a response back that looks like this (this is just example data):

array[0] = 10;
array[1] = 15;
array[2] = 20;
array[3] = 17;
array[4] = 18;
array[5] = 23;
array[6] = 25;
array[7] = 12;
array[8] = 2;
array[9] = 10;
...

However when I upload everything to the server I get a result that looks like this:

array[0] = 10;
array[1] = 15;
array[2] = 20;
array[3] = 17;
array[4] = 18;
array[5] = 25;  //This number is missing from above, it should be 23
array[6] = 12;
array[7] = 2;
array[8] = 10;
array[9] = 18;
...

I have tried everything I can think of to fix this problem. Clearing the cache, turning gzip on and off, testing it with different devices (ie loading it on a phone and a computer), but nothing has been of any help so far.

What strikes me as odd is that the same numbers are consistently wrong every time. So I don't think they are getting "lost" over the network. Also when I test it with a different server I get different numbers that drop. So it seems like every server drops a different set of numbers.

Does anyone know why this is and could you lead me toward a direction to help fix the problem? Thank you so much!

27
  • are you actually dealing with .png's? Commented Sep 1, 2016 at 23:23
  • Technically no, I'm dealing with a blob file that contains binary data. However I can rename the extension of the blob file to whatever I want and it still works on the local side. Would this make a difference? Commented Sep 1, 2016 at 23:26
  • no, I was just wondering - not sure where I was headed with that question ... have you tried fetch? ... fetch('/myfile.png').then(res=>res.arrayBuffer()).then(ab=>new Uint8Array(ab)).then(u => console.log(u)) ... does that also "miss" bytes? Commented Sep 1, 2016 at 23:28
  • also, check the developer tools network tab - is the Content-Length header changing too? Commented Sep 1, 2016 at 23:30
  • Regarding your first question, I apologize I've never seen the "fetch" api before and I couldn't get it working from your provided code. However I did check the "content-length" and it does change depending on the file type. Which is very interesting. For example when the file is a .png it is 1,714,496 bytes, when it is just a blob file (no extension) it is 1,713,636 bytes. Commented Sep 1, 2016 at 23:49

1 Answer 1

3

I figured it out... wow was this an interesting experience.

It turns out the FTP client I was using (FileZilla) has a setting that automatically tries to detect a files datatype and make necessary adjustments to it in order to display properly across all OS systems.

It is a documented behavior that can be read about here: https://wiki.filezilla-project.org/Data_Type

When I turned this behavior off (switched it from auto to binary under that "transfer" - "transfer-type" tabs) everything is working again as expected.

I want to thank Jaromanda X so much for his willingness to help. His answers gave me the insight I needed to play around with these settings. I hope this will help others in the future who have the same problem!

Sign up to request clarification or add additional context in comments.

2 Comments

what doesn't make sense is that it got rid of a byte with the value 23! I could understand it if there was a 13 missing, would've suggested some sort of "end of line" shenanigans ... but 23?
I don't understand it either, but yeah throughout the file it was removing random values and even moving them around. I don't claim to understand it, all I know is that I changed the ftp setting and it's all working now. So yeah, hopefully this helps someone :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.