Как создать файл объект JS?

Question

[Александр Ширяев]

У меня есть форма для редактирования данных. Поведение такое:
- открывается модалка
- в инпуты подтягиваются данные с бека
- file input обязательный
- данные с бека для файла такого вида "base": "https://blablabla.ru/bla/bla/base/1f33d.pdf"

Для формы нужно реализовать поведение, где юзер может не трогать этот инпут, а меняет какие-то другие данные. Для это нужно на основе данных с бека создать файл-объект и передать его в инпут. Собственно как это сделать?

Сейчас код такой

this.base = [new File(['base'], this.editFormData.base, { type: 'application/pdf' })];

Проект на vue -> this.base - это модель, к которой привязан файлинпут, this.editFormData - это данные для формы которые приходят с бека

Код выше отрабатывает не корректно, с размером файла явно что-то не то

lastModified: 1676968516145
lastModifiedDate: Tue Feb 21 2023 11:35:16 GMT+0300 (Москва, стандартное время) {}
name: "https://blablabla.ru/bla/bla/base/1f33d035f1e2416b9bc656e4f7b7854a.pdf"
size: 4
type: "application/pdf"
webkitRelativePath: ""

Тогда как нормальный файл если юзер загружает что-то в файл-инпут

Answer 1

[Teleweb developer]

Считываете данные с файла с сервера, и скачиваете на комп

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  var base64data = reader.result; 
  downloadFile(base64data, "application/pdf", "hello.pdf");
}
downloadFile(base64data, type, fileName) { 
      const file = window.btoa(base64data);
      const url = `data:${fileType};base64,` + file;
      let a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
}

Вы про это?

Comments

[Александр Ширяев]

Нет. С сервера мне приходит только путь до файла типа - https://blablabla.ru/2157c6eeb8cdef6bfa9156911.pdf
Из этой строки мне нужно создать File и передать в файл инпут, в корректном виде.