title: Blob data type return Blob in vuejs
body: <p>I have a challenge in getting the value of blob in my app.</p>
  
  <p>When I console log the file has value but in the data section, it shows <code>Blob</code></p>
  
  <pre><code>&lt;script&gt;
  import { Datetime } from 'vue-datetime';
  
  export default {
      components: { Datetime },
  
      data() {
          return {
              //messages: [],
              text: '',
              imageUrl: '',
              imageBlob: null, // returns Blob
              videoUrl: '',
              videoBlob: null,
              startTime: '',
              endTime: '',
          }
      },
  
      methods: {
          reset() {
              this.text = '';
              this.imageUrl = '';
              this.imageBlob = null;
              this.videoUrl = '';
              this.videoBlob = null;
              this.startTime = '';
              this.endTime = '';
          },
  
          refreshImage() {
              let comp = this;
              this.readObjectUrl(document.getElementById('input-image'), function (url, blob) {
                  comp.imageUrl = url;
                  comp.imageBlob = blob;
                  console.log(comp.imageBlob) // return Blob(49379) {size: 49379, type: "image/jpeg"}
              });
          },
  
          refreshVideo() {
              let comp = this;
              this.readObjectUrl(document.getElementById('input-video'), function (url, blob) {
                  comp.videoUrl = url;
                  comp.videoBlob = blob;
                  comp.playVideo(url);
              });
          },
  
          playVideo(url) {
              let video = document.getElementById('video-preview');
              video.preload = 'metadata';
              // Load video in Safari / IE11
              if (url) {
                  video.muted = false;
                  video.playsInline = true;
                  video.play();
              }
          },
  
          addMessage() {
              this.$emit('added-message', this);
              this.reset();
          },
  
          // Read a file input as a data URL.
          readDataUrl(input, callback) {
              if (input.files &amp;&amp; input.files[0]) {
                  let fileReader = new FileReader();
                  fileReader.onload = function () {
                      callback(fileReader.result);
                  };
                  fileReader.readAsDataURL(input.files[0]);
              }
              else {
                  callback(null);
              }
          },
  
          // Read a file input as an object url.
          readObjectUrl(input, callback) {
              if (input.files &amp;&amp; input.files[0]) {
                  let fileReader = new FileReader();
                  fileReader.onload = function () {
                      let blob = new Blob([fileReader.result], {type: input.files[0].type});
                      let url = URL.createObjectURL(blob);
                      callback(url, blob);
                  };
                  fileReader.readAsArrayBuffer(input.files[0]);
              }
              else {
                  callback(null);
              }
  
          },
  
      }
  
  }
  </code></pre>
  
  <p></p>
  
  <p>Because of this, I can't access the file in Laravel. Please I need help on what I'm doing wrong. Thanks</p>
  
  <p>Also, the payload looks fine.</p>
  
  <p><a href="https://i.stack.imgur.com/5TxMR.jpg" rel="nofollow noreferrer">Payload</a></p>
  
  <p>and doing `dd($request->file('image') returns</p>
  
  <pre><code>&lt;script&gt; Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 &lt;= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, function (e) { e.preventDefault = function () {e.returnValue = false;}; e.target = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if ('sf-dump-compact' == oldClass) { arrow = '&amp;#9660;'; newClass = 'sf-dump-expanded'; } else if ('sf-dump-expanded' == oldClass) { arrow = '&amp;#9654;'; newClass = 'sf-dump-compact'; } else { return false; } a.lastChild.innerHTML = arrow; s.className = newClass; if (recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0; s &lt; a.length; ++s) { if (a[s].className !== newClass) { a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML = arrow; } } } catch (e) { } } return true; }; function collapse(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if ('sf-dump-expanded' == oldClass) { toggle(a, recursive); return true; } return false; }; function expand(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if ('sf-dump-compact' == oldClass) { toggle(a, recursive); return true; } return false; }; function collapseAll(root) { var a = root.querySelector('a.sf-dump-toggle'); if (a) { collapse(a, true); expand(a); return true; } return false; } function reveal(node) { var previous, parents = []; while ((node = node.parentNode || {}) &amp;&amp; (previous = node.previousSibling) &amp;&amp; 'A' === previous.tagName) { parents.push(previous); } if (0 !== parents.length) { parents.forEach(function (parent) { expand(parent); }); return true; } return false; } function highlight(root, activeNode, nodes) { resetHighlightedNodes(root); Array.from(nodes||[]).forEach(function (node) { if (!/\bsf-dump-highlight\b/.test(node.className)) { node.className = node.className + ' sf-dump-highlight'; } }); if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) { activeNode.className = activeNode.className + ' sf-dump-highlight-active'; } } function resetHighlightedNodes(root) { Array.from(root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private')).forEach(function (strNode) { strNode.className = strNode.className.replace(/\b sf-dump-highlight\b/, ''); strNode.className = strNode.className.replace(/\b sf-dump-highlight-active\b/, ''); }); } return function (root, x) { root = doc.getElementById(root); var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || ' ').replace(rxEsc, '\\$1')+')+', 'm'), options = {"maxDepth":1,"maxStringLength":160,"fileLinkFormat":false}, elt = root.getElementsByTagName('A'), len = elt.length, i = 0, s, h, t = []; while (i &lt; len) t.push(elt[i++]); for (i in x) { options[i] = x[i]; } function a(e, f) { addEventListener(root, e, function (e) { if ('A' == e.target.tagName) { f(e.target, e); } else if ('A' == e.target.parentNode.tagName) { f(e.target.parentNode, e); } else if (e.target.nextElementSibling &amp;&amp; 'A' == e.target.nextElementSibling.tagName) { f(e.target.nextElementSibling, e, true); } }); }; function isCtrlKey(e) { return e.ctrlKey || e.metaKey; } function xpathString(str) { var parts = str.match(/[^'"]+|['"]/g).map(function (part) { if ("'" == part) { return '"\'"'; } if ('"' == part) { return "'\"'"; } return "'" + part + "'"; }); return "concat(" + parts.join(",") + ", '')"; } addEventListener(root, 'mouseover', function (e) { if ('' != refStyle.innerHTML) { refStyle.innerHTML = ''; } }); a('mouseover', function (a, e, c) { if (c) { e.target.style.cursor = "pointer"; } else if (a = idRx.exec(a.className)) { try { refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}'; } catch (e) { } } }); a('click', function (a, e, c) { if (/\bsf-dump-toggle\b/.test(a.className)) { e.preventDefault(); if (!toggle(a, isCtrlKey(e))) { var r = doc.getElementById(a.getAttribute('href').substr(1)), s = r.previousSibling, f = r.parentNode, t = a.parentNode; t.replaceChild(r, a); f.replaceChild(a, s); t.insertBefore(s, r); f = f.firstChild.nodeValue.match(indentRx); t = t.firstChild.nodeValue.match(indentRx); if (f &amp;&amp; t &amp;&amp; f[0] !== t[0]) { r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]); } if ('sf-dump-compact' == r.className) { toggle(s, isCtrlKey(e)); } } if (c) { } else if (doc.getSelection) { try { doc.getSelection().removeAllRanges(); } catch (e) { doc.getSelection().empty(); } } else { doc.selection.empty(); } } else if (/\bsf-dump-str-toggle\b/.test(a.className)) { e.preventDefault(); e = a.parentNode.parentNode; e.className = e.className.replace(/sf-dump-str-(expand|collapse)/, a.parentNode.className); } }); elt = root.getElementsByTagName('SAMP'); len = elt.length; i = 0; while (i &lt; len) t.push(elt[i++]); len = t.length; for (i = 0; i &lt; len; ++i) { elt = t[i]; if ('SAMP' == elt.tagName) { elt.className = 'sf-dump-expanded'; a = elt.previousSibling || {}; if ('A' != a.tagName) { a = doc.createElement('A'); a.className = 'sf-dump-ref'; elt.parentNode.insertBefore(a, elt); } else { a.innerHTML += ' '; } a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all children'; a.innerHTML += '&lt;span&gt;&amp;#9660;&lt;/span&gt;'; a.className += ' sf-dump-toggle'; x = 1; if ('sf-dump' != elt.parentNode.className) { x += elt.parentNode.getAttribute('data-depth')/1; } elt.setAttribute('data-depth', x); if (x &gt; options.maxDepth) { toggle(a); } } else if ('sf-dump-ref' == elt.className &amp;&amp; (a = elt.getAttribute('href'))) { a = a.substr(1); elt.className += ' '+a; if (/[\[{]$/.test(elt.previousSibling.nodeValue)) { a = a != elt.nextSibling.id &amp;&amp; doc.getElementById(a); try { s = a.nextSibling; elt.appendChild(a); s.parentNode.insertBefore(a, s); if (/^[@#]/.test(elt.innerHTML)) { elt.innerHTML += ' &lt;span&gt;&amp;#9654;&lt;/span&gt;'; } else { elt.innerHTML = '&lt;span&gt;&amp;#9654;&lt;/span&gt;'; elt.className = 'sf-dump-ref'; } elt.className += ' sf-dump-toggle'; } catch (e) { if ('&amp;' == elt.innerHTML.charAt(0)) { elt.innerHTML = '&amp;hellip;'; elt.className = 'sf-dump-ref'; } } } } } if (doc.evaluate &amp;&amp; Array.from &amp;&amp; root.children.length &gt; 1) { root.setAttribute('tabindex', 0); SearchState = function () { this.nodes = []; this.idx = 0; }; SearchState.prototype = { next: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx &lt; (this.nodes.length - 1) ? this.idx + 1 : this.idx; return this.current(); }, previous: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx &gt; 0 ? this.idx - 1 : this.idx; return this.current(); }, isEmpty: function () { return 0 === this.count(); }, current: function () { if (this.isEmpty()) { return null; } return this.nodes[this.idx]; }, reset: function () { this.nodes = []; this.idx = 0; }, count: function () { return this.nodes.length; }, }; function showCurrent(state) { var currentNode = state.current(); if (currentNode) { reveal(currentNode); highlight(root, currentNode, state.nodes); } counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' of ' + state.count(); } var search = doc.createElement('div'); search.className = 'sf-dump-search-wrapper sf-dump-search-hidden'; search.innerHTML = ' &lt;input type="text" class="sf-dump-search-input"&gt; &lt;span class="sf-dump-search-count"&gt;0 of 0&lt;\/span&gt; &lt;button type="button" class="sf-dump-search-input-previous" tabindex="-1"&gt; &lt;svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"&gt; &lt;path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"\/&gt; &lt;\/svg&gt; &lt;\/button&gt; &lt;button type="button" class="sf-dump-search-input-next" tabindex="-1"&gt; &lt;svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"&gt; &lt;path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"\/&gt; &lt;\/svg&gt; &lt;\/button&gt; '; root.insertBefore(search, root.firstChild); var state = new SearchState(); var searchInput = search.querySelector('.sf-dump-search-input'); var counter = search.querySelector('.sf-dump-search-count'); var searchInputTimer = 0; var previousSearchQuery = ''; addEventListener(searchInput, 'keyup', function (e) { var searchQuery = e.target.value; /* Don't perform anything if the pressed key didn't change the query */ if (searchQuery === previousSearchQuery) { return; } previousSearchQuery = searchQuery; clearTimeout(searchInputTimer); searchInputTimer = setTimeout(function () { state.reset(); collapseAll(root); resetHighlightedNodes(root); if ('' === searchQuery) { counter.textContent = '0 of 0'; return; } var xpathResult = doc.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), ' + xpathString(searchQuery) + ')]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); while (node = xpathResult.iterateNext()) state.nodes.push(node); showCurrent(state); }, 400); }); Array.from(search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous')).forEach(function (btn) { addEventListener(btn, 'click', function (e) { e.preventDefault(); var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous'; 'next' === direction ? state.next() : state.previous(); searchInput.focus(); collapseAll(root); showCurrent(state); }) }); addEventListener(root, 'keydown', function (e) { var isSearchActive = !/\bsf-dump-search-hidden\b/.test(search.className); if ((114 === e.keyCode &amp;&amp; !isSearchActive) || (isCtrlKey(e) &amp;&amp; 70 === e.keyCode)) { /* F3 or CMD/CTRL + F */ e.preventDefault(); search.className = search.className.replace(/\bsf-dump-search-hidden\b/, ''); searchInput.focus(); } else if (isSearchActive) { if (27 === e.keyCode) { /* ESC key */ search.className += ' sf-dump-search-hidden'; e.preventDefault(); resetHighlightedNodes(root); searchInput.value = ''; } else if ( (isCtrlKey(e) &amp;&amp; 71 === e.keyCode) /* CMD/CTRL + G */ || 13 === e.keyCode /* Enter */ || 114 === e.keyCode /* F3 */ ) { e.preventDefault(); e.shiftKey ? state.previous() : state.next(); collapseAll(root); showCurrent(state); } } }); } if (0 &gt;= options.maxStringLength) { return; } try { elt = root.querySelectorAll('.sf-dump-str'); len = elt.length; i = 0; t = []; while (i &lt; len) t.push(elt[i++]); len = t.length; for (i = 0; i &lt; len; ++i) { elt = t[i]; s = elt.innerText || elt.textContent; x = s.length - options.maxStringLength; if (0 &lt; x) { h = elt.innerHTML; elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength); elt.className += ' sf-dump-str-collapse'; elt.innerHTML = '&lt;span class=sf-dump-str-collapse&gt;'+h+'&lt;a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"&gt; &amp;#9664;&lt;/a&gt;&lt;/span&gt;'+ '&lt;span class=sf-dump-str-expand&gt;'+elt.innerHTML+'&lt;a class="sf-dump-ref sf-dump-str-toggle" title="'+x+' remaining characters"&gt; &amp;#9654;&lt;/a&gt;&lt;/span&gt;'; } } } catch (e) { } }; })(document); &lt;/script&gt;&lt;style&gt; pre.sf-dump { display: block; white-space: pre; padding: 5px; } pre.sf-dump:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } pre.sf-dump span { display: inline; } pre.sf-dump .sf-dump-compact { display: none; } pre.sf-dump abbr { text-decoration: none; border: none; cursor: help; } pre.sf-dump a { text-decoration: none; cursor: pointer; border: 0; outline: none; color: inherit; } pre.sf-dump .sf-dump-ellipsis { display: inline-block; overflow: visible; text-overflow: ellipsis; max-width: 5em; white-space: nowrap; overflow: hidden; vertical-align: top; } pre.sf-dump .sf-dump-ellipsis+.sf-dump-ellipsis { max-width: none; } pre.sf-dump code { display:inline; padding:0; background:none; } .sf-dump-str-collapse .sf-dump-str-collapse { display: none; } .sf-dump-str-expand .sf-dump-str-expand { display: none; } .sf-dump-public.sf-dump-highlight, .sf-dump-protected.sf-dump-highlight, .sf-dump-private.sf-dump-highlight, .sf-dump-str.sf-dump-highlight, .sf-dump-key.sf-dump-highlight { background: rgba(111, 172, 204, 0.3); border: 1px solid #7DA0B1; border-radius: 3px; } .sf-dump-public.sf-dump-highlight-active, .sf-dump-protected.sf-dump-highlight-active, .sf-dump-private.sf-dump-highlight-active, .sf-dump-str.sf-dump-highlight-active, .sf-dump-key.sf-dump-highlight-active { background: rgba(253, 175, 0, 0.4); border: 1px solid #ffa500; border-radius: 3px; } pre.sf-dump .sf-dump-search-hidden { display: none; } pre.sf-dump .sf-dump-search-wrapper { float: right; font-size: 0; white-space: nowrap; max-width: 100%; text-align: right; } pre.sf-dump .sf-dump-search-wrapper &gt; * { vertical-align: top; box-sizing: border-box; height: 21px; font-weight: normal; border-radius: 0; background: #FFF; color: #757575; border: 1px solid #BBB; } pre.sf-dump .sf-dump-search-wrapper &gt; input.sf-dump-search-input { padding: 3px; height: 21px; font-size: 12px; border-right: none; width: 140px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #000; } pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-input-next, pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-input-previous { background: #F2F2F2; outline: none; border-left: none; font-size: 0; line-height: 0; } pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-input-next { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-input-next &gt; svg, pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-input-previous &gt; svg { pointer-events: none; width: 12px; height: 12px; } pre.sf-dump .sf-dump-search-wrapper &gt; .sf-dump-search-count { display: inline-block; padding: 0 5px; margin: 0; border-left: none; line-height: 21px; font-size: 12px; }pre.sf-dump, pre.sf-dump .sf-dump-default{background-color:#fff; color:#222; line-height:1.2em; font-weight:normal; font:12px Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:100000}pre.sf-dump .sf-dump-num{color:#a71d5d}pre.sf-dump .sf-dump-const{color:#795da3}pre.sf-dump .sf-dump-str{color:#df5000}pre.sf-dump .sf-dump-cchr{color:#222}pre.sf-dump .sf-dump-note{color:#a71d5d}pre.sf-dump .sf-dump-ref{color:#a0a0a0}pre.sf-dump .sf-dump-public{color:#795da3}pre.sf-dump .sf-dump-protected{color:#795da3}pre.sf-dump .sf-dump-private{color:#795da3}pre.sf-dump .sf-dump-meta{color:#b729d9}pre.sf-dump .sf-dump-key{color:#df5000}pre.sf-dump .sf-dump-index{color:#a71d5d}&lt;/style&gt;&lt;pre class=sf-dump id=sf-dump-891601945 data-indent-pad="  "&gt;&lt;span class=sf-dump-const&gt;null&lt;/span&gt;
  &lt;/pre&gt;&lt;script&gt;Sfdump("sf-dump-891601945")&lt;/script&gt;
  </code></pre>