skip to Main Content

I have array of image data, and trying to convert it into array of Files

const images = [
  { img: "http://localhost/images/1.jpg", name: "1.png", mime_type: "image/jpeg" },
  { img: "http://localhost/images/2.jpg", name: "2.png", mime_type: "image/jpeg" },
]
const res: File[] = images.map(function (item) {
  return new File([item.img], item.name, { type: item.mime_type })
})

This does not work 🙁 As I understand it, the converted image in base24 should be passed to the file constructor? How can I do that?

UPD:
I have a VUE component to work with images. The input component has a property of type Array. How to create an Array based on the data returned by database. Returns from the database: image link, name and type.

UPD2 answer:

let PhotosAsFile: File[] = []
const _photos = [
  { url: "http://localhost:8080/images/1.jpeg", name: "name1", mime_type: "image/jpeg" },
  { url: "http://localhost:8080/images/2.jpeg", name: "name2", mime_type: "image/jpeg" },
  { url: "http://localhost:8080/images/3.jpeg", name: "name3", mime_type: "image/jpeg" },
]

const data: Promise<File>[] = _photos.map(async function (item): Promise<File> {
  const myBlob: Blob = await getBlobFromUrl(item.url)
  const extensionsFile: RegExpMatchArray | null | undefined = item.url?.match(/.([^.]+)$/)

  return new File([myBlob], extensionsFile && item.name ? item.name + "." + extensionsFile[1] : "image.jpeg", {
    type: item.mime_type ?? "image/jpeg",
  })
})

Promise.all(data).then((values: File[]): void => {
  PhotosAsFile = values
})

const getBlobFromUrl = (url): Promise<Blob> => {
  return new Promise((resolve, reject): void => {
    const request: XMLHttpRequest = new XMLHttpRequest()
    request.open("GET", url, true)
    request.responseType = "blob"
    request.onload = () => {
      resolve(request.response)
    }
    request.onerror = reject
    request.send()
  })
}

2

Answers


  1. Chosen as BEST ANSWER

    Answer

    let PhotosAsFile: File[] = []
    const _photos = [
      { url: "http://localhost:8080/images/1.jpeg", name: "name1", mime_type: "image/jpeg" },
      { url: "http://localhost:8080/images/2.jpeg", name: "name2", mime_type: "image/jpeg" },
      { url: "http://localhost:8080/images/3.jpeg", name: "name3", mime_type: "image/jpeg" },
    ]
    
    const data: Promise<File>[] = _photos.map(async function (item): Promise<File> {
      const myBlob: Blob = await getBlobFromUrl(item.url)
      const extensionsFile: RegExpMatchArray | null | undefined = item.url?.match(/.([^.]+)$/)
    
      return new File([myBlob], extensionsFile && item.name ? item.name + "." + extensionsFile[1] : "image.jpeg", {
        type: item.mime_type ?? "image/jpeg",
      })
    })
    
    Promise.all(data).then((values: File[]): void => {
      PhotosAsFile = values
    })
    
    const getBlobFromUrl = (url): Promise<Blob> => {
      return new Promise((resolve, reject): void => {
        const request: XMLHttpRequest = new XMLHttpRequest()
        request.open("GET", url, true)
        request.responseType = "blob"
        request.onload = () => {
          resolve(request.response)
        }
        request.onerror = reject
        request.send()
      })
    }
    

  2. To create File (i’m not sure why you’d ever need that), you need to pass in the binary data

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

    new File(bits, name, options?)
    bits
    An iterable object such as an Array, having ArrayBuffers, TypedArrays, DataViews, Blobs, strings, or a mix of any of such elements, that will be put inside the File. Note that strings here are encoded as UTF-8, unlike the usual JavaScript UTF-16 strings.

    That’s a file in memory. You can’t read it from the disk. You can’t write it to the disk. You can set it as value of and send as FormData I guess.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search