Create File object using file path

Question

With the given file path, create a file object. new File(file_path) doesn't work. (WIN/MAC)

When tried creating a new file object using File constructor. There occurs an error.

new File(decodeURI(file_path))

when the above approach is followed File constructor err comes up.

This is not correct syntax as a File object constructor doesn't accept a path. It wants a byte array, amongst others: developer.mozilla.org/en-US/docs/Web/API/File/File — Rory McCrossan
– Rory McCrossan, Commented Apr 10, 2019 at 11:30
As above, also check which browser you are using: developer.mozilla.org/en-US/docs/Web/API/File/… — fdomn-m
– fdomn-m, Commented Apr 10, 2019 at 11:31

apfel · Accepted Answer · 2022-10-12 12:16:23Z

4

Had the exact same issue today, so I'll provide an answer in TypeScript(3.7.5) based on what worked out for me.

Tips:

FileAPI needs a Blob to work with (as others have also stated), it won't work with a file path.

The function:

static async createFile(path: string, name: string, type: string): Promise<File> {
            let response = await fetch(path);
            let data = await response.blob();
            let metadata = {
                type: type
            };
            return new File([data], name, metadata);
}

The call:

await createFile('../assets/images/someInterestingPNGImage.png', 'iAmAFile.png', 'image/png')
        .then((file) => {
            //do something with ur file.
            console.log(file);
         });

answered Oct 12, 2022 at 12:16

apfel

1191 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeO Over a year ago

Remark: the file hast to be in the asset-folder (and available in the launched environment - like Angular). Than automatic loading works fine. Thx for the tip which saved my day :-)

apfel Over a year ago

@LeO Yup, my bad for not mentioning that part. Tons of kudos for noticing.

Negi Rox · Accepted Answer · 2019-04-10 12:25:45Z

File API needs a Blob here is work-arround

var GetFileBlobUsingURL = function (url, convertBlob) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.addEventListener('load', function() {
            convertBlob(xhr.response);
        });
        xhr.send();
};

var blobToFile = function (blob, name) {
        blob.lastModifiedDate = new Date();
        blob.name = name;
        return blob;
};

var GetFileObjectFromURL = function(filePathOrUrl, convertBlob) {
       GetFileBlobUsingURL(filePathOrUrl, function (blob) {
          convertBlob(blobToFile(blob, 'testFile.jpg'));
       });
};
var FileURL="test/test.jpg"
GetFileObjectFromURL(FileURL, function (fileObject) {
     console.log(fileObject);
});

sugarcane · Accepted Answer · 2022-07-04 23:08:35Z

1

Here is a simple alternative solution using axios:

const srcToFile = async (src, fileName) => {
    const response = await axios.get(src, {
      responseType: "blob",
    });
    const mimeType = response.headers["content-type"];
    return new File([response.data], fileName, { type: mimeType });
  };

answered Jul 4, 2022 at 23:08

sugarcane

2,8101 gold badge16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Create File object using file path

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related