CODEWITHSUNDEEP
javascriptphp
Maxiss
Maxiss

Reputation: 1056

"blob:http: ... " what is it? and how to save it to a file?

I tried to explain more my issue but I guess it will be easier with some words and without my dirty code:

What is this and how can I put it in a file in my public folder?

blob:http://127.0.0.1/268ea876-5179-4a94-955c-7a191f8f84b5

I got this as a result this when uploading a GPX file. I tried to make it a blob file (with vuejs) to then put it in a file (with php) but or it is empty, or it just contains the text "blob: http://....". No way to get the content of this file.

If I put it in the browser, the content is showing well.

Thanks a lot, I hope my question is more clear here :)

Upvotes: 1

Views: 4445

Answers (1)

Webber
Webber

Reputation: 5484

What is a Blob?

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Blob

How to save it to a file?

Look at the Filereader documentation in the official specification.

See: https://w3c.github.io/FileAPI/#dfn-filereader

Practical (simplified) implementation

import React, { useState, useEffect } from 'react'

export const Image = ({ fileOrBlob }) => {
  const [src, setSrc] = useState(null)

  useEffect(() => { loadFileOrBlob (fileOrBlob) }}, [])

  const loadFileOrBlob = file => {
    const reader = new FileReader()

    if (file.name === undefined) return
    reader.addEventListener('load', () => setSrc(reader.result))

    reader.readAsDataURL(file)
  }

  return src 
    ? <img alt="" src={src} className={styles.image} /> 
    : <span>[<em> Loading image... </em>]</span>
}

Save it in PHP to store it into a file

Probably you're using some library that creates this blob. In order to save it, your server-side code has to receive the actual data from the blob and store it into a file. Most libraries do this using an ajax request. There are some decent implementations shown as examples of Dropzone.js.

See for example: https://www.dropzonejs.com/#server-side-implementation

Upvotes: 3

Related Questions