68705

chrome extension crashes when i try to upload a big file

Question:

The extension crashes when it executes such code:

/*this object is created in content script and passed t background script*/ var myurl = URL.createObjectURL(document.getElementById('myfile').files[0]); /*code block from background script, it work good if file size is < 50MB, if bigger then extension will crash*/ var x = new XMLHttpRequest(); x.onload = function() { var uploadfile = new Uint8Array(x.response); var somearray1 = [...]; var somearray2 = [...]; var size = somearray1.length + uploadfile.length + somearray2.length; var u8array = new Uint8Array(size); var i = 0; for (i = 0; i < somearray1.length; i++) u8array[i] = somearray1.charCodeAt(i) & 0xff; for (var j = 0; j < uploadfile.length; i++, j++) u8array[i] = ufile[j]; for (i = 0; i < somearray2.length; i++) u8array[i] = somearray2.charCodeAt(i) & 0xff; var req = new XMLHttpRequest(); req.open("POST", Url); req.setRequestHeader("Content-Type", 'multipart/form-data; boundary=--_BOUNDARY_'); req.send(u8array); }; x.open('GET', myurl); x.responseType = 'arraybuffer'; x.send();

I want to upload a file of 200MB size, and it crashes the extension. Please help me understand with some sample code how to upload it correctly if it is wrong the way i'm doing now.

Answer1:

Your extension crashes because it runs out of memory due to your inefficient way of uploading data.

You should not load the file in memory, but pass the file object to XMLHttpRequest so that Chrome can stream the file contents in the upload form. This can be done with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" rel="nofollow">FormData</a> object.

The easiest way of doing this is to upload the form in a content script instead of a background page, because it is not easy to pass a File to the background.

// In a content script: var myfile = document.getElementById('myfile').files[0]; var form = new FormData(); form.append('myfile', myfile); // Add more key-value pairs using form.append(...key..., ...value...); // Upload var x = new XMLHttpRequest(); x.open('POST', 'http://example.com/'); x.send(form);

This is all it takes to stream files through XMLHttpRequest. The FormData object will be serialized and uploaded using the multipart/form-data algorithm. For more details, see <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-send-method" rel="nofollow">http://www.w3.org/TR/XMLHttpRequest2/#the-send-method</a>.

If you don't want to upload in a content script (because you want the upload to continue even after the page closes, then you have to pass the File object to the background page via a Shared Worker (that acts as a trampoline). If you want to learn more about this option, read <a href="https://stackoverflow.com/questions/21086918/does-chrome-runtime-support-posting-messages-with-transferable-objects/21101597#21101597" rel="nofollow">Does chrome.runtime support posting messages with transferable objects?</a>.

Recommend

  • How to get image color mode (CMYK, RGB …) in Javascript
  • How do I convert a string in JavaScript to a sequence of bytes?
  • Validate hexadecimal color without using RegEx
  • How to use the ! operator in scala?
  • how to set values when Select2 is ready?
  • Trying to make a div appear when a button is clicked
  • Accessing current user information for a netsuite html form using suitescript
  • Prevent Firefox Web Notifications from automatically Closing
  • Javascript hide/show div based on the day of the week?
  • Enhanced crosshair cursor possible?
  • How to send attachments (images) and nested params using XHR to uplaoad file in titanium?
  • Change the background color of a div after some interval
  • How to keep image behind another image when moved?
  • javascript charCodeAt - different values in JsFiddle and in local file
  • Function is not defined ReferecenError onchange in Angularjs
  • XMLHttpRequest for Video Tag?
  • Adding NSTouchBar support after main window has been created
  • How to incorporate in React to add Google Maps instance
  • Convert Byte String to Int in Scheme
  • Outlook 2013 - VBA - Ribbon - onLoad not firing
  • Detect if user has closed ALL windows for a website?
  • Firefox Cross Domain images are tainted
  • Get onpage to work correctly
  • How to insert variables to dat.Gui with an array?
  • Security risks from user-submitted HTML
  • C++ DLL Wrapper in vb.net Passing byte array of a byte array?
  • Opening a Modal Window “using” PHP
  • JavaScript Interface to a Browser not working in 4.2.2
  • How to assign byte[] as a pointer in C#
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Circular dependency while pushing http interceptor
  • retrieve vertices with no linked edge in arangodb
  • Linker errors when using intrinsic function via function pointer
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?