0

I Want to generate a link for my local woff file. With help of createobjectURL function, A link is created, however, the penalty is in the way of a blob. The URL lifetime is tied to the document in the window on which it was created. The URL runs only on my browser, and when I close relevant tab, the file disappears. So, I'm trying to find a way using js function which creates a perm link to uploaded local file. Currently I used . 

   

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>URL.createObjectURL example</title>
    </head>
    <body>
      <input type="file">
      <file>
      <p class="p">The URL of file is : </p>
    </body>
    <script>
        var Element = document.querySelector('input');
        var file = document.querySelector('file');
        Element.addEventListener('change', function() {
          var url = URL.createObjectURL(Element.files[0]);
          file.src = url;
          console.log(url);
          var d=document.querySelector(".p");
          d.textContent+=url;
    });
    </script>
    </html>
It creates blob:https://www.example.com/123 however I require https://www.example.com/123. I also tried Base 64 encoding. It works but the file size, and speed becomes a drawback even when it is compressed.
Kraken
  • 101
  • 8

1 Answers1

0

You're asking for one thing but giving an example of another here.

I Want to generate a permanent link for my local woff file.

You can't generate a URL to file://etc/etc since:

  • Browsers don't expose information about the user's file system to JS
  • If you could get a URL like that, then the browser wouldn't let the webpage link to it.

Access to local files is heavily restricted.

I require https://www.example.com/123

If you want the file to be available on your website: actually upload it to the website! Right now, the file only exists on the user's disk and in the memory being accessed by their browser.

You have to send the data to a server (e.g. with an Ajax POST request) where you have a webservice which reads the request, extracts the file from it, stores the file somewhere, gives it a URL, and then sends the URL back to the browser.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 'You can't generate a URL to file://etc/etc since' - What i'm trying to do is upload a local file and use createobjecturl to create a url. The problem is it's a static method. Do you suggest toString() or JSON for it? – Kraken Jan 29 '22 at 09:55
  • @Kraken — No. I suggest not using `createObjectURL` because [The URL lifetime is tied to the document in the window on which it was created](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). Instead I suggest doing what I wrote in the answer in the first place. – Quentin Jan 29 '22 at 09:56
  • The option isn't available on blogger, so I'm trying to settle with some javascript functions. I tried Base 64 encoding but the file size drastically increases, and decreases speed. Still searching on the Web for a solution. – Kraken Jan 29 '22 at 18:17
  • Host the font file elsewhere then. – Quentin Jan 29 '22 at 20:32
  • Where? I don't have an idea. I tried dropbox earlier. It didn't work. – Kraken Jan 29 '22 at 20:47
  • You need an actual web hosting service. Not a file storage service. – Quentin Jan 29 '22 at 20:48